jQuery内容过滤和可见性过滤

一.内容过滤

1.内容过滤选择器介绍

:empty 　　　　　　　　　　当前元素是否为空（是否有标签体）
:contains(text) 　　　　　　标签体是否含有指定的文本
:has(...) 　　　　当前元素是否含有指定的子元素
:parent 　　当前元素是否是父元素

2.代码实例

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5  <title>04-内容过滤选择器.html</title>
 6  <!--   引入jQuery --> 
 7  <script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
 8  <script src="./script/assist.js" type="text/javascript"></script>
 9  <link rel="stylesheet" type="text/css" href="./css/style.css" />  
10   <script type="text/javascript">
11       $(function(){
12 //          <input type="button" value="选取含有文本“di”的div元素." id="btn1"/>
13           $("#btn1").on("click",function(){
14               $("div:contains('di')").css("background-color","red");
15           });
16 //          <input type="button" value="选取不包含子元素(或者文本元素)的div空元素." id="btn2"/>
17           $("#btn2").on("click",function(){
18               $("div:empty").css("background-color","red");
19           });
20 //          <input type="button" value="选取含有class为mini元素 的div元素." id="btn3"/>
21           $("#btn3").on("click",function(){
22               $("div:has('.mini')").css("background-color","red");
23           });
24 //          <input type="button" value="选取含有子元素(或者文本元素)的div元素." id="btn4"/>
25           $("#btn4").on("click",function(){
26               $("div:parent").css("background-color","red");
27           });
28       });
29   </script>
30 </head>
31 <body>
32   <h3>内容过滤选择器.</h3>
33   <button id="reset">手动重置页面元素</button>
34   <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
35 
36   <input type="button" value="选取含有文本“di”的div元素." id="btn1"/>
37   <input type="button" value="选取不包含子元素(或者文本元素)的div空元素." id="btn2"/>
38   <input type="button" value="选取含有class为mini元素 的div元素." id="btn3"/>
39   <input type="button" value="选取含有子元素(或者文本元素)的div元素." id="btn4"/>
40 
41 
42 <br /><br />
43 
44    <!-- 测试的元素 -->
45   <div class="one" id="one" >
46  id为one,class为one的div
47       <div class="mini">class为mini</div>
48   </div>
49 
50     <div class="one"  id="two" title="test" >
51      id为two,class为one,title为test的div.
52       <div class="mini"  title="other">class为mini,title为other</div>
53       <div class="mini"  title="test">class为mini,title为test</div>
54   </div>
55 
56   <div class="one">
57       <div class="mini">class为mini</div>
58       <div class="mini">class为mini</div>
59       <div class="mini">class为mini</div>
60       <div class="mini"></div>
61   </div>
62 
63   
64 
65   <div class="one">
66       <div class="mini">class为mini</div>
67       <div class="mini">class为mini</div>
68       <div class="mini">class为mini</div>
69       <div class="mini"  title="tesst">class为mini,title为tesst</div>
70   </div>
71 
72 
73   <div style="display:none;"  class="none">style的display为"none"的div</div>
74   
75   <div class="hide">class为"hide"的div</div>
76  
77   <div>
78   包含input的type为"hidden"的div<input type="hidden" size="8"/>
79   </div>
80 
81   
82   <span id="mover">正在执行动画的span元素.</span>
83 
84 </body>
85 </html>

二、可见性过滤

1.可见性过滤器介绍

:hidden 隐藏的特指<xxx style="display:none;"/>,获得<input type="hidden"/>
:visible　　可见的

2.代码实例

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5  <title>05-可见性过滤选择器.html</title>
 6  <!--   引入jQuery --> 
 7  <script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
 8  <script src="./script/assist.js" type="text/javascript"></script>
 9  <link rel="stylesheet" type="text/css" href="./css/style.css" />   
10   <script type="text/javascript">
11       $(function(){
12 //          <input type="button" value=" 选取所有可见的div元素"  id="b1"/>
13           $("#b1").click(function () {
14               alert("123");
15               $("div:visible").css("background","red");
16           });
17 //              <input type="button" value=" 选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来"  id="b2"/>
18           $("#b2").click(function () {
19               $(":hidden").css("background","red");
20           });
21 //              <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值"  id="b3"/>
22           $("#b3").click(function () {
23               $("input:hidden").each(function(index){
24                   alert($(this).val());
25               });
26           });
27 //              <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值"  id="b4"/>
28           $("#b4").click(function () {
29               $.each($("input:hidden"),function(index,domEle){
30                   alert(index + "@" + $(domEle).val());
31               });
32           });
33       });
34   </script>
35 </head>
36 <body>
37   <h3>可见性过滤选择器.</h3>
38   <button id="reset">手动重置页面元素</button>
39   <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label>
40   <br/><br/>
41   <input type="button" value=" 选取所有可见的div元素"  id="b1"/>
42   <input type="button" value=" 选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来"  id="b2"/>
43   <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值"  id="b3"/>
44   <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值"  id="b4"/>
45   <br /><br />
46   
47   <!--文本隐藏域-->
48  <input type="hidden" value="hidden_1">
49  <input type="hidden" value="hidden_2">
50  <input type="hidden" value="hidden_3">
51  <input type="hidden" value="hidden_4">
52   
53   <div class="one" id="one" >
54  id为one,class为one的div
55       <div class="mini">class为mini</div>
56   </div>
57 
58     <div class="one"  id="two" title="test" >
59      id为two,class为one,title为test的div.
60       <div class="mini"  title="other">class为mini,title为other</div>
61       <div class="mini"  title="test">class为mini,title为test</div>
62   </div>
63 
64   <div class="one">
65       <div class="mini">class为mini</div>
66       <div class="mini">class为mini</div>
67       <div class="mini">class为mini</div>
68       <div class="mini"  title="tesst">class为mini,title为tesst</div>
69   </div>
70 
71 
72   <div style="display:none;"  class="none">style的display为"none"的div</div>
73   
74   <div class="hide">class为"hide"的div</div>
75   
76   <span id="mover">正在执行动画的span元素.</span>
77 </body>
78 </html>