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

测试代码

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>

转载于:https://www.cnblogs.com/DreamDrive/p/5780059.html

jQuery选择器之可见性过滤选择器Demo相关推荐

jQuery选择器之可见性过滤选择器
本文接上篇聊聊可见性过滤选择器. 五.可见性过滤选择器可见性过滤选择器根据元素是否可见的特征获取元素,其详细的说明如表所示示例代码: <head><title> 使用 jQ ...
Jquery选择器之可见性选择器、属性过滤选择器
可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素,可见性选择器介绍如下在可见性选择器中,需要注意选择器:hidden,他不仅包括样式属性display为"none", ...
【10】jQuery学习——入门jQuery选择器之表单选择器
这里我们要知道表单,但是在实际写jq的时候,用到貌似不是很多,所以这里我就直接转梦三秋网站上的课件啦. 当然等以后要用的时候,我们在拿出来研究下,毕竟表单这块,看起来真的很多,眼晕啊~~~ ===== ...
【7】jQuery学习——入门jQuery选择器之过滤选择器-可见性过滤选择器
这篇什么都不说,看标题就知道了,很简单,就2个选择器,嘿嘿选择器描述返回 $("Element:hidden") 选取所有不可见的元素集合元素 $("Elemen ...
jQuery的选择器——可见性过滤选择器
jQuery的可见性选择器是根据元素的可见和不可见状态来选择相对应的元素.主要有两个:可见:visible和不可见:hidden.今天我们主要来学习这两个选择器的使用.先来看一个HTML结构,方便学习 ...
jquery可见性过滤选择器
jquery可见性过滤选择器可见性过滤选择器是根据元素的可见性状态来选择相应的元素. 在锋利的jquery一书中的介绍如下:
jquery可见性过滤选择器:hidden、:visible
全栈工程师开发手册 (作者:栾鹏) jquery系列教程1-选择器全解 jquery可见性过滤选择器 jquery可见性过滤选择器,包括:hidden.:visible,具体功能如代码中注释. 代码如 ...
jquery：选择器【基础选择器、层级选择器、属性选择器和方法操作、过滤选择器、筛选选择器和方法，可见性过滤选择器】
名称用法描述基础选择器 id选择器 $('#class') 指定id的元素类选择器 $('.class') 指定类标签选择器 $('div') 指定标签并集选择器 $('div,class ...
过滤选择器——可见性过滤选择器
可见性过滤选择器根据元素是否可见的特征获取元素,其详细的说明如表: 选择器功能返回值 :hidden 获取所有不可见元素,或者type为hidden的元素元素集合 :visible 获取所有可见 ...

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

jQuery选择器之可见性过滤选择器Demo相关推荐

最新文章

热门文章