一：过滤选择器主要是范围+条件
主要有几个方法 ：
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 }