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 :first 选取第一个元素 单个元素 #("div:first") 选取所有div中的第一个div元素
8 :last 选取最后一个元素 单个元素 $("div:last") 选取所有div中的最后一个div元素
9 :not(selector) 去除所有与给定选择器匹配的元素 集合元素 $("input:not(.myClass)") 选取class不是myClass的input元素
10 :even 选取索引是偶数的所有元素，索引从0开始 集合元素 $("input:even") 选取索引是偶数的input元素
11 :odd 选取索引是奇数的所有元素，索引从0开始 集合元素 $("input:odd") 选取索引是奇数的input元素
12 :eq(index) 选取索引等于index的元素（index从0开始） 单个元素 $("input:eq(1)") 选取索引等于1的input元素
13 :gt(index) 选取索引大于index的元素（index从0开始） 集合元素 $("input:gt(1)") 选取索引大于1的input元素（注：大于1 而不包括1）
14 :lt(index) 选育索引小与index的元素（index从0开始） 集合元素 $("input:lt(1)") 选取索引小于1的input元素（注：小于1 而不包括1）
15 :header 选取所有的标题元素，例如h1,h2,h3等等 集合元素 $(":header") 选取网页中所有的<h1>,<h2>,<h3>……
16 :animated 选取当前正在执行动画的所有元素 集合元素 $("div:animated") 选取正在执行动画的div元素
17 :focus 选取当前获取焦点的元素 集合元素 $(":focus") 选取当前获取焦点的元素
18 -->
19 <meta http-equiv="pragma" content="no-cache">
20 <meta http-equiv="cache-control" content="no-cache">
21 <meta http-equiv="expires" content="0">
22 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
23 <meta http-equiv="description" content="This is my page">
24 <script type="text/javascript" src="../../js/jquery.js"></script>
25 <style type="text/css">
26 div,span,p{
27 width:140px;
28 height:140px;
29 margin:5px;
30 background:#aaa;
31 border:#000 1px solid;
32 float:left;
33 font-size:17px;
34 font_family:Verdana;
35 }
36 div.mini{
37 width:55px;
38 height:55px;
39 background-color:#aaa;
40 font-size:12px;
41 }
42 div.hide{
43 display:none;
44 }
45 </style>
46
47 <script type="text/javascript" >
48
49 //选取第一个div元素
50 function test1(){
51 $("div:first").css("background","#bbffaa");
52 }
53
54 //选取最后第一个div元素
55 function test2(){
56 $("div:last").css("background","#808000");
57 }
58
59 //选取class不为one的div元素 多个用 , 隔开 $("div:not(.one,.two)")
60 function test3(){
61 $("div:not(.one)").css("background","#00ff00");
62 }
63
64 //选取索引值为偶数的div 下标从0开始 0算偶数
65 function test4(){
66 $("div:even").css("background","00ff00");
67 }
68
69 //选取索引值为奇数的div 下标从0开始 0算偶数
70 function test5(){
71 $("div:odd").css("background","00ff00");
72 }
73
74 //选取索引值为3的div 下标从0开始 0算偶数
75 function test6(){
76 $("div:eq(3)").css("background","00ff00");
77 }
78
79 //选取索引值大于3的div 下标从0开始 0算偶数 不包括3
80 function test7(){
81 $("div:gt(3)").css("background","00ff00");
82 }
83
84 //选取索引值小于3的div 下标从0开始 0算偶数 不包括3
85 function test8(){
86 $("div:lt(3)").css("background","00ff00");
87 }
88
89 //选取所有标题元素 <h1> <h2> <h3>
90 function test9(){
91 $(":header").css("background","00ff00");
92 }
93
94 //改变当前正在执行动画的元素 的背景色 ？？？
95 function test10(){
96 $(":animated").css("background","00ff00");
97 }
98
99 //改变当前获取焦点的背景色
100 function test11(){
101 $(":focus").css("background","00ff00");
102 }
103 </script>
104 </head>
105 <body>
106
107 <div id="one" class="one">
108 id为one class为one的div
109 <div class="mini">class为mini</div>
110 </div>
111
112 <div class="one" id="two" title="test">
113 id为two class为one title为test的div
114 <div class="mini" title="other">class为mini title为other</div>
115 <div class="mini" title="test">class为mini title为test</div>
116 </div>
117
118 <div class="one">
119 <div class="mini">class为mini</div>
120 <div class="mini">class为mini</div>
121 <div class="mini">class为mini</div>
122 <div class="mini"></div>
123 </div>
124
125 <div class="one">
126 <h1>fsdfds</h1>
127 <div class="mini">class为mini</div>
128 <div class="mini">class为mini</div>
129 <div class="mini">class为mini</div>
130 <div class="mini" title="tesst">class为mini title为tesst</div>
131 </div>
132
133 <div style="display:none;" class="none">
134 style为display class为none的div
135 </div>
136
137 <div class="hide">class为hide的div</div>
138
139
140 <div>
141 包涵input的type为hidden的div<input type="hidden" size="8"/>
142 </div>
143
144 <span id="mover">正在执行动画的span元素</span>
145
146
147 <br>
148 <input type="button" onclick="test1()" value="改变第一个div元素的背景色"/>
149 <input type="button" onclick="test2()" value="改变最后一个div元素的背景色"/>
150 <input type="button" onclick="test3()" value="改变class不为one的div元素的背景色"/>
151 <input type="button" onclick="test4()" value="改变索引值为偶数的div元素的背景色"/>
152 <input type="button" onclick="test5()" value="改变索引为奇数的div元素的背景色"/>
153 <input type="button" onclick="test6()" value="改变索引值等于3的div元素的背景色"/>
154 <input type="button" onclick="test7()" value="改变索引值大于3的div元素的背景色"/>
155 <input type="button" onclick="test8()" value="改变索引值小于3的div元素的背景色"/>
156 <input type="button" onclick="test9()" value="改变所有的标题元素，例如<h1>,<h2>,<h2>这些元素的背景色"/>
157 <input type="button" onclick="test10()" value="改变当前正在执行动画的元素的背景色"/>
158 <input type="button" onclick="test11()" value="改变当前获取焦点的背景色"/>
159
160
161 </body>
162 </html>
时间： 2024-10-11 07:41:20