【jQuery学习笔记----jQuery选择器接口】

jQuery选择器接口

jQuery构造器

jQuery.fn.init()负责对传入参数进行分析，然后生成并返回jQuery对象。jQuery.fn.init()构造器的第一个参数是必须的，如果为空，则默认为document。从本质上讲，使用jQuery选择器（即jQuery.fn.init()构造器）构建jQuery对象，就是在this对象上附加DOM元素集合。附加的方式包括以下两类。

l  如果是单个DOM元素，可以直接把DOM元素作为数组元素传递给this对象，还可通过ID从DOM文档中查询元素。

l  如果是多个DOM元素，则以集合形式附加，如jQuery对象、数组和对象等，此时通过css选择器匹配到所有dom元素，然后过滤，最后构建数组的数据结构。

而css选择器，则是通过jQuery().find(selector)函数来完成的。通过jQuery().find(selector)可以分析选择器字符串，并在DOM文档树中查找到符合的元素集合。

     //jQuery原型对象

    //构造jQuery对象入口

    //所有jQuery对象方法都通过jQuery原型对象来继承

    jQuery.fn = jQuery.prototype = {

        //jQuery对象初始化构造器，相当于jQuery对象的类型，由该函数负责创建jQuery对象参数说明：selector:选择器的符号，可以是任意数据类型，考虑参数应该是包含DOM元素的任何数据

        context:document //上下文，指定在文档DOM中哪个节点下开始进行查询，默认为document

        ,init:function(selector,context){

            //确保selector参数存在，默认值为document

            selector = selector || document;

            //第一种情况，处理选择符为DOM元素，此时将忽略上下文，即忽略第二个参数

            //例如：$(document.getElementById("wrap")),jQuery(DOMElement)匹配元素。先使用selector.nodeType判断当前selector为元素节点，将length设置为1，

            //并且赋值给context，实际上context作为init的第二个参数，也意味着它的上下文节点就是selector该点。返回它的$(DOMElement)对象

            if(selector.nodeType){   //说明是DOM元素

               this[0] = selector;    //直接把当前参数的DOM元素存入类数组中

                this.length = 1;    //设置类数组长度，以方便遍历访问

                this.context  = selector;   //设置上下文属性

                return this;    //返回jQuery对象，即类数组对象

            }

            //如果选择符参数为字符串，则进行处理

            if(typeofselector==="string"){

                //使用quickExpr正则表达式匹配选择符字符串，决定是处理html字符串，还是处理ID字符串

                var quickExpr =/^[^<]*(<[\w\W]+>)[^>]*$|^#([\w-]+)$/;

                var match =quickExpr.exec(selector);

                //匹配的情况，任何情况下都不是ID

                if(match && (match[1]|| !context)){

                     if(match[1])

                         selector =jQuery.clean([match[1]],context);

                      else{

                         var elem = document.getElementById(match[3]);

                         if(elem &&elem.id!=match[3])

                             returnjQuery().find(selector);

                         var ret  = jQuery(elem || []);

                         ret.context =document;

                         ret.selector =selector;

                         return ret;

                     }

                }else

                    returnjQuery(context).find(selector);

            }elseif(jQuery.isFunction(selector)){

                return jQuery(document).ready(selector);

            }

           

            if(selector.selector &&selector.context){

                this.selector =selector.selector;

                this.context =selector.context;

            }

           

            returnthis.setArray(jQuery.isArray(selector)?selector:jQuery.makeArray(selector));

 

        }

    }

思路设计：

第一步：当第一个参数为DOM，则废除第二个参数，直接把DOM元素存储到jQuery对象集合中，返回该jQuery对象。

第二步：如果第一个参数是字符串，则有三种情况。

      情况一、第一个参数是html字符串，第二个参数可选，则执行selector = jQuery.clean([match[1]],context)，该语句能把html字符串转换成dom对象的数组，然后执行Array类型数组并返回jQuery对象。

      情况二、第一个参数是#id字符串，即类似$(id)，则使用document.getElementById()方法获取该元素，如果没有获得元素，设置selector = []，转到执行Array类型，并返回空集合的jQuery对象。如果获得元素，则构建jQuery对象并返回。这里把#id单独列出，是为了提高性能。

       情况三、处理复杂CSS选择符字符串，第二个参数是可选的。通过return jQuery.find(selector);语句实现，该语句先执行jQuery(context),可以看出第二参数context可以是任意值，也可以是集合数据。然后调用find(selector)找到jQuery(context)上下文所有的DOM元素，即这些元素都满足selector表达式，最后构建jQuery对象返回。

第三步：如果第一个参数是函数，则第二个参数可选。它是$(document).ready(fn)形式的简写，return jQuery(document)[jQuery.fn.ready?”ready”:”load”](selector)是其执行的代码。该语句先执行jQuery(documnet)，再通过newjQuery.fn.init()方式创建jQuery对象，此时元素为document。再调用这个对象的ready()方法，并返回当前的jQuery对象。

     $(document).ready(fn)是实现domReady的jQuery对象的统一入口，可以通过$(fn)注册domReady的监听函数。所有调用jQuery实现功能的代码都应该在domReady之后才能够运行。

第四步：如果第一个参数是除DOM元素、函数和字符串之外的所有其他类型，也可以为空，而第二个参数可靠。调用 return this.setArray(jQuery.makeArray(selector));进行处理时，它先是把第一个参数转换为数组。当然这个参数可是类数组的集合，如jQuery对象，getElementByTag返回的DOM元素集合等，可支持$(this)。selector还可能是单个任意对象，转换成标准的数组之后，执行this.setArray把这个数组中的元素全部存储到当前的jQuery对象集合中，并返回jQuery对象。

...这节内容……实在看不下去…………