cari

Rumah >hujung hadapan web >tutorial js >Contoh analisis penggunaan pemilih penapis atribut dalam JQuery_jquery

Contoh analisis penggunaan pemilih penapis atribut dalam JQuery_jquery

WBOY
WBOYasal
2016-05-16 15:58:411401semak imbas

Contoh dalam artikel ini menerangkan penggunaan pemilih penapis atribut dalam JQuery. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut: 

<!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>

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：JQuery melaksanakan contoh pemilihan kebenaran dengan menyusun function_jqueryArtikel seterusnya：JQuery melaksanakan contoh pemilihan kebenaran dengan menyusun function_jquery

Artikel berkaitan

Lihat lagi