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>
时间： 2024-12-22 17:22:15