【你的jQuery？是你的jQuery】（三）——jQuery的选择器

目的：

了解jQuery实例对象的组成方式，并打造出形如 $(".class tag #id") 这种路径组合似的查找

解析：

上代码之前，先介绍一下$(oo)或者$(xx)什么的，其实就是一个含有length属性的类数组，其中包含的是符合规则的DOM元素，通过$(oo)[0]、$(oo)[1]、$(oo)[2]……这种形式，但又不是数组，因为没有Array的原型方法（push，slice等）。

所以我们

  var jQuery = window.jQuery = window.$ = function (selector, context) {
        return new jQuery.fn.init(selector, context);
  }

new出来的是一个类数组，也就是实例对象的组成方式。在调用.css()、.attr()等方法时候，也就是遍历这个类数组，然后分别操作。

所以在介绍选择器前我们先了解两个静态方法：

一、$.each( )

jQuery中有一个静态方法是$.each( )，它可以遍历对象或者数组进行callback

 jQuery.extend({
　　　　 each: function (object, callback) {
            var isObject = Object.prototype.toString.apply(object)=="[object Object]", i = 0, length = object.length;
            if (isObject && !length) { //obj
                for (name in object)
                    if (callback.call(object[name], name, object[name]) === false)
                        break;
            }
            else {  //array
                for (var value = object[0]; i < length && callback.call(value, i, value) !== false; value = object[++i]) { }
            }
            return this;
        }

})

说明：

此方法参照jQuery源码，只是给出了遍历时候，没有额外参数的情况。此方法支持形如$.each(obj,callback(key,vlaue){...})和$.each(array,callback(key,vlaue){...})这两种情况,即遍历对象和数组。

1、采用Object的原型方法toString，此方法可以判断出任何数据类型，包括null、undefined等，建议用此方法，因为typeof有的数据类型判断不准，例如typeof [] 和typeof {}结果都为“object”

2、循环的中断条件为callback中，你设置了返回fasle

3、第二个for写的实在是浪啊... ,执行语句也在了条件语句里。拿出来就能理解了：

for (var value = object[0]; i < length ;i++) {
　　if(callback.call(value, i, value) === false){
    　　break;
　　}
 　 value = object[i];
 }

二、$.getElementByClassName( )

因为IE等老一辈浏览器不支持按类查找（不含API:querySelectorAll）,属于兼容处理，自己写一个

jQuery.extend({
　　　　getElementByClassName: function (selector, context) {
            var ret = [], context = context || document;
            if (document.querySelectorAll) {
                ret = context.querySelectorAll(selector);
            }
            else {
                var elems = context.getElementsByTagName("*"),
                className = document.all ? "className" : "class",
                selector = selector.replace(".", ""),
                reg = new RegExp("\\b" + selector + "\\b");
                for (var i = 0, len = elems.length; i < len; i++) {
                    if (elems[i].nodeType == 1 && reg.test(elems[i].getAttribute(className))) {
                        ret.push(elems[i]);
                    }
                }
            }
            return ret;
        }
})

说明：

此方法，很简单，是遍历DOM树，正则判断是否其样式类名为选择类名，符合要求压入数组，最后一并返回。

好，至此，选择器前的准备工作就剩一个了，了解Sizzle (jQuery的选择器引擎) 的思路和组成。

思路：也就是“从右至左”的查找，形如 $(".class1 .class2 .class3")，正常思路是查找 .class1下的所有 .class2，然后再查找 .class3这样进行了3次DOM查找，而换成“从右至左”也就是查找所有的.class3，然后得到的节点遍历其父节点，符合.class2 的节点再遍历判断是否其父节点是否符合.class1，这样只遍历一遍DOM，遍历节点属性，要比遍历DOM要节省的多。

组成：选择器(select)和过滤器(filter)，即实现上述思路中的查找和判断。

三、原型方法 init

