jQuery可见性过滤选择器

  1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
  2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  3 <html>
  4   <head>
  5     <!-- jQuery可见性过滤选择器 -->
  6     <!-- 
  7         :hidden            选取所有不可见的元素        集合元素        $(":hidden")    选取所有不可见元素  包括<input type="hidden"/>  
  8                                                                             <div style="display:none;"> 和<div style="visibility:hidden;">等元素
  9                                                                             如果只想选取input元素 可以使用$("input:hidden")
 10         :visible        选取所有可见元素            集合元素        $("div:visible")选取所有可见的div元素
 11      -->
 12     <meta http-equiv="pragma" content="no-cache">
 13     <meta http-equiv="cache-control" content="no-cache">
 14     <meta http-equiv="expires" content="0">    
 15     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 16     <meta http-equiv="description" content="This is my page">
 17     <script type="text/javascript"  src="../../js/jquery.js"></script>
 18     <style type="text/css">
 19         div,span,p{
 20             width:140px;
 21             height:140px;
 22             margin:5px;
 23             background:#aaa;
 24             border:#000 1px solid;
 25             float:left;
 26             font-size:17px;
 27             font_family:Verdana;
 28         }
 29         div.mini{
 30             width:55px;
 31             height:55px;
 32             background-color:#aaa;
 33             font-size:12px;
 34         }
 35         div.hide{
 36             display:none;
 37         }    
 38     </style>
 39     
 40     <script type="text/javascript" >
 41         
 42         //选取所有可见div的元素背景色
 43         function test1(){
 44             $("div:visible").css("background","#bbffaa");
 45         }
 46         
 47         //选取隐藏的div
 48         function test2(){
 49             //show()是jQuery方法 他的功能是显示元素 3000是时间 单位是毫秒  3000毫秒指的是从隐藏到完全显示完成的时间 并非是显示多少时间
 50             $("div:hidden").show(3000);
 51         }
 52 
 53     </script>
 54   </head>
 55   <body>
 56   
 57       <div id="one" class="one">
 58           id为one  class为one的div
 59           <div class="mini">class为mini</div>
 60       </div>
 61   
 62       <div class="one"  id="two"  title="test">
 63            id为two class为one title为test的div
 64            <div class="mini"  title="other">class为mini  title为other</div>
 65            <div class="mini"  title="test">class为mini  title为test</div>
 66       </div>
 67   
 68       <div class="one">
 69           <div class="mini">class为mini</div>
 70           <div class="mini">class为mini</div>
 71           <div class="mini">class为mini</div>
 72           <div class="mini"></div>
 73       </div>
 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       <div style="display:none;"  class="none">
 83           style为display class为none的div
 84       </div>
 85   
 86     <div class="hide">class为hide的div</div>  
 87   
 88   
 89       <div>
 90           包涵input的type为hidden的div<input  type="hidden"  size="8"/>
 91       </div>
 92       
 93       <span id="mover">正在执行动画的span元素</span>
 94       
 95       
 96       <br>
 97       <input type="button" onclick="test1()"  value="改变所有可见的div元素的背景色"/>
 98       <input type="button" onclick="test2()"  value="显示影藏的div元素"/>
 99       
100       
101   </body>
102 </html>
posted on 2016-04-10 16:38 奈文摩尔ゞ阅读(393) 评论(0) 编辑收藏举报