首頁 > 開發者 > JavaScript
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--jQuery選取器詳解
根據所擷取頁面中元素的不同，可以將jQuery選取器分為：基本選取器、層次選取器、過濾選取器、表單選取器四大類。其中，在過濾選取器中有可以分為：簡單過濾選取器、內容過濾選取器、可見度過濾選取器、屬性過濾選取器、子項目過濾選取器、表單對象屬性過濾選取器6種
1.簡單過濾選取器：根據某類過濾規則進行元素的匹配，書寫時都以冒號（：）開頭；簡單過濾選取器是過濾選取器中使用最廣泛的一種
-->
<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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
