首页 > 代码库 > 过滤选择器——属性过滤选择器

过滤选择器——属性过滤选择器

2024-07-26 22:32:28   231人阅读

属性过滤选择器根据元素的某个属性获取元素，如ID号或匹配属性值的内容，并以"["号开始、以"]"号结束。其详细的说明如表：

选择器功能返回值
 [attribute] 获取包含给定属性的元素元素集合 
 [attribute=value] 获取等于给定的属性是某个特定值得元素 元素集合 
 [attribute!=value] 获取不等于给定的属性是某个特定值的元素元素集合 
 [attribute^=value] 获取给定的属性是以某些值开始的元素 元素集合 
 [attribute$=value] 获取给定的属性是以某些值结尾的元素 元素集合 
 [attribute*=value]  获取给定的属性是以包含某些值的元素 元素集合 
 [selector1][selector2][selector3]  获取满足多个条件的复合属性的元素 元素集合 

示例——使用jQuery属性过滤选择器选择元素

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XMTML 1.0 2 Transitional//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 <html xmlns="http://www.w3.org/1999/xhtml"> 5 <head> 6 <title>使用jQuery层次选择器</title> 7 <script type="text/javascript" src="http://www.mamicode.com/software/jquerys/jquery-1.7.2.js"></script> 8 <style type="text/css"> 9     body{font-size:12px;text-align:center}10     div{float:left;border:solid 1px #ccc;margin:8px;11         width:65px;height:65px;display:none}12 </style>13 <script type="text/javascript">14 15     $(function(){    // 显示所有含有id属性的元素16         //$("div[id]").show(3000);17     }) 18 19     $(function(){    // 显示所欲属性title的值是“A”的元素20         //$("div[title=‘A‘]").show(3000);21     }) 22         23     $(function(){    // 显示所有属性tilte的值不是"A"的元素24         //$("div[title!=‘A‘]").show(3000);25     })26 27     $(function(){    // 显示所有属性title的值以“A”开始的元素28         //$("div[title^=‘A‘]").show(3000);29     })30         31     $(function(){    // 显示所有的属性title的值以"C"结束的元素32         //$("div[title$=‘C‘]").show(3000);33     }) 34 35     $(function(){    // 显示所有属性tilte的值中含有"B"的元素36         //$("div[title*=‘B‘]").show(3000);37     }) 38     39     $(function(){    // 显示所有属性title的值中含有"B" 且属性Id的值是"divAB"的元素40         //$("div[id=‘divAB‘][title*=‘B‘]").show(3000);41     })42 </script>43 </head>44 <body>45     <div id="divID">ID</div>46     <div title="A">Title A</div>47     <div id="divAB" title="AB">ID<br/>Tilte AB</div>48     <div title="ABC">Title ABC</div>49 </body>50 </html>
Demo

 

过滤选择器——属性过滤选择器


联系
我们