jQ学习之过滤选择器的测试

一：过滤选择器主要是范围+条件

主要有几个方法：

1、first(找到范围内第一个元素）

2、last（找到范围内最后一个元素）

3、odd（找到范围内索引值为奇数的元素（索引值从0开始））

4、even（找到范围内索引值为偶数的元素（索引值从0开始））

html代码：

 1     <input type="button" id="btn1" value="选择body的第一个div元素" />
 2         <input type="button" id="btn2" value="选择body中最后一个div元素" />
 3         <input type="button" id="btn3" value="选择body中的奇数的div" />
 4         <input type="button" id="btn4" value="选择body中偶数的div" />
 5         <hr />
 6         <div id="one">
 7             <div class="mini">
 8                 111
 9             </div>
10         </div>
11 
12         <div id="two">
13             <div class="mini">
14                 222
15             </div>
16             <div class="mini">
17                 333
18             </div>
19         </div>
20 
21         <div id="three">
22             <div class="mini">
23                 444
24             </div>
25             <div class="mini">
26                 555
27             </div>
28             <div class="mini">
29                 666
30             </div>
31         </div>
32 
33         <span id="four">
34 
35         </span>

jQ代码：

 1 //定义一个页面加载函数
 2                 $(function(){
 3                     //为按钮1设置点击事件
 4                     $("#btn1").click(function(){
 5                         //注意方法
 6                     $("body div:first").css("backgroundColor","gold");
 7                     })
 8                     $("#btn2").click(function(){
 9                         //注意方法
10                         $("body div:last").css("backgroundColor","gold");
11                     })
12                     $("#btn3").click(function(){
13                         //注意方法,even在检索的时候是从0开始计数
14                         $("body div:odd").css("backgroundColor","gold");
15                     })
16                     $("#btn4").click(function(){
17                         //注意方法,注意参数,所有指的是包含body内部所有的元素
18                         $("body div:even").css("backgroundColor","gold");
19                     })
20                     
21                 })

CSS代码：

 1  div,span,p {
 2     width:140px;
 3     height:140px;
 4     margin:5px;
 5     background:#aaa;
 6     border:#000 1px solid;
 7     float:left;
 8     font-size:17px;
 9     font-family:Verdana;
10   }
11    div.mini { 
12     width:55px;
13     height:55px;
14     background-color: #aaa;
15     font-size:12px;
16   } 
17   div.hide { 
18     display:none;
19   }