jQuery - 选择器（三）

时间：2010-09-28 来源：千叶红枫

jQuery选择器的第三部分是子过滤选择器（child filter），主要包括一下几个：

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

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

:nth-child 匹配其父元素下的第N个子或奇偶元素。

:only-child 如果父元素中只包含一个子元素则符合匹配。

上一节中有:first 选择器，这个选择器选择的只是一个单一的对象，而:first-child选择器可以选择多个对象，例如选择多个<ul>中的第一个<li>元素，他和:nth-child(1)相同。:last-child选择器同理。

:only-child选择器可以这样理解：我有多个<ul>标签，每个<ul>中包含的<li>个数不同，如果我使用这个选择器后就只能找到包含一个<li>的<ul>中的<li>。（想了好几个解释方法但都有点绕）

:first-child :last-child :only-child的例子

 1 <!doctype>
 2  <html>
 3     <head>
 4         <style>
 5             ul,li{
 6                 list-style:none;
 7                 width:200px;
 8             }
 9         </style>
10         <script src="jquery/jquery.js"></script>
11         <script>
12             $(document).ready(
13                 function(){
14                     $("ul li:first-child").css("border","1px solid blue");
15                     $("ul li:only-child").css("color","blue");
16                     $("ul li:last-child").css("border","1px solid red");
17                 }
18             )
19         </script>
20     </head>
21     <body>
22         <ul>
23             <li>ul1-li1</li>
24             <li>ul1-li2</li>
25             <li>ul1-li3</li>
26             <li>ul1-li4</li>
27         </ul>
28         <ul>
29             <li>ul2-li1</li>
30             <li>ul2-li2</li>
31             <li>ul2-li3</li>
32             <li>ul2-li4</li>
33         </ul>
34         <ul>
35             <li>ul3-li1</li>
36         </ul>
37         <ul>
38             <li>ul4-li1</li>
39         </ul>
40     </body>
41  </html>

显示结果：

:nth-child选择器灵活性比较大，完整结构是$(":nth-child(index/even/odd/equation)")。他的参数可以使用索引、前面介绍的even、odd、以及方程式（2n,3n或者2n-1）。

:nth-child的例子：

 1 <!doctype>
 2  <html>
 3     <head>
 4         <style>
 5             ul,li{
 6                 list-style:none;
 7                 width:200px;
 8             }
 9         </style>
10         <script src="jquery/jquery.js"></script>
11         <script>
12             $(document).ready(
13                 function(){
14                     $("#ul1 li:nth-child(1)").css("border","1px solid blue");
15                     $("#ul2 li:nth-child(even)").css("background","blue");
16                     $("#ul3 li:nth-child(odd)").css("background","blue");
17                     $("#ul4 li:nth-child(3n)").css("background","blue");
18                 }
19             )
20         </script>
21     </head>
22     <body>
23         <ul id="ul1">
24             <li>ul1-li1</li>
25             <li>ul1-li2</li>
26             <li>ul1-li3</li>
27             <li>ul1-li4</li>
28         </ul>
29         <ul id="ul2">
30             <li>ul2-li1</li>
31             <li>ul2-li2</li>
32             <li>ul2-li3</li>
33             <li>ul2-li4</li>
34         </ul>
35         <ul id="ul3">
36             <li>ul3-li1</li>
37             <li>ul3-li2</li>
38             <li>ul3-li3</li>
39             <li>ul3-li4</li>
40         </ul>
41         <ul id="ul4">
42             <li>ul4-li1</li>
43             <li>ul4-li2</li>
44             <li>ul4-li3</li>
45             <li>ul4-li4</li>
46             <li>ul4-li5</li>
47             <li>ul6-li6</li>
48         </ul>
49     </body>
50  </html>

显示结果：