jQuery子元素過(guò)濾器
| 名稱 | 說(shuō)明 | 舉例 |
| :nth-child(index/even/odd/equation) | 匹配其父元素下的第N個(gè)子或奇偶元素 ':eq(index)' 只匹配一個(gè)元素，而這個(gè)將為每一個(gè)父元素匹配子元素。:nth-child從1開(kāi)始的，而:eq()是從0算起的！ 可以使用:? | 在每個(gè) ul 查找第 2 個(gè)li:? $("ul li:nth-child(2)") |
| :first-child | 匹配第一個(gè)子元素 ':first' 只匹配一個(gè)元素，而此選擇符將為每個(gè)父元素匹配一個(gè)子元素 | 在每個(gè) ul 中查找第一個(gè) li:? $("ul li:first-child") |
| :last-child | 匹配最后一個(gè)子元素 ':last'只匹配一個(gè)元素，而此選擇符將為每個(gè)父元素匹配一個(gè)子元素 | 在每個(gè) ul 中查找最后一個(gè) li:? $("ul li:last-child") |
| :only-child | 如果某個(gè)元素是父元素中唯一的子元素，那將會(huì)被匹配 如果父元素中含有其他元素，那將不會(huì)被匹配。 | 在 ul 中查找是唯一子元素的 li:? $("ul li:only-child") |
注：
1、:nth-child(index)從1開(kāi)始的，而eq(index)是從0開(kāi)始的，就是說(shuō)? $("ul li:nth-child(0)").css("color","red")是獲取不到相匹配的元素，只能從1開(kāi)始，即? $("ul li:nth-child(1)").css("color","red")，而eq(0)可以獲得，同樣都是獲得第一個(gè)子元素
??? :nth-child(even)是獲得偶數(shù)子元素，即第二個(gè)，第四個(gè)，第六個(gè)...,而:even則是從索引0開(kāi)始，匹配第二個(gè)索引，第四個(gè)索引...,也就是第一個(gè)，第三個(gè)，第五個(gè)...,看上去貌似都是獲得奇數(shù)項(xiàng)，同樣:nth-child(odd)和:odd同樣也是如此?
2、?? :first-child匹配每個(gè)父類(lèi)的子元素，而:first則是匹配一個(gè)子元素，?:last-child和last也是這樣
3、only-child:匹配某個(gè)元素是父元素中唯一的子元素，就是說(shuō)當(dāng)前子元素是類(lèi)中唯一的元素，則匹配！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>無(wú)標(biāo)題頁(yè)</title>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
jQuery(function($){
// $("ul li:first-child").css("color","red");
$("ul li:first").css("color","red");
// $("ul li:last-child").css("color","red");
// $("ul li:nth-child(even)").css("color","red");
// $("ul li:odd").css("color","red");
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul>
<li>第一個(gè)元素</li>
<li>第二個(gè)元素</li>
<li>第三個(gè)元素</li>
<li>第四個(gè)元素</li>
<li>第五個(gè)元素</li>
<li>第六個(gè)元素</li>
</ul>
<ul>
<li>第一個(gè)元素</li>
<li>第二個(gè)元素</li>
<li>第三個(gè)元素</li>
<li>第四個(gè)元素</li>
<li>第五個(gè)元素</li>
<li>第六個(gè)元素</li>
</ul>
</div>
</form>
</body>
</html>
