jquery学习之1.5-可见性选择器学习
对于可见性选择器的学习，主要包含内容如下，可对多个隐藏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>
