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 //$("div:first")表示：选择第一个div标签 34 $(button1).click(function(){ 35 $("div:first").css("background-color", "red"); 36 }); 37 38 //$("div:last")表示：选择最后一个div标签 39 $(button2).click(function(){ 40 $("div:last").css("background-color", "red"); 41 }); 42 43 //$("div:not(.one)")表示：选择除了class为one的所有div标签 44 $(button3).click(function(){ 45 $("div:not(.one)").css("background-color", "red"); 46 }); 47 48 //$("div:even")表示：选择索引值为偶数的div标签 49 $(button4).click(function(){ 50 $("div:even").css("background-color", "red"); 51 }); 52 53 //$("div:odd")表示：选择索引值为奇数的div标签 54 $(button5).click(function(){ 55 $("div:odd").css("background-color", "red"); 56 }); 57 58 //$("div:eq(3)")表示：选择索引值为3的div标签 59 $(button6).click(function(){ 60 $("div:eq(3)").css("background-color", "red"); 61 }); 62 63 //$("div:gt(3)")表示：选择索引值大于3的div标签 64 $(button7).click(function(){ 65 $("div:gt(3)").css("background-color", "red"); 66 }); 67 68 //$("div:lt(3)")表示：选择索引值小于3的div标签 69 $(button8).click(function(){ 70 $("div:lt(3)").css("background-color", "red"); 71 }); 72 73 //$(":header")表示：选择标题标签 74 $(button9).click(function(){ 75 $(":header").css("background-color", "red"); 76 }); 77 78 //$(":animated")表示：选择有动画的标签 79 $(button10).click(function(){ 80 $(":animated").css("background-color", "red"); 81 }); 82 }); 83 </script> 84 </head> 85 <body> 86 <h3>标题</h3> 87 <a href="">刷新</a> 88 <input type="button" id="button1" value="选择第一个div元素."/> 89 <input type="button" id="button2" value="选择最后一个div元素."/> 90 <input type="button" id="button3" value="选择class不为one的 所有div元素."/> 91 <input type="button" id="button4" value="选择索引值为偶数 的div元素."/> 92 <input type="button" id="button5" value="选择索引值为奇数 的div元素."/> 93 <input type="button" id="button6" value="选择索引值等于3的元素."/> 94 <input type="button" id="button7" value="选择索引值大于3的元素."/> 95 <input type="button" id="button8" value="选择索引值小于3的元素."/> 96 <input type="button" id="button9" value="选择所有的标题元素."/> 97 <input type="button" id="button10" value="选择当前正在执行动画的所有元素."/> 98 <br/><br/> 99 <div class="one" id="one"> 100 id为one,class为one的div 101 <div class="mini">class为mini</div> 102 </div> 103 104 <div class="one" id="two" title="test"> 105 id为two,class为one,title为test的div. 106 <div class="mini" title="other">class为mini,title为other</div> 107 <div class="mini" title="test">class为mini,title为test</div> 108 </div> 109 110 <div class="one"> 111 <div class="mini">class为mini</div> 112 <div class="mini">class为mini</div> 113 <div class="mini">class为mini</div> 114 <div class="mini"></div> 115 </div> 116 117 <div class="one"> 118 <div class="mini">class为mini</div> 119 <div class="mini">class为mini</div> 120 <div class="mini">class为mini</div> 121 <div class="mini" title="tesst">class为mini,title为tesst</div> 122 </div> 123 124 <span id="mover">正在执行动画的span元素.</span> 125 126 <script type="text/javascript"> 127 function animateIt() { 128 $("#mover").slideToggle("slow", animateIt); 129 } 130 animateIt(); 131 </script> 132 133 </body> 134 </html>