jQuery选择器之内容过滤选择器Demo

04-内容过滤选择器.html

jQuery选择器之内容过滤选择器Demo
 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.4.2.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       $(document).ready(function(){
12           //<input type="button" value="选取含有文本“di”的div元素." id="btn1"/>
13           //选取所有的div 元素文本里面包含div 内容的
14           $("#btn1").click(function(){
15                   $("div:contains('di')").css("background","red");
16           });
17           
18           //<input type="button" value="选取不包含子元素(或者文本元素)的div空元素." id="btn2"/> empty
19           //选择所有的div 元素里面没有子元素(文本)
20           $("#btn2").click(function(){
21                 $("div:empty").css("background","red");
22                 
23           });
24           
25           //<input type="button" value="选取所有的div 元素 含有class为mini ." id="btn3"/>
26           //选择div 元素..
27           //选择div 元素里面包含class=mini
28           $("#btn3").click(function(){
29                $("div:has('.mini')").css("background","red");
30           });
31           
32           //<input type="button" value="选取含有子元素(或者文本元素)的div元素." id="btn4"/>
33           $("#btn4").click(function(){
34               
35                 $("div:parent").css("background","red");
36           });
37           
38          
39     });
40   </script>
41 </head>
42 <body>
43   <h3>内容过滤选择器.</h3>
44   <button id="reset">手动重置页面元素</button>
45   <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
46   <input type="button" value="选取含有文本“di”的div元素." id="btn1"/>
47   <input type="button" value="选取不包含子元素(或者文本元素)的div空元素." id="btn2"/>
48   <input type="button" value="选取含有class为mini元素 的div元素." id="btn3"/>
49   <input type="button" value="选取含有子元素(或者文本元素)的div元素." id="btn4"/>
50 
51 
52 <br /><br />
53 
54    <!-- 测试的元素 -->
55   <div class="one" id="one" >
56  id为one,class为one的div
57       <div class="mini">class为mini</div>
58   </div>
59 
60     <div class="one"  id="two" title="test" >
61      id为two,class为one,title为test的div.
62       <div class="mini"  title="other">class为mini,title为other</div>
63       <div class="mini"  title="test">class为mini,title为test</div>
64   </div>
65 
66   <div class="one">
67       <div class="mini">class为mini</div>
68       <div class="mini">class为mini</div>
69       <div class="mini">class为mini</div>
70       <div class="mini"></div>
71   </div>
72 
73   
74 
75   <div class="one">
76       <div class="mini">class为mini</div>
77       <div class="mini">class为mini</div>
78       <div class="mini">class为mini</div>
79       <div class="mini"  title="tesst">class为mini,title为tesst</div>
80   </div>
81 
82 
83   <div style="display:none;"  class="none">style的display为"none"的div</div>
84   
85   <div class="hide">class为"hide"的div</div>
86  
87   <div>
88   包含input的type为"hidden"的div<input type="hidden" size="8"/>
89   </div>
90 
91   
92   <span id="mover">正在执行动画的span元素.</span>
93 
94 <!-- Resources from http://down.liehuo.net -->
95 </body>
96 </html>
jQuery选择器之内容过滤选择器Demo

 


本文转自SummerChill博客园博客,原文链接:http://www.cnblogs.com/DreamDrive/p/5780051.html,如需转载请自行联系原作者

上一篇:golang 系列:RWMutex 读写锁分析


下一篇:《Android深度探索(卷1):HAL与驱动开发》——1.1节Android系统架构