简单模拟JQ链式编程核心

来源：互联网发布：公司网站 php源代码编辑：程序博客网时间：2024/06/05 03:22

简单模拟JQ链式编程核心

在myJq.js中

(function () {//将$注册在window上    var $ = window.$ = window.jQuery = function (selector) {        return new Elements(findDoms(selector));    };    //核心方法    function Elements(doms) {        for (var i = 0, d; d = doms[i++];) {            this.push(d);        }    }    //暴露原型,提供扩展    $.fn = Elements.prototype = {        length: 0,        push: Array.prototype.push,        each: function (callback) {            for (var i = 0; dom = this[i]; i++) {                //使用call将回调函数,传给dom                callback.call(dom, i, dom);            }            //链式编程,最后都返回本身            return this;        }    };    //简单的选择器封装    function findDoms(selector) {        var index = selector.charAt(0);        if (index == '#') {        // 需要数组,此处需要用数组返回            return [document.getElementById(selector.substr(1))];        }        if (index == '.') {            return document.getElementsByClassName(selector.substr(1));        }        return document.getElementsByTagName(selector);    }})();

在页面html中

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>解析jq</title>    <script src="myJq.js"></script></head><body><div class="d1">1</div><div class="d1">6</div><div class="d2">2</div><div class="d3" id="test">3</div><div class="d4">4</div><div class="d5">5</div><script>//通过原型扩展css    $.fn.css = function (css, value) {        if (arguments.length == 2) {            return this.each(function (i, dom) {                dom.style[css] = value;            });        }        if (css instanceof String || typeof css == 'string') {            return this[0].style[css];        }        return this.each(function (i, dom) {            for (var v in css) {                dom.style[v] = css[v];            }        });    }    //通过each实现链式编程,写法太啰嗦,上面扩展了css    $('.d1').each(function () {        this.style.color = 'red';    }).each(function () {        this.style.border = '1px solid #000';    });    //参照上面的css扩展    $('#test').css('color', 'blue').css('background-color','#000');    $('#test').css({        color: 'blue',        'background-color': '#000'    });    </script>    </body></html>

0 0