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>