本文實(shí)例講述了JQuery中屬性過(guò)濾選擇器用法。分享給大家供大家參考。具體如下：
<!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>屬性過(guò)濾選擇器</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]") ; 說(shuō)明: 匹配包含給定屬性的元素. 例子中是選取了所有帶”id”屬性的div標(biāo)簽. showElements($("div[id]")); //==========舉例2================ //$("div[myTag]='tt2') 匹配給定的屬性是某個(gè)特定值的元素 //匹配div中myTag屬性為tt2的div alert($("div[myTag='tt2']").attr("myTag")); //注意中括號(hào)的結(jié)束位置 //==========舉例3================ //[attribute!=value] //用法: $(”input[name!='newsletter']“).attr(”checked”, true); 返回值 集合元素 //說(shuō)明: 匹配所有不含有指定的屬性，或者屬性不等于特定值的元素. //此選擇器等價(jià)于:not([attr=value]),要匹配含有特定屬性但不等于特定值的元素, //請(qǐng)使用[attr]:not([attr=value]).之前看到的 :not 派上了用場(chǎng). //...<1> 查找div中myTag屬性不為tt1的所有div 會(huì)找到兩個(gè) //showElements($("div[myTag!='tt1']")); //...<2> 查找div中包含myTag屬性，并且myTag屬性不等于tt1的div showElements($("div[myTag]:not([myTag='tt1'])")); //注意中括號(hào)和括號(hào)的方式 //==========舉例4================ //[attribute^=value] 匹配給定的屬性是以某些值開(kāi)始的元素 //...<1>查找myTag屬性以tt2開(kāi)頭的所有div showElements($("div[myTag^='tt2']")); //==========舉例5================ //[attribute$=value] 匹配給定的屬性是以某些值結(jié)尾的元素. //...<1>查找myTag屬性以3結(jié)尾的所有div showElements($("div[myTag$='3']")); //==========舉例6================ //[attribute*=value] 匹配給定的屬性是以包含某些值的元素. //...<1>查找myTag屬性包含tt的所有div showElements($("div[myTag*='tt']")); //==========舉例7================ //用法: $(”input[id][name$=‘man']“) 返回值 集合元素 //復(fù)合屬性選擇器,需要同時(shí)滿足多個(gè)條件時(shí)使用.又是一個(gè)組合,這種情況我們實(shí)際使用的時(shí)候很常用. //這個(gè)例子中選擇的是所有含有 id 屬性,并且它的 name 屬性是以 man 結(jié)尾的元素. //...<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>我是沒(méi)有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>希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
