1、JQ函數
<script>
$(function(){
$("#btn1").click(function(){
$("body div:first").css("background-color","red");
});//第一個
$("#btn2").click(function(){
$("body div:last").css("background-color","red");
});//最後一個
$("#btn3").click(function(){
$("body div:odd").css("background-color","red");
});//奇數
$("#btn4").click(function(){
$("body div:even").css("background-color","red");
});//偶數
$("#btn5").click(function(){
$("body div:eq(0)").css("background-color","red");
});//下标為零（第一個）
$("#btn6").click(function(){
$("body div:lt(2)").css("background-color","red");
});//下标小于2
});
</script> 1 $("div:first") //第一個div
2 $("div:last") //最後一個div
3 $("div:even") //下标為偶數的div
4 $("div:odd") //下标為奇數的div
5 $("div:eq(4)") //下标等于 4 的div(下标從0開始計數)
6 $("div:gt(2)") //下标大于 2 的div
7 $("div:lt(2)") //下标小于 2 的div
8 $("div:not(#zhai)") //挑選除 id="zhai" 以外的所有div 效果展示：
div索引小于2：
2、完整代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基本過濾選擇器</title>
<link rel="stylesheet" href="../css/style.css" />
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("#btn1").click(function(){
$("body div:first").css("background-color","red");
});
$("#btn2").click(function(){
$("body div:last").css("background-color","red");
});
$("#btn3").click(function(){
$("body div:odd").css("background-color","red");
});
$("#btn4").click(function(){
$("body div:even").css("background-color","red");
});
$("#btn5").click(function(){
$("body div:eq(0)").css("background-color","red");
});
$("#btn6").click(function(){
$("body div:lt(2)").css("background-color","red");
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="body中的第一個div元素"/>
<input type="button" id="btn2" value="body中的最後一個div元素"/>
<input type="button" id="btn3" value="選擇body中的奇數的div"/><br>
<input type="button" id="btn4" value="選擇body中的偶數的div"/>
<input type="button" id="btn5" value="選擇body第一個div"/>
<input type="button" id="btn6" value="選擇body中的div索引小于2的區域"/>
<hr/>
<div id="one">
<div class="mini">
111
</div>
</div>
<div id="two">
<div class="mini">
222
</div>
<div class="mini">
333
</div>
</div>
<div id="three">
<div class="mini">
444
</div>
<div class="mini">
555
</div>
<div class="mini">
666
</div>
</div>
<span id="four">
</span>
</body>
</html> div,span {
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;
} 每個人都會有一段異常艱難的時光 。
生活的壓力 ， 工作的失意 ， 學業的壓力。
愛的惶惶不可終日。
挺過來的 ，人生就會豁然開朗。
挺不過來的 ，時間也會教你 ，怎麼與它們握手言和 ，是以不必害怕的。
——楊绛
![JAVA 系列——>開發工具IntelliJ IDEA的安裝以及配置、快捷鍵IDEA 簡介[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)