jQuery源码解读[11] -- 选择符表达式

测试用html：

<body>
	<span class='article'>
		<h2>测试标题一</h2>
		<p id='p1'>段落一，测试段落，仅供测试之用！！！<a href='#'>linkage</a></p>
		<a href='#'>read more!</a>
	</span>
	<div class='article'>
		<h2>测试标题二</h2>
		<p id='p2'>段落二，测试段落，仅供测试之用！！！<a href='#'>linkage</a></p>
		<a href='#'>read more!</a>
	</div>
	<span class='article'>
		<h2>测试标题三</h2>
		<p id='p3'>段落三，测试段落，仅供测试之用！！！<a href='#'>linkage</a></p>
		<a href='#'>read more!</a>
	</div>
	<span class='article'>
		<h2>测试标题四</h2>
		<p id='p4'>段落四，测试段落，仅供测试之用！！！<a href='#'>linkage</a></p>
		<a href='#'>read more!</a>
	</div>
	... // 后面省略的全部为<div class='article'>...</div>元素
	<input type='button' class='article'>提交</input>
</body>

一、简单的CSS选择符

选择符	匹配
*	匹配所有元素
#id	匹配带有给定id的元素
element	给定元素类型的所有元素
.class	匹配给定类的所有元素
a, b	与a或b匹配的元素
a b	a的所有后代元素中，与b匹配的元素
a > b	作为a子元素的所以b元素
a + b	a之后的第一个与b匹配的兄弟元素
a - b	a之后的所有兄弟元素中与b匹配的元素

测试代码：

$('*') 	// 匹配上面html文档中的所有元素

$('#p1') 	// 匹配html文档中id='p1'的元素，即为段落一的<p>元素

$('p') 	  // 匹配html文档中所有的<p>元素，即所有的段落

$('.article') 	// 匹配所有class='article'的元素

$('h2,a')   // 匹配所有的<h2>或<a>元素

$('div a')  // 匹配<div>元素所有后代中的，所有的<a>元素，此处为html中所有的<a>元素

$('div > a')  // 匹配<div>元素的子元素中的<a>元素，此处为所有<a href='#'>read more!</a>

</br>

===

二、同辈元素间定位

</table> 测试代码： $('.article:nth-child(1)') // 匹配第一个class='article'元素， // 无论

,,都行，(以后简称.article元素) $('.article:nth-child(even)') // 匹配偶数位置(2,4,6,8...)的.article元素 $('.article:nth-child(odd)') // 匹配奇数位置(1,3,5,7...)的.article元素 $('.article:nth-child(2n+1)') // 匹配奇数位置(1,3,5,7...)的.article元素 // 即当n为0,1,2,3...时，表达式2n+1的值即为匹配元素 $('.article:nth-last-child(2)') // 匹配倒数第2个.article元素 $('.article:first-child') // 匹配第一个.article元素 $('.article:last-child') // 匹配最后一个.article元素 $('.article:only-child') // 因为匹配元素中不止一个.article元素，匹配为空 $('.article:nth-of-type(2)') // 匹配同类元素中的第二个元素， // 首先会找到含有class＝'article'所有元素，然后根据元素名称分类， // 最后匹配不同分类中的第二个元素(如果存在的话) // 此处匹配段落二和段落四所在的元素 $('.article:nth-last-of-type(1)') // 分别匹配同类元素中倒数第一个元素 // 此处匹配段落二和段落四，还有最后一个元素 $('.article:first-of-type') // 分别匹配同类元素中的第一个元素 // 此处匹配段落一、段落二所在元素，和最后一个元素 $('.article:last-of-type') // 分别匹配同来元素中的最后一个元素 // 雨nth-last-of-type(1)匹配结果相同 $('.article:only-of-type') // 匹配当前jQuery对象元素中，没有同名同辈元素的元素 // 如当前jQuery对象元素中，仅仅包含一个...</input>元素， // 那么此元素即为匹配元素 // 此处匹配最后一个元素 </br> === ## 三、匹配元素间定位 ##

选择符	匹配
:nth-child(index)	匹配父元素的第index个子元素(从1开始计数)
:nth-child(even)	匹配父元素的下标(索引)为偶数的</b>子元素(从1开始计数)</td></tr>
:nth-child(odd)	匹配父元素的下标(索引)为奇数的</b>子元素(从1开始计数)</td></tr>
:nth-child(formula)	匹配父元素的第n个子元素(从1开始计数)，formula(公式)格式为an+b，a和b为整数
:nth-last-child()	与:nth-child()相同(从最后一个元素，由1开始向前计数)
:first-child	匹配父元素的第一个子元素
:last-child	匹配父元素的最后一个子元素
:only-child	匹配父元素唯一一个子元素，若有多个元素，匹配为空
:nth-of-type()	与:nth-child()的功能相同，只是此方法只计相同元素
:nth-last-of-type()	与:nth-of-type()的功能相同，但是计数从最后一个元素开始
:first-of-type	同名的元素中的第一个元素
:last-of-type	同名元素中的最后一个元素
:only-of-type	没有同名的同辈元素的元素

