jQuery选择器之可见性过滤选择器Demo

最新推荐文章于 2024-08-18 10:54:05 发布

weixin_33721344

最新推荐文章于 2024-08-18 10:54:05 发布

阅读量81

点赞数

文章标签： xhtml javascript ViewUI

测试代码

05-可见性过滤选择器.html

 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.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=" 选取所有可见的div元素"  id="b1"/>
13           $("#b1").click(function(){
14               $("div:visible").css("background","red");
15           });
16           
17           //<input type="button" value=" 选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来"  id="b2"/>
18           $("#b2").click(function(){
19                   $("div:hidden").show(1000);
20           });
21           
22           //<input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值"  id="b3"/>
23          
24           $("#b3").click(function(){
25               var $input=$("input:hidden");
26             
27         
28             
29             //显示迭代..
30 //            for(var i=0;i<$input.length;i++){
31 //                $inputp[i]
32 //                
33 //            }
34             //隐式迭代
35             $input.each(function(index,doc){
36                 //alert(index)
37                 //alert(doc.value);
38                 
39 //                doc.val();
40                 //               转换成jQuery 对象在调用    
41                 alert($(doc).val());
42                 
43                 
44             })
45             
46             
47 
48           });
49          
50     
51             
52           
53     });
54   </script>
55 </head>
56 <body>
57   <h3>可见性过滤选择器.</h3>
58   <button id="reset">手动重置页面元素</button>
59   <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label>
60   <br/><br/>
61   <input type="button" value=" 选取所有可见的div元素"  id="b1"/>
62   <input type="button" value=" 选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来"  id="b2"/>
63   <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值"  id="b3"/>
64   <br /><br />
65   
66 
67   
68   <div class="one" id="one" >
69  id为one,class为one的div
70       <div class="mini">class为mini</div>
71   </div>
72 
73     <div class="one"  id="two" title="test" >
74      id为two,class为one,title为test的div.
75       <div class="mini"  title="other">class为mini,title为other</div>
76       <div class="mini"  title="test">class为mini,title为test</div>
77   </div>
78 
79   <div class="one">
80       <div class="mini">class为mini</div>
81       <div class="mini">class为mini</div>
82       <div class="mini">class为mini</div>
83       <div class="mini"  title="tesst">class为mini,title为tesst</div>
84   </div>
85 
86 <input type="hidden" value="hidden_1">
87 <input type="hidden" value="hidden_2">
88 <input type="hidden" value="hidden_3">
89 <input type="hidden" value="hidden_4">
90 
91 
92   <div style="display:none;"  class="none">style的display为"none"的div</div>
93   
94   <div class="hide">class为"hide"的div</div>
95   
96   <span id="mover">正在执行动画的span元素.</span>
97 <!-- Resources from http://down.liehuo.net -->
98 </body>
99 </html>

weixin_33721344

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery选择器之可见性过滤选择器Demo

测试代码05-可见性过滤选择器.html 1 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; 2 &lt;html xmlns="http://www.w3.org/1999/...
复制链接

扫一扫