代碼 代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--
1.簡單過濾選擇器：根據某類過濾規則進行元素的匹配，書寫時都以冒號（：）開頭；簡單過濾選擇器是過濾選擇器中使用最廣泛的一種
jQuery選擇器詳解
根據所獲取頁面中元素的不同，可以將jQuery選擇器分為：基本選擇器、層次選擇器、過濾選擇器、表單選擇器四大類。其中，在過濾選擇器中有可以分為：簡單過濾選擇器、內容過濾選擇器、可見性過濾選擇器、屬性過濾選擇器、子元素過濾選擇器、表單對象屬性過濾選擇器6種
-->
<title>使用jQuery基本過濾選擇器</title>
<!--使用jQuery基本過濾選擇器選擇元素：在頁面中，設置一個<h1>標記用戶顯示主題，創建<ul>標記並在其中放置四個<li>,再創建一個<span>標記，用於執行動畫效果。通過簡單過濾選擇器獲取元素，將選中的元素改變其類名稱，從而突出其被選中的狀態-->
<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 () { //增加所有索引值為偶數的元素類別，從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>