通过阅读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;

测试一下。

        
     
              div 1    
     
    
     
              div 2    
     
            span 1