思洋互动网站建设学前班

Sizzle选择器（1）

在jQuery构造器一节中，我们介绍了init()构造函数处理选择器字符串的第四种情况，截取代码如下所示。

广州网站建设,网站建设,广州网页设计,广州网站设计

1. } else  
2.     //第四种情况，处理jQuery(expression, [context])，  
3.     //例如，$("div .red")的表达式字符串  
4. return jQuery( context ).find( selector ); 

在这里，jQuery调用了jQuery对象的find()方法来处理选择器字符串。find()方法的代码如下所示。

1.     find: function( selector ) {  
2.         //当表达式不包含","符号时  
3.         if ( this.length === 1 ) {  
4.             var ret = this.pushStack( [], "find", selector );  
5.             ret.length = 0;  
6.             jQuery.find( selector, this[0], ret );  
7.             return ret;  
8.         //当表达式包含","符号时  
9.         } else {  
10.             return this.pushStack( jQuery.unique(jQuery.map(this, function(elem){  
11.                 return jQuery.find( selector, elem );  
12.             })), "find", selector );  
13.         }  
14.     }  
15. } 

首先，我们来分析一下pushStack()方法。

广州网站建设,网站建设,广州网页设计,广州网站设计

1. jQueryjQuery.fn = jQuery.prototype = {  
2.     // 获取多个元素的数组，并把它推入到堆栈中  
3.     // 返回新的匹配元素的数据集合  
4.     pushStack: function( elems, name, selector ) {  
5.         //新建一个jQuery对象结构的匹配元素数据集合  
6.         var ret = jQuery( elems );  
7.        //将上个对象的引用推入栈中  
8.         ret.prevObject = this;  
9.         ret.context = this.context;  
10.         //当关键字为find时，在原有selector的基础上，继续增加selector  
11.         //例如，$("div").find("p") 意思就是 $("div p")  
12.         if ( name === "find" )  
13.             ret.selector = this.selector + (this.selector ? " " : "") + selector;  
14.         else if ( name )  
15.             ret.selector = this.selector + "." + name + "(" + selector + ")";  
16.         // 返回最新的jQuery对象  
17.         return ret;  
18.     }  
19. } 

注意：ret.prevObject = this;这个方法在$().andSelf()和$().end()中调用，对于筛选或查找后的元素，返回前一次元素状态是非常有用的。

接着，就调用 jQuery.find( selector, this[0], ret );。而jQuery.find()函数是引用Sizzle对象的，首先看下面这几行代码。

1. jQuery.find = Sizzle;  
2. jQuery.filter = Sizzle.filter;  
3. jQuery.expr = Sizzle.selectors;  
4. jQuery.expr[":"] = jQuery.expr.filters;  
5. //……  
6. return;   
7. window.Sizzle = Sizzle; 

在这里应用了JavaScript设计模式中的适配器模式，jQuery.find调用的是Sizzle对象。Sizzle对象的代码可以参阅上一节说明，其中有如下一段，它调用了Sizzle.find()函数。

广州网站建设,网站建设,广州网页设计,广州网站设计

1. var ret = seed ?  
2.     { expr: parts.pop(), set: makeArray(seed) } :  
3.     Sizzle.find( parts.pop(), parts.length === 1 && context.parentNode  ? context.parentNode : context, isXML(context) );