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>