常用的过滤选择器有:
上例子:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .red{
8 background-color: #6e8cd5;
9 }
10 </style>
11 <script src="lib/jquery-1.12.2.js"></script>
12 <script>
13 $(function () {
14 // 索引值为奇数
15 $('button').eq(0).click(function () {
16 $('li:odd').toggleClass('red');
17 });
18 // 索引值为偶数
19 $('button').eq(1).click(function () {
20 $('li:even').toggleClass('red');
21 });
22 // 索引值等于2
23 $('button').eq(2).click(function () {
24 $('li:eq(2)').toggleClass('red');
25 });
26 // 选中所有li排除最后一个
27 $('button').eq(3).click(function () {
28 $('li:not(:last)').toggleClass('red');
29 });
30 });
31 </script>
32 </head>
33 <body>
34 <button>索引值为奇数</button>
35 <button>索引值为偶数</button>
36 <button>索引值等于2</button>
37 <button>选中所有li排除最后一个</button>
38 <ul>
39 <li>0001</li>
40 <li>0002</li>
41 <li>0003</li>
42 <li>0004</li>
43 <li>0005</li>
44 <li>0006</li>
45 <li>0007</li>
46 <li>0008</li>
47 <li>0009</li>
48 <li>0010</li>
49 <li>0011</li>
50 <li>0012</li>
51 <li>0013</li>
52 <li>0014</li>
53 <li>0015</li>
54 <li>0016</li>
55 <li>0017</li>
56 <li>0018</li>
57 <li>0019</li>
58 <li>0020</li>
59 </ul>
60 </body>
61 </html>