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

最新推荐文章于 2021-02-24 03:24:38 发布

weixin_30520015

最新推荐文章于 2021-02-24 03:24:38 发布

阅读量282

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/duffy/p/4021913.html

版权

属性过滤选择器根据元素的某个属性获取元素，如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="../../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>