自己写一个jquery

通过阅读jquery原代码， 我们可以模拟写一个简单的jquery

比如常用的

jQuery("div").css("color","red");
jQuery("#span1").css("color","green");
 

1. jQuery(), 因为是链式调用， 所以返回是一个对象。

        jQuery = function(selector){
            return new jQuery.prototype.init(selector);
        }
        jQuery.prototype = {
            constructor:jQuery,
            init:function(selector){
                this.elements = document.querySelectorAll(selector);
            },
            css:function(key, value){
            ......
            }
        }

 此时，this.elements为所有合条件的html elements

2. css(), 对所有合适条件的element设置样式。

            css:function(key, value){
                this.elements.forEach(element => {
                    element.style[key] = value;
                });
            }

 3. 此时，css是访问不了this.elements的。 因为this.elements是在init定义，并且init是构造函数。所以this.elements是init实例里面的属性。

        jQuery.prototype.init.prototype=jQuery.prototype;

 这样 css()就能访问this.elements.

完整代码

        jQuery = function(selector){
            return new jQuery.prototype.init(selector);
        }
        jQuery.prototype = {
            constructor:jQuery,
            init:function(selector){
                this.elements = document.querySelectorAll(selector);
            },
            css:function(key, value){
                this.elements.forEach(element => {
                    element.style[key] = value;
                });
            }
        }

        jQuery.prototype.init.prototype=jQuery.prototype;

 最后起个别名

jQuery.fn=jQuery.prototype

        jQuery = function(selector){
            return new jQuery.fn.init(selector);
        }
        jQuery.fn = jQuery.prototype = {
            constructor:jQuery,
            init:function(selector){
                this.elements = document.querySelectorAll(selector);
            },
            css:function(key, value){
                this.elements.forEach(element => {
                    element.style[key] = value;
                });
            }
        }

        jQuery.fn.init.prototype=jQuery.fn;

测试一下。

<html lang="en">
<head>
    <title>My jquery</title>
</head>
<body>
    <div>
        div 1
    </div>
    <div>
        div 2
    </div>

    <span id="span1">
        span 1
    </span>
</body>
   <script type="text/javascript">
        jQuery = function(selector){
            return new jQuery.fn.init(selector);
        }
        jQuery.fn = jQuery.prototype = {
            constructor:jQuery,
            init:function(selector){
                this.elements = document.querySelectorAll(selector);
            },
            css:function(key, value){
                this.elements.forEach(element => {
                    element.style[key] = value;
                });
            }
        }

        jQuery.fn.init.prototype=jQuery.fn;

        jQuery("div").css("color","red");
        jQuery("#span1").css("color","green");
   </script> 
</html>

 

posted @ 2018-06-04 22:43  Ken83  阅读(156)  评论(0)  编辑  收藏  举报