JQuery--过滤选择器

常用的过滤选择器有:

上例子:

 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>

 

posted @ 2017-11-02 21:14  QinXiao.Shou  阅读(190)  评论(0编辑  收藏  举报