简单模拟JQ链式编程核心

最新推荐文章于 2022-04-19 18:25:20 发布

Justin0223

最新推荐文章于 2022-04-19 18:25:20 发布

阅读量517

点赞数

分类专栏： JQuery 文章标签：编程

本文链接：https://blog.csdn.net/u010377383/article/details/71787428

版权

JQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

简单模拟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>