过滤选择器——内容过滤选择器

最新推荐文章于 2024-11-05 15:26:40 发布

weixin_30950607

最新推荐文章于 2024-11-05 15:26:40 发布

阅读量118

点赞数

文章标签： xhtml javascript ViewUI

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

版权

内容过滤选择器根据元素中的文字内容或所包含的子元素特征获取元素，其文字类容可以模糊或绝对匹配进行元素定位，其详细说明如表：

选择器	功能	返回值
:contains(text)	获取包含给定文本的元素	元素集合
:empty	获取所有不包含子元素或者文本的空元素	元素集合
:has(selector)	获取含有选择器所匹配的元素的元素	元素集合
:parent	获取含有子元素或者文本的元素	元素集合

示例——使用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     span{float:left;border:solid 1px #ccc;margin:8px;
13         width:45px;height:45px;background-color:#eee}
14 </style>
15 <script type="text/javascript">
16 
17     $(function(){    // 显示包含给定文本的元素
18         //$("div:contains('A')").css("display","block");
19         //$("div:contains('D')").css("display","none");
20     })
21 
22     $(function(){    // 显示所有不包含子元素或者文本的空元素
23         // 显示所有不包含子元素或者文本的空元素
24         //$("div:empty").css("display","block");
25         //$("div:empty").css("display","none");
26     });  
27 
28     $(function(){    // 显示含有选择器所匹配的元素
29         //$("div:has(span)").css("display","block");
30         //$("div:has(span)").css("display","none");
31     })  
32     
33     $(function(){    // 显示含有子元素或者文本的元素
34         //$("div:parent").css("display","block");
35         //$("div:parent").css("display","none");
36     })  
37 </script>
38 </head>
39 <body>
40     <div>ABCD</div>
41     <div><span></span></div>
42     <div>EFaH</div>
43     <div></div>
44 </body>
45 </html>