本文實例講述了JQuery中基礎過濾選擇器用法。分享給大家供大家參考。具體如下：
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>基礎過濾選擇器</title> <style type="text/css"> #main{ width:600px; border:1px solid green; margin:auto; padding:10px; } #tbl{ border-collapse:collapse; border-top:1px solid red; border-left:1px solid red; margin:auto; } #tbl td{ width:60px; height:60px; border-collapse:collapse; border-bottom:1px solid red; border-right:1px solid red; } </style> <script src="jquery-1.6.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { //=============舉例1======================== //:first 說明: 匹配找到的第一個元素 //....<1>修改第一個單元格的背景色 //var $tds = $("#tbl td:first"); //$tds.css("backgroundColor", "blue"); //....<2>修改第一行的背景色 //var $trs = $("#tbl tr:first"); //$trs.css("backgroundColor", "blue"); //=============舉例2======================== //:last 說明: 匹配找到的最後一個元素.與 :first 相對應. //...<1>修改隨後一個單元格的背景色 //var $tds = $("#tbl td:last"); //$tds.css("backgroundColor", "blue"); //=============舉例3======================== //:not(selector) 去除所有與給定選擇器匹配的元素.有點類似於”非” //...<1>把所有class不為tdClass的列的文本進行修改 //var $tds = $("#tbl td:not(.tdClass)"); //$tds.text("Not tdClass"); //=============舉例4======================== //:even 說明: 匹配所有索引值為偶數的元素，從 0 開始計數.js的數組都是從0開始計數的. //例如要選擇table中的行,因為是從0開始計數,所以table中的第一個tr就為偶數0. //...<1>把索引值為偶數的行變成黃色 //var $trs = $("#tbl tr:even"); //$trs.css("backgroundColor", "yellow"); //=============舉例5======================== //: odd 說明: 匹配所有索引值為奇數的元素,和:even對應,從 0 開始計數. //var $trs = $("#tbl tr:odd"); //$trs.css("backgroundColor", "yellow"); //=============舉例6======================== //:eq(index) 說明: 匹配一個給定索引值的元素.eq(0)就是獲取第一個tr元素.括號裡面的是索引值,不是元素排列數. //...<1>設置第二個單元格的背景色 //var $tds = $("#tbl td:eq(1)"); //$tds.css("backgroundColor", "gray"); //=============舉例6======================== //:gt(index) 說明: 匹配所有大於給定索引值的元素. //...<1>把下標索引大於1的所有單元格背景色設置為灰色 //var $tds = $("#tbl td:gt(1)"); //$tds.css("backgroundColor", "gray"); //=============舉例7======================== //:lt(index) 說明: 匹配所有小於給定索引值的元素. //...<1>把下標索引小於3的所有單元格背景色設置為灰色 var $tds = $("#tbl td:lt(3)"); $tds.css("backgroundColor", "gray"); //=============舉例8======================== //:header(固定寫法) 說明: 匹配如 h1, h2, h3之類的標題元素.這個是專門用來獲取h1,h2這樣的標題元素. //...<1>把所有的h標簽背景色進行修改 var $hs = $(":header"); $hs.css("backgroundColor", "gold"); //=============舉例8======================== //slice 獲取下標范圍內元素 var $trs = $("#tbl tr").slice(1, 3); $trs.css("backgroundColor", "gold"); }); </script> </head> <body> <div id="main"> <h1>我是h1</h1> <h2>我是h2</h2> <h3>我是h3</h3> <table id="tbl"> <tr> <td>1</td><td>1</td><td>1</td> </tr> <tr> <td class="tdClass">2</td><td>2</td><td>2</td> </tr> <tr> <td>3</td><td>3</td><td>3</td> </tr> <tr> <td>4</td><td>4</td><td class="tdClass">4</td> </tr> <tr> <td>5</td><td>5</td><td>5</td> </tr> <tr> <td>6</td><td>6</td><td class="tdClass">6</td> </tr> </table> </div> </body> </html>希望本文所述對大家的jQuery程序設計有所幫助。