本文實例講述了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 <!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"> div{width:200px;border:1px solid red;margin:10px auto;} </style> <script src="jquery-1.6.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { //==========舉例1================ //: $("div[id]") ; 說明: 匹配包含給定屬性的元素. 例子中是選取了所有帶”id”屬性的div標簽. showElements($("div[id]")); //==========舉例2================ //$("div[myTag]='tt2') 匹配給定的屬性是某個特定值的元素 //匹配div中myTag屬性為tt2的div alert($("div[myTag='tt2']").attr("myTag")); //注意中括號的結束位置 //==========舉例3================ //[attribute!=value] //用法: $(”input[name!='newsletter']“).attr(”checked”, true); 返回值 集合元素 //說明: 匹配所有不含有指定的屬性，或者屬性不等於特定值的元素. //此選擇器等價於:not([attr=value]),要匹配含有特定屬性但不等於特定值的元素, //請使用[attr]:not([attr=value]).之前看到的 :not 派上了用場. //...<1> 查找div中myTag屬性不為tt1的所有div 會找到兩個 //showElements($("div[myTag!='tt1']")); //...<2> 查找div中包含myTag屬性，並且myTag屬性不等於tt1的div showElements($("div[myTag]:not([myTag='tt1'])")); //注意中括號和括號的方式 //==========舉例4================ //[attribute^=value] 匹配給定的屬性是以某些值開始的元素 //...<1>查找myTag屬性以tt2開頭的所有div showElements($("div[myTag^='tt2']")); //==========舉例5================ //[attribute$=value] 匹配給定的屬性是以某些值結尾的元素. //...<1>查找myTag屬性以3結尾的所有div showElements($("div[myTag$='3']")); //==========舉例6================ //[attribute*=value] 匹配給定的屬性是以包含某些值的元素. //...<1>查找myTag屬性包含tt的所有div showElements($("div[myTag*='tt']")); //==========舉例7================ //用法: $(”input[id][name$=‘man']“) 返回值 集合元素 //復合屬性選擇器,需要同時滿足多個條件時使用.又是一個組合,這種情況我們實際使用的時候很常用. //這個例子中選擇的是所有含有 id 屬性,並且它的 name 屬性是以 man 結尾的元素. //...<1>查找包含id屬性，並且myTag屬性不為tt2的所有div showElements($("div[id][myTag!='tt2']")); }); function showElements(elements) { var output = ""; for (var i = 0; i < elements.length; i++) { if (output == "") { output = elements.eq(i).html(); } else { output += "rn" + elements.eq(i).html(); } } alert(output); } </script> </head> <body> <div>我是沒有id的DIV</div> <div id="div1" myTag="tt1">我是id為div1的DIV myTag為tt1</div> <div id="div2" myTag="tt2">我是id為div2的DIV myTag為tt2</div> <div id="div3" myTag="tt23">我是id為div2的DIV myTag為tt23</div> <div id="div4" myTag="tt33">我是id為div2的DIV myTag為tt33</div> </body> </html>希望本文所述對大家的jQuery程序設計有所幫助。