本文實例講述了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">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 += "/r/n" + 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程序設計有所幫助。
新聞熱點
疑難解答