jQuery.fn = jQuery.prototype = {
            init: function (selector, context) {
                var elems, _this = this;
                this.contexts = []; //上下文，用于存放符合条件节点的上下文，为以后若再次查找留个依据，例如$(oo).find(xx)，find时候用
                if (Object.prototype.toString.apply(selector)) { //str情况
                    selector = selector.replace(/^\s+|\s+$/,"");//出去选择字符串前后空格
                    elems = this.select(selector, context); //返回符合要求的节点
                    if (elems[0]) {  //如果此类型节点存在的话
                        jQuery.each(elems, function (k, v) {//遍历构造出this[0],this[1]...这种类数组
                            _this.contexts[k] = v;
                            _this[k] = v;
                        })
                        this.length = elems.length;
                        this.selector = selector;
                        return this;
                    }
                }
            }

说明：

此篇仅考虑传入正确字符串的情况，其中还有传入节点、函数、节点数组、类数组（jQuery实例）等情况，后续篇会进行添加。

为了方便理解，说明部分至于代码注释处。

四、原型方法 select

jQuery.fn = jQuery.prototype = {
            select: function (selector, context) {
                var aQuery = selector.split(/\s+/), context = context || document, match = [], elem, result, ret = [], _this = this;
                match = _reg.match_id_class_tag.exec(aQuery[aQuery.length - 1]);
                if (match[1] == "#") { //选择#id
                    elem = [context.getElementById(match[2])];
                }
                else if (match[1] == ".") { //选择.class
                    elem = jQuery.getElementByClassName(match[0], context);
                }
                else if (!match[1]) {  //选择 tag
                    elem = context.getElementsByTagName(match[2]);
                }
                //分割线----------------------------------------------
                if (elem[0]) {
                    jQuery.each(elem, function (k, v) {
                        result = _this.filter(v, aQuery, context); //遍历过滤
                        if (result != null) {
                            ret.push(result);
                        }
                    })
                }
                return ret;
            }
        }

说明：

1、分割线以上：按照上述思路，将传入参数处理，直接选取最后一个参数，选择符合其要求的节点

2、分割线一下：进行过滤操作，将符合要求的节点压入数组

五、原型方法 filter

jQuery.fn = jQuery.prototype = {
       filter: function (elem, aQuery, context) {
       var match = [],isMatch = [],i = aQuery.length - 1,context = context || document.body,result,parentNode,matchParentNode=elem;
                if (i == 0) { return elem; } //如果就一个选择条件
                parentNode = elem.parentNode;
                while (i--) {//倒序循环选择条件
                    match = /(#|\.)?(\w+)/.exec(aQuery[i]); //匹配id class tag
                    while (parentNode != context) {
                        if (match[1] == "#") { //选择#id
                            if (parentNode.getAttribute("id") == match[2]) {
                                isMatch[i] = true;
                                matchParentNode = parentNode;
                            }
                        }
                        else if (match[1] == ".") { //选择.class
                            var className = document.all ? "className" : "class";
                            if (parentNode.getAttribute(className) == match[2]) {
                                isMatch[i] = true;
                                matchParentNode = parentNode;
                            }
                        }
                        else if (!match[1]) {  //选择 tag
                            if (parentNode.nodeName == match[2].toUpperCase()) {
                                isMatch[i] = true;
                                matchParentNode = parentNode;
                            }
                        }
                        parentNode = (parentNode == matchParentNode) ? matchParentNode.parentNode : parentNode.parentNode;
                    }
                    parentNode = matchParentNode;
                }
                //isMatch为判定标志位,其长度应该等于父选择条件的个数，且每一项都为true才能判定为选中
                result = (isMatch.length == aQuery.length - 1) && !(/,,/.test(("," + isMatch.join(',') + ","))) ? elem : null;
                return result;
            }
  }

说明：

为了方便理解，说明部分至于代码注释处。

读到这里，如果你还是没太了解代码的意图，这里再给你说下流程，方便你看代码

五部分代码：简称为a、b、c、d、e

a和b是一块，其为静态方法，也就是辅助用的函数，a目的是遍历作用，b为兼容得到按类查找节点

c、d、e为一块，其为原型方法，仿照Sizzle的思路，例如：$(".class1 .class2 .class3")

第一步：利用select方法查找所有的样式类名为class3的元素集合

第二部：然后将集合丢给filter方法，进行".class1 .class2“的判定查找其父节点符合的类名是否为class2,若有则设在isMacth[1]=true，负责继续查找上层父节点，直到body节点，最后将结果集join(",")，如果全满足条件的话会得到”，true，true，“这种字符串，所以利用”，，“这种连续逗号的方式判定，有的标志位没有true

第三部：返回init中得到满足条件的元素集合，创造类数组并返回。

自此，成功构造出支持id、类名、标签的路径CSS查找器。

（本篇至此，其他内容未完，待续……）

下一节提示：

趁热打铁，打造find原型方法，并完整扩展init方法