close


jQuery Selector 之屬性類

[attribute]
[attribute=value]
[attribute!=value]
[attribute^=value]
[attribute$=value]
[attribute*=value]
[attrSel1][attrSel2][attrSelN]



1、
[attribute]
匹配包含給定屬性的元素。
注意，在jQuery 1.3中，前導的@符號已經被廢除！
如果想要兼容最新版本，只需要簡單去掉@符號即可。


程式範例：

<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之屬性類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>

<script>
$(document).ready(function(){
//[attribute] 匹配包含給定屬性的元素。
//查找所有含有 id 属性的 div 元素
var str=' ';//此變數顯示訊息用的
$("div[id]").text(
function(n,value) {
str+= ' value: ' + value;
});
alert(str);
});
</script>
</head>
<body>
<div>
 <p>Hello!</p>
</div>
<div id="test2">123</div>
</body>
</html>


顯示結果：




2、
[attribute=value]
匹配給定的屬性是某個特定值的元素



程式範例：

<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之屬性類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>

<script>
$(document).ready(function(){
//[attribute=value] 匹配給定的屬性是某個特定值的元素
//查找所有 name 属性是 audi 的 input 元素
//將所有 name 属性是 audi 的 input checked元素設為true
$("input[name='audi']").attr("checked", true);
//將所有 name 属性是 audi 的 input 提示出來
var str=' ';//此變數顯示訊息用的
$("input[name='audi']").val(function() {
str+=  ' name: ' + this.name + ' -- ' +
  ' value: ' + this.value;
});
alert(str);
});
</script>
</head>
<body>
我喜歡的車子：
<input type="checkbox" name="audi" value="A1" />奧迪  A1
<input type="checkbox" name="audi" value="R8" />奧迪   R8
<input type="checkbox" name="lexus" value="GT200h" />LEXUS GT 200h
</body>
</html>


顯示結果：




3、
[attribute!=value]
匹配所有不含有指定的屬性，或者屬性不等於特定值的元素。

此選擇器等價於:not([attr=value])<br>要匹配含有特定屬性但不等於特定值的元素，
請使用[attr]:not([attr=value])


程式範例：
<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之屬性類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>

<script>
$(document).ready(function(){
//[attribute!=value] 匹配所有不含有指定的屬性，或者屬性不等於特定值的元素。
//查找所有 name 属性不是 audi 的 input 元素
//將所有 name 属性不是 audi 的 input checked元素設為true
$("input[name!='audi']").attr("checked", true);
//將所有 name 属性不是 audi 的 input 提示出來
var str=' ';//此變數顯示訊息用的
$("input[name!='audi']").val(function() {
str+=  ' name: ' + this.name + ' -- ' +
  ' value: ' + this.value;
});
alert(str);
});
</script>
</head>
<body>
我喜歡的車子：
<input type="checkbox" name="audi" value="A1" />奧迪  A1
<input type="checkbox" name="audi" value="R8" />奧迪   R8
<input type="checkbox" name="lexus" value="GT200h" />LEXUS GT 200h
</body>
</html>



顯示結果：






4、
[attribute^=value]
匹配給定的屬性是以某些值開始的元素



程式範例：
<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之屬性類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>

<script>
$(document).ready(function(){
//[attribute^=value] 匹配給定的屬性是以某些值開始的元素
//查找所有 name 属性是 audi開頭 的 input 元素
//將所有 name 属性是 audi開頭 的 input checked元素設為true
$("input[name^='audi']").attr("checked", true);
//將所有 name 属性是 audi開頭 的 input 提示出來
var str=' ';//此變數顯示訊息用的
$("input[name^='audi']").val(function() {
str+=  ' name: ' + this.name + ' -- ' +
  ' value: ' + this.value;
});
alert(str);
});
</script>
</head>
<body>
我喜歡的車子：
<input type="checkbox" name="audiA1" value="A1" />奧迪  A1
<input type="checkbox" name="audiR8" value="R8" />奧迪   R8
<input type="checkbox" name="lexusGT" value="GT200h" />LEXUS GT 200h
<input type="checkbox" name="lexusES" value="ES300h" />LEXUS ES 300h
</body>
</html>



