JQuery中屬性過(guò)濾選擇器用法實(shí)例分析

更新時(shí)間：2015年05月18日 11:48:38 作者：永遠(yuǎn)愛好寫程序

這篇文章主要介紹了JQuery中屬性過(guò)濾選擇器用法,實(shí)例分析了jQuery屬性過(guò)濾選擇器的相關(guān)使用技巧,需要的朋友可以參考下

本文實(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] 匹配給定的屬性是以某些值開始的元素
 //...<1>查找myTag屬性以tt2開頭的所有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>我是沒有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ì)有所幫助。

您可能感興趣的文章: