JQuery中屬性過濾選擇器用法實例分析

2024-05-06 16:20:31

字體：大中小

來源：轉載

供稿：網友

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

本文實例講述了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>