顯示結果：





5、
[attribute$=value]
匹配給定的屬性是以某些值結尾的元素



程式範例：

<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之屬性類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>

<script>
$(document).ready(function(){
//[attribute$=value] 匹配給定的屬性是以某些值結尾的元素
//查找所有 name 属性是 audi結尾的 input 元素
//將所有 name 属性是 audi結尾 的 input checked元素設為true
$("input[name$='audi']").attr("checked", true);
//將所有 name 属性不是 audi 的 input 提示出來
var str=' ';//此變數顯示訊息用的
$("input[name$='audi']").val(function() {
str+=  ' name: ' + this.name + ' -- ' +
  ' value: ' + this.value;
});
alert(str);
});
</script>
</head>
<body>
我喜歡的車子：
<input type="checkbox" name="A1_audi" value="A1" />奧迪  A1
<input type="checkbox" name="R8_audi" value="R8" />奧迪   R8
<input type="checkbox" name="GT_lexus" value="GT200h" />LEXUS GT 200h
<input type="checkbox" name="ES_lexus" value="ES300h" />LEXUS ES 300h
</body>
</html>


顯示結果：





6、
[attribute*=value]
匹配給定的屬性是以包含某些值的元素



程式範例：
<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之屬性類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>

<script>
$(document).ready(function(){
//[attribute*=value] 匹配給定的屬性是以包含某些值的元素
//查找所有 name 属性包含 u 的 input 元素
//將所有 name 属性包含 u 的 input checked元素設為true
$("input[name*='u']").attr("checked", true);
//將所有 name 属性包含 u 的 input
var str=' ';//此變數顯示訊息用的
$("input[name*='u']").val(function() {
str+=  ' name: ' + this.name + ' -- ' +
  ' value: ' + this.value;
});
alert(str);
});
</script>
</head>
<body>
我喜歡的車子：
<input type="checkbox" name="A1_audi" value="A1" />奧迪  A1
<input type="checkbox" name="R8_audi" value="R8" />奧迪   R8
<input type="checkbox" name="GT_lexus" value="GT200h" />LEXUS GT 200h
<input type="checkbox" name="ES_lexus" value="ES300h" />LEXUS ES 300h
</body>
</html>



顯示結果：






7、
[attrSel1][attrSel2][attrSelN]
複合屬性選擇器，需要同時滿足多個條件時使用。



程式範例：

<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之屬性類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>

<script>
$(document).ready(function(){
//[attrSel1][attrSel2][attrSelN] 複合屬性選擇器，需要同時滿足多個條件時使用。
//查找所有 含有 id 属性 , 並且它的 name 属性是以  i 结尾 的 input 元素
//將 含有 id 属性 , 並且它的 name 属性是以  i 结尾 的 input 元素 checked元素設為true
$("input[id][name$='i']").attr("checked", true);
//將 含有 id 属性 , 並且它的 name 属性是以  i 结尾 的 input 提示出來
var str=' ';//此變數顯示訊息用的
$("input[id][name$='i']").val(function() {
str+=  ' name: ' + this.name + ' -- ' +
  ' value: ' + this.value;
});
alert(str);
});
</script>
</head>
<body>
我喜歡的車子：
<input type="checkbox" id="audi_r8" name="A1_audi" value="A1" />奧迪  A1
<input type="checkbox" name="R8_audi" value="R8" />奧迪   R8
<input type="checkbox" id="lexus_gt" name="GT_lexus" value="GT200h" />LEXUS GT 200h
<input type="checkbox" name="ES_lexus" value="ES300h" />LEXUS ES 300h
</body>
</html>


顯示結果：










arrow
arrow
    文章標籤
    name value script jquery audi 属性 奧迪 匹配 checked 元素 lexus 屬性 checkbox attribute Selector
    全站熱搜

    PG Levin Li 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