jQuery基本筛选选择器

 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="UTF-8">
     <title>Insert title here</title>
     <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
     <!-- 为了测试，先添加一些样式 -->
     <style type="text/css">
         div,span,p {
            width:140px;
            height:140px;
            margin:5px;
            background:#aaa;
            border:#000 1px solid;
            float:left;
            font-size:17px;
            font-family:Verdana;
          }
          div.mini {
            width:55px;
            height:55px;
            background-color: #aaa;
            font-size:12px;
          }
          div.hide {
            display:none;
          }
     </style>

     <script type="text/javascript">
         //jQuery的页面加载完成时触发的事件
         $(document).ready(function(){
             //$("div:first")表示：选择第一个div标签
             $(button1).click(function(){
                 $("div:first").css("background-color", "red");
             });

             //$("div:last")表示：选择最后一个div标签
             $(button2).click(function(){
                 $("div:last").css("background-color", "red");
             });

             //$("div:not(.one)")表示：选择除了class为one的所有div标签
             $(button3).click(function(){
                 $("div:not(.one)").css("background-color", "red");
             });

             //$("div:even")表示：选择索引值为偶数的div标签
             $(button4).click(function(){
                 $("div:even").css("background-color", "red");
             });

             //$("div:odd")表示：选择索引值为奇数的div标签
             $(button5).click(function(){
                 $("div:odd").css("background-color", "red");
             });

             //$("div:eq(3)")表示：选择索引值为3的div标签
             $(button6).click(function(){
                 $("div:eq(3)").css("background-color", "red");
             });

             //$("div:gt(3)")表示：选择索引值大于3的div标签
             $(button7).click(function(){
                 $("div:gt(3)").css("background-color", "red");
             });

             //$("div:lt(3)")表示：选择索引值小于3的div标签
             $(button8).click(function(){
                 $("div:lt(3)").css("background-color", "red");
             });

             //$(":header")表示：选择标题标签
             $(button9).click(function(){
                 $(":header").css("background-color", "red");
             });

             //$(":animated")表示：选择有动画的标签
             $(button10).click(function(){
                 $(":animated").css("background-color", "red");
             });
         });
     </script>
 </head>
 <body>
     <h3>标题</h3>
     <a href="">刷新</a>
     <input type="button" id="button1" value="选择第一个div元素."/>
     <input type="button" id="button2" value="选择最后一个div元素."/>
     <input type="button" id="button3" value="选择class不为one的 所有div元素."/>
     <input type="button" id="button4" value="选择索引值为偶数 的div元素."/>
     <input type="button" id="button5" value="选择索引值为奇数 的div元素."/>
     <input type="button" id="button6" value="选择索引值等于3的元素."/>
     <input type="button" id="button7" value="选择索引值大于3的元素."/>
     <input type="button" id="button8" value="选择索引值小于3的元素."/>
     <input type="button" id="button9" value="选择所有的标题元素."/>
     <input type="button" id="button10" value="选择当前正在执行动画的所有元素."/>
     <br/><br/>
     <div class="one" id="one">
         id为one,class为one的div
         <div class="mini">class为mini</div>
     </div>

     <div class="one" id="two" title="test">
         id为two,class为one,title为test的div.
         <div class="mini" title="other">class为mini,title为other</div>
         <div class="mini" title="test">class为mini,title为test</div>
     </div>

     <div class="one">
         <div class="mini">class为mini</div>
         <div class="mini">class为mini</div>
         <div class="mini">class为mini</div>
         <div class="mini"></div>
     </div>

     <div class="one">
         <div class="mini">class为mini</div>
         <div class="mini">class为mini</div>
         <div class="mini">class为mini</div>
         <div class="mini" title="tesst">class为mini,title为tesst</div>
     </div>

     <span id="mover">正在执行动画的span元素.</span>

     <script type="text/javascript">
         function animateIt() {
             $("#mover").slideToggle("slow", animateIt);
         }
         animateIt();
     </script>

 </body>
 </html>

---