本文實例講述了JQuery中基礎過濾選擇器用法。分享給大家供大家參考。具體如下：
<!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程序設計有所幫助。
新聞熱點
疑難解答
