1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>第2章示例7</title>
6 <style type="text/css">
7 body { width:760px; }
8 div,p,h3,h1 { border:4px solid black; background-color:green; color:white; margin:6px; padding:5px; font:bold 14px/1 Arial,Helvetica,sans-serif; width:220px; float:left; }
9 div p { width:205px; border-width:2px; margin:5px 0; float:none; }
10 h1 { margin:6px 256px; } h3 { position:relative; margin-right:500px; }
11 div.top { height:65px; }
12 .clear { clear:both; }
13 div.hide { display:none; } p.hide { visibility:hidden; }
14 .highlight { background-color:gold; color:black; }
15 form { clear:both; }
16 button { font:bold 16px/1 Arial,Helvetica,sans-serif; margin:1px 3px; padding:2px; cursor:pointer; width:175px; }
17 </style>
18 <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
19 <script type="text/javascript">
20 $(document).ready(function(){
21 $("button").click(function(){$("*").removeClass("highlight");});
22 $("#btn1").click(function(){$("body p").addClass("highlight");});
23 $("#btn2").click(function(){$("body>p").addClass("highlight");});
24 $("#btn3").click(function(){$("h3+p").addClass("highlight");});
25 $("#btn4").click(function(){$("h3~p").addClass("highlight");});
26 function swing() {
27 $("h3").animate({left:"500"},7000)
28 .animate({left:"0"},7000, swing);
29 }
30 swing();
31 });
32 </script>
33 </head>
34 <body>
35 <h1><h1> </h1></h1>
36 <div class="clear top">
37 <div class="clear top">
38 <p><p>hello</p></p>
39 </div>
40 </div>
41 <div class="top" id="core">
42 <div class="top" id="core">
43 <p><p> </p></p>
44 </div>
45 </div>
46 <div class="top">
47 <div class="top"><br/>
48 hello, John<br/>
49 </div>
50 </div>
51 <p class="clear"><p class="clear"> </p></p>
52 <p><p > </p></p>
53 <p><p > </p></p>
54 <h3 class="clear"><h3 class="clear"> </h3></h3>
55 <p class="clear"><p class="clear"> </p></p>
56 <p><p > </p></p>
57 <p class="hide"><p class="hide"> </p></p>
58 <div class="clear bottom">
59 <div class="clear bottom">
60 <p><p> </p></p>
61 <p><p> </p></p>
62 <p><p> </p></p>
63 </div>
64 </div>
65 <div class="bottom">
66 <div class="bottom">
67 <p><p> </p></p>
68 <p><p> </p></p>
69 <p><p> </p></p>
70 </div>
71 </div>
72 <div class="hide bottom">
73 <div class="hide bottom">
74 <p><p> </p></p>
75 <p><p> </p></p>
76 <p><p> </p></p>
77 </div>
78 </div>
79 <form>
80 <button type="button" id="btn1">$("body p")</button>
81 <button type="button" id="btn2">$("body>p")</button>
82 <button type="button" id="btn3">$("h3+p")</button>
83 <button type="button" id="btn4">$("h3~p")</button>
84 </form>
85 </body>
86 </html>