<jQuery> <选择器> 五. 过滤选择器 

 1 <!DOCTYPE html>
 2 <html lang="cn">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <ul>
 9     <li>1</li>
10     <li>2</li>
11     <li>3</li>
12     <li>4</li>
13     <li>5</li>
14     <li>6</li>
15     <li>7</li>
16     <li>8</li>
17     <li>9</li>
18     <li>0</li>
19 </ul>
20 <div>
21     <div>1</div>
22     <div>2</div>
23     <div>3</div>
24     <div>4</div>
25     <div>5</div>
26     <div>6</div>
27     <div>7</div>
28     <div>8</div>
29     <div>9</div>
30     <div>0</div>
31 </div>
32 </body>
33 <script src="jquery-2.1.1.min.js"></script>
34 <script>
35     // 过滤选择器, 指定下标
36     $("li:eq(5)").css("backgroundColor", "yellow");
37 
38     // 过滤选择器, 小于指定下标
39     $("li:gt(5)").css("backgroundColor", "blue");
40 
41     // 过滤选择器, 大于指定下标
42     $("li:lt(5)").css("backgroundColor", "green");
43 
44     // 过滤选择器, 第一个下标
45     $("li:first").css("backgroundColor", "red");
46 
47     // 过滤选择器, 最后一个下标
48     $("li:last").css("backgroundColor", "orange");
49 
50     // 过滤选择器, 基数下标
51     $('div>div:even').css("backgroundColor", "red");
52 
53     // 过滤选择器, 偶数下标
54     $('div>div:odd').css("backgroundColor", "blue");
55 
56 </script>
57 </html>

 

posted @ 2017-12-15 17:03  云淡风轻我爱编程  阅读(214)  评论(0)    收藏  举报