jquery学习之1.5-可见性选择器学习

浏览数：26 / 时间：2015年06月09日

对于可见性选择器的学习，主要包含内容如下，可对多个隐藏jquery对象进行遍历，主要使用each方法：

代码如下：

 1 <%@ page language="java" import="java.util.*"
 2  pageEncoding="utf-8"%>
 3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 4 <html>
 5   <head>
 6     <title>11</title>    
 7   <script type="text/javascript" src="js/jquery-1.11.0.js">
 8   </script>
 9   <script language="javascript">
10    $(document).ready(function()
11   {
12       
13       
14       //***********************改变所有可见的div背景颜色为red********
15      $("#bt1").click(
16      function()
17      {    
18       $("div:visible").css("background","red");     
19      }
20      ); 
21      //***********************改变隐藏的div的背景色为#ffaaff********
22      $("#bt2").click(
23      function()
24      {    
25       $("div:hidden").css("background","#ffaaff");           
26      //传统方法 style.visible
27        $("div:hidden").show();
28        //备注：此时如果用input:hidden界面上是不会有input显示，因为input本身属性就是hidden，跟display:none效果不一样哦哦~！
29      }
30      ); 
31       //***********************选取不可见元素，利用jquery显示出来********
32      $(‘#bt3‘).click(function(){
33          $obj=$("input:hidden");//$obj是集合（$obj[0],$obj[1],$obj[2],$obj[3]）
34         alert($obj.length);
35         //传统方式：把$obj转换成dom对象    
36         for(var i=0;i<$obj.length;i++)
37         {
38         //转换dom
39         var dom_obj=$obj[i];
40         alert("转换dom  "+dom_obj.value);        
41         }     
42        //使用jquery的each方法        
43         $.each( $obj, function(i, obj){
44            //相当于每循环一次，i自增一次，obj=$obj[i]
45            //每循环一次，取出来的obj=$obj[0],obj为dom对象
46               alert("jquery的each方法："+$(obj).val());
47               alert("obj.value获取"+obj.value);
48         });
49         $.each( $obj, function(){        
50               alert("each的jquery方法："+$(this).val());
51         });
52         $.each( $obj, function(){            
53              alert("each的dom方法："+this.value);
54         });
55      });
56      
57       //***********************遍历json对象内容********
58      var arrgs=[{"name":"小小","age":"20"},{"name":"中中","age":"21"},{"name":"大大","age":"22"}];
59      $.each(arrgs,function(i,n){
60          alert(i+","+n.name);
61      });
62      
63    
64   });
65   
66   //****************************************************** 
67   </script>
68   </head> 
69   <body>
70     <input type="button"  id="bt1" value="改变所有可见的div背景颜色为red" ></input>   
71    <input type="button"  id="bt2" value="*改变隐藏的div的背景色为#ffaaff" ></input>   
72    <input type="button"  id="bt3" value="选取不可见元素，利用jquery显示出来" ></input>  
73   
75   
76     <br/><br/>
77     <div id="div1" style="background:grey;border:1px solid;width:20%;height:30%;float:left">
78         div1 
79         <div class="div1_1"  style="background:grey;border:1px solid;width:20%;height:30%;float:left">div_1</div>
80            
81     </div> 
82      <div class="div2"  style="display:none;background:white;border:1px solid;width:20%;height:30%;float:left"><p>p1第一段</p>p2第二段<p></p></div>
83      <div class="div3"  style="display:none;background:grey;border:1px solid;width:20%;height:30%;float:left"></div>
84      <input type="hidden" value="hidden1"/>
85       <input type="hidden" value="hidden2"/>
86        <input type="hidden" value="hidden3"/>
87         <input type="hidden" value="hidden4"/>
88      <br>
89   </body>
90 </html>