过滤选择器根据某类过滤规则进行元素的匹配，书写时都以冒号(:)开头；
简单过滤选择器是选择器中使用最广泛的一种，其详细说明如下表所示。
| 选择器 | 功能 | 返回值 |
| first() 或 :first | 获取第一个元素 | 单个元素 |
| last() 或 :last | 获取最后一个元素 | 单个元素 |
| :not(selector) | 获取除给定选择器外的所有元素 | 元素集合 |
| :even | 获取所有索引值为偶数的元素，索引号从0开始 | 元素集合 |
| :odd | 获取所有索引值为奇数的元素，索引号从0开始 | 元素集合 |
| :eq(index) | 获取指定索引值的元素，索引号从0开始 | 单个元素 |
| :gt(index) | 获取所有大于给定索引值的元素，索引号从0开始 | 元素集合 |
| :lt(index) | 获取所有小于给定索引值的元素，索引号从0开始 | 元素集合 |
| :header | 获取所有标题类型的元素，如h1,h2...... | 元素集合 |
| :animated | 获取正在执行动画效果的元素 | 元素集合 |
Demo如下：
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 div{width:241px;height:93px;border:solid 1px #eee}
11 h1{font-size:13px}
12 ul{list-style-type:none;padding:0px}
13 .DefClass .NotClass{height:23px;width:60px;
14 line-height:23px;float:left;
15 border-top:solid 1px #eee;border-bottom:solid 1px #eee}
16 .GetFocus{width:58px;border:solid 1px #666;
17 background-color:#eee}
18
19 #spnMove{width:238px;height:23px;line-height:23px;}
20 </style>
21 <script type="text/javascript">
22 $(function(){ // 增加第一个元素的类别
23 // $("li:first").addClass("GetFocus");
24 })
25
26 $(function(){ // 增加最后一个元素的类别
27 // $("li:last").addClass("GetFocus");
28 })
29
30 $(function(){ // 增加去除所有与给定选择器匹配的元素类别
31 // $("li:not(.NotClass)").addClass("GetFocus");
32 })
33
34 $(function(){ // 增加所有索引值为偶数的元素类编，从0开始计数
35 // $("li:even").addClass("GetFocus");
36 })
37
38 $(function(){ // 增加所有索引值为奇数的元素类别，从0开始计数
39 // $("li:odd").addClass("GetFocus");
40 })
41
42 $(function(){ // 增加一个给定索引值得元素类别，从0开始计数
43 // $("li:eq(1)").addClass("GetFocus");
44 })
45
46 $(function(){ // 增加所有大于给定索引值得元素类别，从0开始计数
47 // $("li:gt(1)").addClass("GetFocus");
48 })
49
50 $(function(){ // 增加所有小于给定索引值的元素类别，从0开始计数。
51 // $("li:lt(4)").addClass("GetFocus");
52 })
53
54 $(function(){ // 增加标题类元素类别
55 // $("div h1").css("width","238");
56 // $(":header").addClass("GetFocus");
57 })
58
59 $(function(){
60 animateIt(); // 增加动画效果元素类别
61 $("#spnMove:animated").addClass("GetFocus");
62 })
63
64 function animateIt(){ // 动画效果
65 $("#spnMove").slideToggle("slow",animateIt);
66 }
67 </script>
68 </head>
69 <body>
70 <div>
71 <h1>基本过滤选择器</h1>
72 <ul>
73 <li class="DefClass">Item 0</li>
74 <li class="DefClass">Item 1</li>
75 <li class="NotClass">Item 2</li>
76 <li class="DefClass">Itme 3</lis>
77 </ul>
78 <span id="spnMove">Span Move</span>
79 </div>
80 </body>
81 </html>
Demo
时间： 2024-11-06 13:53:59