快捷導(dǎo)航

jQuery基本過濾選擇器使用介紹

更新時間：2013年04月18日 14:40:28 作者：

簡單過濾選擇器：根據(jù)某類過濾規(guī)則進行元素的匹配，書寫時都以冒號（：）開頭；簡單過濾選擇器是過濾選擇器中使用最廣泛的一種，感興趣的朋友可以參考下

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<!-- 
1.簡單過濾選擇器：根據(jù)某類過濾規(guī)則進行元素的匹配，書寫時都以冒號（：）開頭；簡單過濾選擇器是過濾選擇器中使用最廣泛的一種 
jQuery選擇器詳解 
根據(jù)所獲取頁面中元素的不同，可以將jQuery選擇器分為：基本選擇器、層次選擇器、過濾選擇器、表單選擇器四大類。其中，在過濾選擇器中有可以分為：簡單過濾選擇器、內(nèi)容過濾選擇器、可見性過濾選擇器、屬性過濾選擇器、子元素過濾選擇器、表單對象屬性過濾選擇器6種 
--> 
<title>使用jQuery基本過濾選擇器</title> 
<!--使用jQuery基本過濾選擇器選擇元素：在頁面中，設(shè)置一個<h1>標(biāo)記用戶顯示主題，創(chuàng)建<ul>標(biāo)記并在其中放置四個<li>,再創(chuàng)建一個<span>標(biāo)記，用于執(zhí)行動畫效果。通過簡單過濾選擇器獲取元素，將選中的元素改變其類名稱，從而突出其被選中的狀態(tài)--> 
<script src="jquery-1.9.1.js" type="text/javascript"></script> 
<style type="text/css"> 
body{font-size:12px;text-align:center;} 
div{width:240px;height:83px;border:solid 1px #eee} 
he{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:234px;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 () { //增加所有索引值為偶數(shù)的元素類別，從0開始計數(shù) 
$('li:even').addClass('GetFocus'); 
}) 
$(function () { //增加所有索引值為奇數(shù)的元素類別，從0開始計數(shù) 
$('li:odd').addClass('GetFocus'); 
}) 
$(function () { //增加一個給定索引值的元素類別，從0開始計數(shù) 
$('li:eq(1)').addClass('GetFocus'); 
}) 
$(function () { //增加所有大于給定索引值的元素類別，從0開始計數(shù) 
$('li:gt(1)').addClass('GetFocus'); 
}) 
$(function () { //增加所有小于給定索引值的元素類別，從0開始計數(shù) 
$('li:lt(4)').addClass('GetFocus'); 
}) 
$(function () { //增加標(biāo)題類元素類別 
$('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> 