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>