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>