jQuery - 选择器（二）

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

jQuery - 选择器（一）中只说了一种基本的选择器，在这基本选择器上进行过滤以达到更高选择条件的选择器就是基本过滤选择器（Basic Filter）。

这种选择器中包括：

:first 选择器获取匹配元素中的第一个，:eq(0)、:lt(1)和其等效。

:last 选择器获取匹配元素中的最后一个。

:header 选择器获取所有h1、h2、h3...标题元素。

:not（）选择器匹配所有并且去除了给定选择器所匹配的元素的元素（从获取的对象中排除给定的选择器所匹配的元素）。

:even 选择器匹配所有索引值为奇数的元素（从获取的对象集合中匹配索引值为偶数的对象（0,2,4...）），匹配索引从0开始。

:odd 选择器匹配所有索引值为奇数的元素（从获取的对象集合中匹配索引值为奇数的对象（1,3,5...）），匹配索引从0开始。

:eq（）选择器匹配一个给定索引值的元素（从获取的对象集合中匹配给定的索引值的对象）。

:gt（）选择器匹配所有大于给定索引值的元素。

:lt（）选择器匹配所有小于给定索引值的元素。

:animated 选择器匹配所有正在执行动画效果的元素。

下面是一个使用各个选择器的例子（不包含:animated选择器）：

 1 <!doctype>
 2  <html>
 3     <head>
 4         <style>
 5             h1,h2,h3{
 6                 width:500px;
 7             }
 8             ul,li{
 9                 list-style:none;
10                 width:200px;
11             }
12         </style>
13         <script src="jquery/jquery.js"></script>
14         <script>
15             $(document).ready(
16                 function(){
17                     $("li:first").css("border","1px solid red");
18                     $("li:last").css("border","1px solid blue");
19                     $(":header").css("background","blue");
20                     $("input:not(:checked)").attr("disabled","disabled");
21 
22                     $("td:eq(4)").css("border","2px solid red");
23                     $("td:gt(6)").css("border","2px solid green");
24                     $("td:lt(2)").css("border","2px solid blue");
25                     $("td:even").css("background","yellow");
26                     $("td:odd").css("background","brown");
27                 }
28             )
29         </script>
30     </head>
31     <body>
32         <h1>:first :last</h1>
33         <ul>
34             <li>li1</li>
35             <li>li2</li>
36             <li>li3</li>
37             <li>li4</li>
38         </ul>
39         <h2>:eq(n) :gt(n) :lt(n) :even :odd</h2>
40         <table border="1">
41             <tr>
42                 <td>00</td>
43                 <td>01</td>
44                 <td>02</td>
45             </tr>
46             <tr>
47                 <td>11</td>
48                 <td>12</td>
49                 <td>13</td>
50             </tr>
51             <tr>
52                 <td>12</td>
53                 <td>22</td>
54                 <td>23</td>
55             </tr>
56         </table>
57         <h3>:not</h3>
58         <input type="checkbox" checked> one
59         <input type="checkbox"> two
60         <input type="checkbox"> three
61     </body>
62  </html>

显示结果：

官网上关于:animated选择器的例子：

 1 <!DOCTYPE html>
 2  <html>
 3  <head>
 4   <style>
 5   div { background:yellow; border:1px solid #AAA; width:80px;  margin:0 5px; float:left; }
 6   div.colored { background:green; }
 7   </style>
 8   <script src="http://code.jquery.com/jquery-latest.min.js"></script>
 9 </head>
10 <body>
11   <button id="run">Run</button>
12 
13   <div></div>
14   <div id="mover"></div>
15   <div></div>
16 <script>
17 
18     $("#run").click(function(){
19       $("div:animated").toggleClass("colored");
20     });
21     function animateIt() {
22       $("#mover").slideToggle("slow", animateIt);
23     }
24     animateIt();
25 </script>
26 
27 </body>
28 </html>