suchen

Heim  >  Artikel  >  Web-Frontend  >  Beispielanalyse der Verwendung von Attributfilterselektoren in JQuery_jquery

Beispielanalyse der Verwendung von Attributfilterselektoren in JQuery_jquery

WBOY
WBOYOriginal
2016-05-16 15:58:411362Durchsuche

Das Beispiel in diesem Artikel beschreibt die Verwendung des Attributfilterselektors in JQuery. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt: 

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

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JQuery implementiert ein Beispiel für die Berechtigungsauswahl mit der Sortierfunktion_jqueryNächster Artikel：JQuery implementiert ein Beispiel für die Berechtigungsauswahl mit der Sortierfunktion_jquery

In Verbindung stehende Artikel

Mehr sehen