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>