1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Insert title here</title>
6 <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
7 <!-- 为了测试，先添加一些样式 -->
8 <style type="text/css">
9 div,span,p {
10 width:140px;
11 height:140px;
12 margin:5px;
13 background:#aaa;
14 border:#000 1px solid;
15 float:left;
16 font-size:17px;
17 font-family:Verdana;
18 }
19 div.mini {
20 width:55px;
21 height:55px;
22 background-color: #aaa;
23 font-size:12px;
24 }
25 div.hide {
26 display:none;
27 }
28 </style>
29
30 <script type="text/javascript">
31 //jQuery的页面加载完成时触发的事件
32 $(document).ready(function(){
33 //$("body div")表示：body标签下所有的div标签
34 $(button1).click(function(){
35 $("body div").css("background-color", "red");
36 });
37
38 //$("body>div")表示：body标签下的子div标签
39 $(button2).click(function(){
40 $("body>div").css("background-color", "red");
41 });
42
43 //$("#one+div")表示：id为one的下一个div元素（同级的）
44 $(button3).click(function(){
45 $("#one+div").css("background-color", "red");
46 });
47
48 //$("#two~div")表示：id为two的所有同级标签为div
49 $(button4).click(function(){
50 $("#two~div").css("background-color", "red");
51 });
52 });
53 </script>
54 </head>
55 <body>
56 <a href="">刷新</a>
57 <input type="button" id="button1" value="选择 body内的所有div元素"/>
58 <input type="button" id="button2" value="在body内,选择子元素是div的"/>
59 <input type="button" id="button3" value="选择 id为one 的下一个div元素"/>
60 <input type="button" id="button4" value="选择 id为two的元素后面的所有div兄弟元素"/>
61 <br/><br/>
62 <div class="one" id="one">
63 id为one,class为one的div
64 <div class="mini">class为mini</div>
65 </div>
66
67 <div class="one" id="two" title="test">
68 id为two,class为one,title为test的div.
69 <div class="mini" title="other">class为mini,title为other</div>
70 <div class="mini" title="test">class为mini,title为test</div>
71 </div>
72
73 <div class="one">
74 <div class="mini">class为mini</div>
75 <div class="mini">class为mini</div>
76 <div class="mini">class为mini</div>
77 <div class="mini"></div>
78 </div>
79
80 <div class="one">
81 <div class="mini">class为mini</div>
82 <div class="mini">class为mini</div>
83 <div class="mini">class为mini</div>
84 <div class="mini" title="tesst">class为mini,title为tesst</div>
85 </div>
86
87 <div style="display: none;" class="none">style的display为"none"的div</div>
88
89 </body>
90 </html>
