对jq源码原理理解，实现基本选择器

　　

基于jq原理，实现原生js对基本选择器的封装

　　首先，此代码是参照jq源码的思想，用原生js实现对基本选择器的封装，下面先贴出代码：

 

(function(window) {
    var jQ = function(selector) {
        return new jQ.prototype.init(selector);
    }
    jQ.prototype = {
        length:0,
        init:function (selector){
            var _document = window.document,
                selector = selector.trim()
                classInt = 0;
            if(typeof selector != 'string' || !selector) {
                return this;
            }
            var mark = selector.charAt(0);
            if(mark == '#') {
                this[0] = _document.getElementById(selector.substring(1));
                classInt++;
            } else {
                var tags = '';
                if(selector.charAt(0) == '.' || selector.charAt(0) == '*') {
                    tags = _document.getElementsByTagName('*');
                } else {
                    tags = _document.getElementsByTagName(selector);
                }
                for(var i=0; i<tags.length;i++) {
                    if(selector.charAt(0) == '.' && tags[i].getAttribute('class') == selector.substring(1)) {
                        this[classInt] = tags[i]
                        classInt++;
                    } else if( selector.charAt(0) != '.' ){
                        this[classInt] = tags[i]
                        classInt++;
                    }
                }    
            }
            this.length = classInt;
            return this;
        },
        css:function(_style,col) {
            for(var i=0;i<this.length;i++) {
                this[i].style[_style] = col;
            }
        }
    }
    jQ.prototype.init.prototype = jQ.prototype;
    return window.$ = jQ;
})(window)

$('#aaa').css('background','red'); //调用，是不是很眼熟

 

　　此代码只支持对 id、class、标签及“*”选择器，下面就大概讲讲其思路：

　　　　1.括号运算传入‘window’（jq还传入'undefined',我这里没用的就没写,主要是解决低版本浏览器修改值）我觉得2点考虑：a是jq很庞大，传入后能准确定位到'window'这一层，b是方便压缩

　　　　2.一般我们实例化的都是jq这个方法，但是在这里它实例化的是jq原型下的init（）方法：

　　　　　，相当于这里2步就变成了一步完成；

　　　　　

　　　　3.然后再把jq原型prototype赋值给init的原型上，在init上就可以调用原型上的方法了。

　　　　　　

 

　　　　4.就是把jq这方法赋值给$,然后挂载在window下就暴露给外部可以调用了。

　　　　　　

 

　　下面我对以上代码大概讲下起原理：

　　

　　此图反映的是在jq下和用原生js下各自实现li背景颜色变红的方式，但是 jq是基于面向对象的设计，换言之，就是$(li)和css()这2个方法里面的aLi都是局部变量，2个方法之间没法直接的调用；

jq的处理方式：在构造函数中，只有’this‘是公共的，所有它把aLi存放在"this"上面，存放格式是：{0：li,1:li,length:2},由于存了length这个自变量，所有虽然是json格式，也可以用for循环来处理。

　　　　

所以，在我的代码里面我也借鉴了jq的这种做法，存放在“this”下，然后，在css（）方法中：

　　　　

就可以利用for循环来处理了

　　封装选择器是在init()方法中：

　　　　

　　在init()方法中，最后返回this，它上面的属性外部就可以调用了；在jq中，判断id,class...都是通过正则去做的，我这里比较简单粗暴。

　　

　　以上就是我对jq选择器这一部分的理解，然后自己基于面向对象的方式封装的基本选择器不对之处，请留言，我改正。