1 <%@ page language="java" contentType="text/html; charset=utf-8"
2 pageEncoding="utf-8"%>
3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
4 <html>
5 <head>
6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
7 <title>Insert title here</title>
8 <script src="../js/jquery-1.11.3.js" type="text/javascript"></script>
9 <script src="../js/jquery-1.11.3.min.js" type="text/javascript"></script>
10 <script language="javascript">
11 document.ready(function() {
12 $("#b1").click(function(){
13 $("div:first").css("background-color","red");
14 });
15 $("#b2").click(function(){
16 $("div:last").css("background-color","red");
17 });
18 $("#b3").click(function(){
19 $("div:not(.one)").css("background-color","red");
20 });
21 $("#b4").click(function(){
22 $("div:even").css("background-color","red");
23 });
24 $("#b5").click(function(){
25 $("div:odd").css("background-color","red");
26 });
27 $("#b6").click(function(){
28 $("div:gt(3)").css("background-color","red");
29 });
30 $("#b7").click(function(){
31 $("div:eq(3)").css("background-color","red");
32 });
33 $("#b8").click(function(){
34 $("div:it(3)").css("background-color","red");
35 });
36 });
37 </script>
38 </head>
39 <body>
40 <input type="button" value="改变第一个div的背景色" id="b1" />
41 <input type="button" value="改变最后一个div的背景色" id="b2" />
42 <input type="button" value="改变class不为one的所有div的背景色" id="b3" />
43 <input type="button" value="改变索引值为偶数的div的背景色" id="b4" />
44 <input type="button" value="改变索引值为基数的div的背景色" id="b5" />
45 <input type="button" value="改变索引值大于3的div的背景色" id="b6" />
46 <input type="button" value="改变索引值等于3的div的背景色" id="b7" />
47 <input type="button" value="改变索引值小于3的div的背景色" id="b8" />
48 <input type="button" value="改变所有标题元素的背景色" id="b9" />
49
50 <h2>h2</h2>
51 <h5>h5</h5>
52 <h3>h3</h3>
53 <div class="one">div1</div>
54 <div class="one">div2</div>
55 <div>div3</div>
56 <div>div4</div>
57 <div>div5</div>
58 <div>div6</div>
59 <div>div7</div>
60 <div class="one">div8</div>
61 <div>div9</div>
62
63 <input type="button" value="增加动画效果" id="b10" />
64 <br>
65 <div id="mover">动画</div>
66 </body>
67 </html>
时间： 2024-10-24 21:37:41