Linux教程網 >> Linux編程 >> Linux編程 >> 使用jQuery基本過濾器選擇器選擇元素

使用jQuery基本過濾器選擇器選擇元素

日期：2017/3/1 10:58:20 编辑：Linux編程

示例代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>使用jQuery基本過濾選擇器</title>
<script language="javascript" type="text/javascript"
src="../Jscript/jquery-1.5.2.js"></script>
<style type="text/css">
body{font-size:12px;text-align:center}
div{width:241px;height:83px;border:solid 1px #eee}
h1{font-size:13px}
ul{list-style-type:none;padding:0px}
.DefClass,.NotClass{height:23px;width:60px;line-height:23px;float:left;
border-top:solid 1px #eee;border-bottom:solid 1px #eee}
.GetFocus{width:58px;border:solid 1px #666;background-color:#eee}
#spnMove{width:238px;height:23px;line-height:23px;}
</style>
<script type="text/javascript">
$(function(){ //增加第一個元素的類別，獲取第一個元素返回值單個元素
$("li:first").addClass("GetFocus");
})
$(function(){ //增加最後一個元素的類別，獲取最後一個元素返回值單個元素
$("li:last").addClass("GetFocus");
})
$(function(){ //增加去除所有與給定選擇器匹配的元素類別返回值元素集合
$("li:not(.NotClass)").addClass("GetFocus");
})
$(function(){ //增加所有索引值為偶數的元素類別,從0開始計數返回值元素集合
$("li:even").addClass("GetFocus");
})
$(function(){ //增加所有索引值為奇數的元素類別,從0開始計數返回值元素集合
$("li:odd").addClass("GetFocus");
})
$(function(){ //增加一個給定索引值的元素類別,從0開始計數返回值單個元素
$("li:eq(1)").addClass("GetFocus");
})
$(function(){ //增加所有大於給定索引值的元素類別,從0開始計數返回值元素集合
$("li:gt(1)").addClass("GetFocus");
})
$(function(){ //增加所有小於給定索引值的元素類別,從0開始計數返回值元素集合
$("li:lt(4)").addClass("GetFocus");
})
$(function(){ //增加標題類元素類別
$("div h1").css("width","238");
$(":header").addClass("GetFocus");
})
$(function(){
animateIt(); //增加動畫效果元素類別
$("#spnMove:animated").addClass("GetFocus");
})
function animateIt() { //動畫效果
$("#spnMove").slideToggle("slow", animateIt);
}
</script>
</head>
<body>
<div>
<h1>基本過濾選擇器</h1>
<ul>
<li class="DefClass">Item 0</li>
<li class="DefClass">Item 1</li>
<li class="NotClass">Item 2</li>
<li class="DefClass">Item 3</li>
</ul>
<span id="spnMove">Span Move</span>
</div>
</body>
</html>

說明：選擇器animated在捕捉動畫效果元素時，先自定義一個動畫效果函數animateIt（），然後執行該函數，選擇器才能獲取動畫效果，並增加其類別。