在页面开发过程中，常常遇到突出指定某行的需求。虽然使用基本过滤选择器:eq(index)可以实现单个表格的显示，但不能满足大量数据和多个表格的选择需求。为了实现这样的功能，jQuery中可以通过子元素过滤选择器轻松获取所有父元素中指定的某个元素。
子元素过滤选择器语法
| 选择器 | 功能 | 返回值 |
| :nth-child(eq|even|odd|index) | 获取每个父元素下的特定位置元素，索引号从1开始 | 元素集合 |
| :first-child | 获取每个父元素下的第一个子元素 | 元素集合 |
| :last-child | 获取每个父元素下的最后一个子元素 | 元素集合 |
| :only-child | 获取每个父元素下的仅有一个子元素 | 元素集合 |
示例——使用jQuery子元素过滤选择器选择元素
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XMTML 1.0
2 Transitional//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4 <html xmlns="http://www.w3.org/1999/xhtml">
5 <head>
6 <title>使用jQuery层次选择器</title>
7 <script type="text/javascript" src="../../software/jquerys/jquery-1.7.2.js"></script>
8 <style type="text/css">
9 body{font-size:12px;text-align:center}
10 ul{width:241px;list-style-type:none;padding:0px}
11 ul li{height:23px;width:60px;line-height:23px;
12 float:left;border-top:solid 1px #eee;
13 border-bottom:solid 1px #eee;margin-bottom:5px}
14 .GetFocus{width:58px;border:solid 1px #666;
15 background-color:#eee}
16 </style>
17 <script type="text/javascript">
18
19 $(function(){ // 增加每个父元素下的第2个子元素类别
20 //$("li:nth-child(2)").addClass("GetFocus");
21 })
22
23 $(function(){ // 增加每个父元素下的第一个子元素类别
24 //$("li:first-child").addClass("GetFocus");
25 })
26
27 $(function(){ // 增加每个父元素下的最后一个子元素类别
28 //$("li:last-child").addClass("GetFocus");
29 })
30
31 $(function(){ // 增加每个父元素下只有一个子元素类别
32 //$("li:only-child").addClass("GetFocus");
33 })
34 </script>
35 </head>
36 <body>
37 <ul>
38 <li>Item 1-0</li>
39 <li>Item 1-1</li>
40 <li>Item 1-2</li>
41 <li>Item 1-3</li>
42 </ul>
43 <ul>
44 <li>Item 2-0</li>
45 <li>Item 2-1</li>
46 <li>Item 2-2</li>
47 <li>Item 2-3</li>
48 </ul>
49 <ul>
50 <li>Item 3-0</li>
51 </ul>
52 </body>
53 </html>
Demo
时间： 2024-10-29 10:46:37