选择符	匹配
:first	结果集中的第一个元素
:last	结果集中的最后一个元素
:not(selector)	结果集中与selector不匹配的所有元素
:even	结果集中的偶数元素(从0开始计数)
:odd	结果集中的奇数元素(从0开始计数)
:eq(index)	结果集中下标(索引)为index的元素(从0开始计数)
:gt(index)	结果集中位于给定下标(索引)之后的所有元素(从0开始计数)
:lt(index)	结果集中位于给定下标(索引)之前的所有元素(从0开始计数)

测试代码： :first :last 与 :first-child :last-child结果一样由于匹配元素间定位计数都是从0开始，而同辈元素间匹配是从1开始， :even 与 :nth-child(odd) 结果一样； :odd 与 nth-child(even) 结果一样相同的或者类似的此处不再介绍， $('.article:not(div,span)') // 匹配jQuery包含class＝'article'的不为和的元素 // 此处匹配最后一个元素 $('.article:eq(0)') // 匹配第一个.article元素，:eq(index)功能与nth-child(index)一样， // 只不过:eq(index)从下标从0开始计数 $('.article:gt(3)') // 匹配从第4个.article元素之后的所有元素(不包括第四个) $('.article:lt(3)') // 匹配从第4个.article元素之前的所有元素(不包括第四个)， // 此处匹配前三个.article元素 </br> === ## 四、属性匹配 ##

选择符	匹配
[attr]	匹配带有属性attr的元素
[attr='val']	匹配attr属性的值为val的元素
[attr!='val']	匹配attr属性值不为val的元素
[attr^='val']	匹配attr属性值以val开头的元素
[attr$='val']	匹配attr属性值以val结尾的元素
[attr*='val']	匹配attr属性值包含字符串val的元素
[attr~='val']	匹配attr属性值是多个空格分开的字符串，其中一个为val的元素
[attr\|='val']	匹配attr属性值为val，或者以val开头后面跟一个连接符(-)的元素

测试代码： $('article > [href]') // 匹配包含class＝'article'元素的子元素中，带有href属性的元素 // 此处为所有的a元素，如果在

元素中也包含a元素，将不会匹配在内 $('article [href]') // 匹配包含class＝'article'元素所有后代元素中，带有href属性的元素 // 与上面一个一样，匹配所有a元素，包含在

元素中的元素 $('.article [href='#']') // 匹配包含class＝'article'元素所有后代元素中，带有href属性的元素 // 且属性值为'#'的元素 [href!='www.baidu.com'] // 匹配属性href不为‘www.baidu.com’的元素 [href^='www'] // 匹配所有包含属性href，且href属性值以‘www’开头的元素 [href$='com'] // 匹配所有包含属性href，且href属性值以‘com’结尾的元素 [href*='baidu'] // 匹配所有包含属性href，且href属性值中包含‘baidu’的元素 [class~='hover'] // 匹配class='hover article blsf sflsj'的元素 [class|='my'] // 匹配class='my'或class='my-xxx'的元素 </br> === ## 五、表单匹配 ##

选择符	匹配
:input	匹配所有<input>、<select>、<textarea>、<button>的元素
:text	匹配type='text'的<input>元素
:password	匹配type='password'的<input>元素
:file	匹配type='file'的<input>元素
:radio	匹配type='radio'的<input>元素
:checkbox	匹配type='checkbox'的<input>元素
:submit	匹配type='submit'的<input>元素
:image	匹配type='image'的<input>元素
:reset	匹配type='reset'的<input>元素
:button	匹配type='button'的<input>元素
:enabled	匹配启用的表单元素
:disabled	匹配禁用的表单元素
:checked	匹配选中的复选框和单选按钮元素
:selected	匹配选中的<option>元素

</br> === ## 六、自定义选择符 ##

选择符	匹配
:root	文档的根节点
:header	标题元素(如<h1>、<h2>等)
:animated	匹配当前jQuery对象元素中，其动画正在播放的元素
:contains(text)	匹配当前jQuery对象元素中，包含给定文本text的元素
:empty	匹配当前jQuery对象元素中，不包含子节点的元素
:has(selector)	匹配当前jQuery对象元素中，后代元素中有和selector匹配的元素
:parent	匹配当前jQuery对象元素中，包含子节点的元素
:hidden	匹配当前jQuery对象元素中，隐藏的元素，包括通过css隐藏的元素和<input type='hidden' />
:visible	匹配当前jQuery对象元素中，显示的元素(即与:hidden相反的元素)
:focus	匹配当前jQuery对象元素中，获得焦点的元素
:lang(language)	匹配当前jQuery对象元素中，具有指定语言代码的元素(即指定了lang属性，或在<meta>标签中申明的)
:target	匹配URI标识符指向的目标元素

</br> === **未完待续。。。**