jQuery.API源码深入剖析以及应用实现(4) － 选择器篇(下)

这篇继上篇的 jQuery.API源码深入剖析以及应用实现(3) － 选择器篇(上) 之后继续介绍选择器的其它原理，包括内容，可见性，属性，子元素，表单，表单对象属性等等原理。

jQuery选择器的图示包括：

一、内容

1. 【 :contains(text) 】

匹配包含给定文本的元素。

例子

HTML代码	jQuery代码	结果
<div>John Resig</div> <div>George Martin</div> <div>Malcom John Sinclair</div> <div>J. Ohn </div>	$("div:contains('John')")	[ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]

首先我们先找到它的一个正则表达式

PSEUDO: /:((?:[\w\u00c0-\uFFFF_-]|\\.)+)(?:\((['"]*)((?:\([^\)]+\)|[^\2\(\)]*)+)\2\))?/
然后找到它的核心代码：

filter: {

PSEUDO: function(elem, match, i, array){

var name = match[1], filter = Expr.filters[ name ];

if ( filter ) {

return filter( elem, i, match, array );

} else if ( name === "contains" ) {

// textContext在FF下和innerText在IE下的属性是等效的，match[3]得到的是contains紧跟在后面包含的字符串，当elem元素的文本内容包含contains包含的关键字时，返回true

return (elem.textContent || elem.innerText || "").indexOf(match[3]) >= 0;

} else if ( name === "not" ) {

var not = match[3];

for ( var i = 0, l = not.length; i < l; i++ ) {

if ( not[i] === elem ) {

return false;

}

}

return true;

}

}

}
关键在于 (elem.textContent || elem.innerText || "").indexOf(match[3]) >= 0; 的布尔值判断，当返回真时，elem元素为匹配的元素。

2. 【 :empty 】，【 :has(selector) 】，【 :parent 】

:empty匹配所有不包含子元素或者文本的空元素。

:has(selector) 匹配含有选择器所匹配的元素的元素。

:parent匹配含有子元素或者文本的元素。

例子

HTML代码	jQuery代码	结果
<table> <tr><td>Value 1</td><td></td></tr> <tr><td>Value 2</td><td></td></tr> </table>	$("td:empty")	[ <td></td>, <td></td> ]
<div><p>Hello</p></div> <div>Hello again!</div>	$("div:has(p)").addClass("test");	[ <div class="test"><p>Hello</p></div> ]
<table> <tr><td>Value 1</td><td></td></tr> <tr><td>Value 2</td><td></td></tr> </table>	$("td:parent")	[ <td>Value 1</td>, <td>Value 1</td> ]

同样它匹配正则表达式PSEUDO。

找到它们的核心代码：

filters: {

parent: function(elem){

return !!elem.firstChild;

},

empty: function(elem){

return !elem.firstChild;

},

has: function(elem, i, match){

return !!Sizzle( match[3], elem ).length;

}

}
其中当!elem.firstChild即elem元素不包含子节点或者文本元素时，empty返回真；

当!!elem.firstChild即elem元素包含子节点或者文本元素时，parent返回真；

has中，match[3]为has紧跟在后面含有的元素，如p元素，!!Sizzle( match[3], elem ).length 得到 match[3]元素中包含在elem元素中的个数，如果个数 > 1，has返回真。

二、可见性

1. 【 :hidden 】和【 :visible 】

: hidden匹配所有的不可见元素，input 元素的 type 属性为 "hidden" 的话也会被匹配到。

:visible匹配所有的可见元素。

我们只需要看它的核心代码为：

jQuery.expr = Sizzle.selectors;

// …

Sizzle.selectors.filters.hidden = function(elem){

return "hidden" === elem.type ||

jQuery.css(elem, "display") === "none" ||

jQuery.css(elem, "visibility") === "hidden";

};

Sizzle.selectors.filters.visible = function(elem){

return "hidden" !== elem.type &&

jQuery.css(elem, "display") !== "none" &&

jQuery.css(elem, "visibility") !== "hidden";

};

当elem元素的CSS属性display为”none”，或者visibility为”hidden”时，返回真；

当elem元素的CSS属性display不为”none”，并且visibility不为”hidden”时，返回真。

通过布尔值来判断元素是否显示。

三、属性

1. [ attribute ]，[ attribute=value ]，[ attribute!=value ]，[ attribute^=value ]，[ attribute$=value ]，[ attribute*=value ]

属性匹配的正则表达式为：

ATTR: /\[\s*((?:[\w\u00c0-\uFFFF_-]|\\.)+)\s*(?:(\S?=)\s*(['"]*)(.*?)\3|)\s*\]/
通过Sizzle.filter方法，得到ATTR的正则匹配，然后调用Expr.filter[ “ATTR” ]，具体实现为：

filters: {

// 如 $("input[name^='news']")【<input name="newsletter" />】

ATTR: function(elem, match){

var result = Expr.attrHandle[ match[1] ] ? Expr.attrHandle[ match[1] ]( elem ) : elem[ match[1] ] || elem.getAttribute( match[1] ), value = result + "", type = match[2], check = match[4];

return result == null ?

type === "!=" :

type === "=" ?

value === check :

type === "*=" ?

value.indexOf(check) >= 0 :

type === "~=" ?

(" " + value + " ").indexOf(check) >= 0 :

!match[4] ?

result :

type === "!=" ?

value != check :

type === "^=" ?

value.indexOf(check) === 0 :

type === "$=" ?

value.substr(value.length - check.length) === check :

type === "|=" ?

value === check || value.substr(0, check.length + 1) === check + "-" :

false;

}

}
其中value相当于“newsletter”，check相当于“new”；

可以看出“!=”和“=”判断value === check; 的布尔值，即value是否等于check；

“^=”取得value.index(check) === 0; 的布尔值，即check的字符串是否在value的开头；

“$=”取得value.substr(value.length - check.length) === check; 的布尔值，即check的字符串是否在value的末尾；

“*=”取得value.index(check) >= 0; 的布尔值，即value包含check字符串为真；

四、子元素

1. 【 :nth-child(index/even/odd/equation) 】，【 :first-child 】，【 :last-child 】，【 :only-child 】

:nth-child(index/even/odd/equation) 匹配其父元素下的第N个子或奇偶元素。

:first-child 匹配第一个子元素。

:last-child 匹配最后一个子元素。

:only-child 如果某个元素是父元素中唯一的子元素，那将会被匹配。

它匹配的正则表达式为：

CHILD: /:(only|nth|last|first)-child(?:\((even|odd|[\dn+-]*)\))?/
通过Sizzle.filter方法，得到CHILD的正则匹配，然后调用Expr.filter[ “CHILD” ]，具体实现为：

filter: {

CHILD: function(elem, match){

var type = match[1], parent = elem.parentNode;

var doneName = match[0];

if ( parent && (!parent[ doneName ] || !elem.nodeIndex) ) {

var count = 1;

for ( var node = parent.firstChild; node; node = node.nextSibling ) {

if ( node.nodeType == 1 ) {

node.nodeIndex = count++;

}

}

parent[ doneName ] = count - 1;

}

if ( type == "first" ) {

return elem.nodeIndex == 1;

} else if ( type == "last" ) {

return elem.nodeIndex == parent[ doneName ];

} else if ( type == "only" ) {

return parent[ doneName ] == 1;

} else if ( type == "nth" ) {

var add = false, first = match[2], last = match[3];

if ( first == 1 && last == 0 ) {

return true;

}

if ( first == 0 ) {

// 形如 $("ul li:nth-child(2)")

if ( elem.nodeIndex == last ) {

add = true;

}

}

// 形如 $("ul li:nth-child(even)"), $("ul li:nth-child(odd)")，$("ul li::nth-child(3n+1)")

else if ( (elem.nodeIndex - last) % first == 0 && (elem.nodeIndex - last) / first >= 0 ) {

add = true;

}

return add;

}

}

}
其中type为first时，elem.nodeIndex == 1; 当elem元素为第一个节点时，返回真；

type为last时，elem.nodeIndex == parent[ doneName ]; 当elem元素为它的父节点的最后一个子节点时，返回真；

type为only时，parent[ doneName ] == 1; 当elem元素的父节点只有一个子节点时，返回真；

type为nth时，各种情况已经在代码中标注。

五、表单

1. 【 :input 】，【 :text 】，【 :password 】，【 :radio 】，【 :checkbox 】，【 :submit 】，【 :image 】，【 :reset 】，【 :button 】，【 :file 】，【 :hidden 】

它们匹配的正则表达式为：

PSEUDO: /:((?:[\w\u00c0-\uFFFF_-]|\\.)+)(?:\((['"]*)((?:\([^\)]+\)|[^\2\(\)]*)+)\2\))?/
找到它们的核心代码：

filters: {

text: function(elem){

return "text" === elem.type;

},

radio: function(elem){

return "radio" === elem.type;

},

checkbox: function(elem){

return "checkbox" === elem.type;

},

file: function(elem){

return "file" === elem.type;

},

password: function(elem){

return "password" === elem.type;

},

submit: function(elem){

return "submit" === elem.type;

},

image: function(elem){

return "image" === elem.type;

},

reset: function(elem){

return "reset" === elem.type;

},

button: function(elem){

return "button" === elem.type || elem.nodeName.toUpperCase() === "BUTTON";

},

input: function(elem){

return /input|select|textarea|button/i.test(elem.nodeName);

}

}
可以看出elem.type得到元素的type属性，当元素type属性等于相应的值时，返回相应的布尔值。

如果为真，最后返回匹配的jQuery对象。

六、表单对象属性

1. 【 : enabled 】，【 : disabled 】，【 : checked 】，【 :selected 】

它们匹配的正则表达式为：

PSEUDO: /:((?:[\w\u00c0-\uFFFF_-]|\\.)+)(?:\((['"]*)((?:\([^\)]+\)|[^\2\(\)]*)+)\2\))?/
找到它们的核心代码：

filters: {

enabled: function(elem){

return elem.disabled === false && elem.type !== "hidden";

},

disabled: function(elem){

return elem.disabled === true;

},

checked: function(elem){

return elem.checked === true;

},

selected: function(elem){

// Accessing this property makes selected-by-default

// options in Safari work properly

elem.parentNode.selectedIndex;

return elem.selected === true;

}

}
其中,enabled对应elem的disabled属性为false并且elem的type属性为hidden；

disabled对应elem的disabled属性为true；

checked对应elem的checked属性为true；

selected对应elem的selected属性为true；

jQuery的选择器的原理至此已经全部介绍完了，通过选择器认识到了通过Expr.filters达到了过滤的目的。

下篇我将介绍jQuery中的属性的原理。

谢谢大家阅读

！