<div class="codetitle"> <span><a style="CURSOR: pointer" data="7481" class="copybut" id="copybut7481" onclick="doCopy('code7481')"><u>複製程式碼</u></a></span> 程式碼如下:</div> <div class="codebody" id="code7481"> <br> <br> <br><!-- <BR>1.簡單過濾選擇器：根據某類過濾規則進行元素的匹配，書寫時都以冒號（：）開頭；簡單過濾選擇器是過濾選擇器中使用最廣泛的一種<BR>jQuery選擇器詳解<BR>根據所獲取頁面中元素的不同，可以將jQuery選擇器分為：基本選擇器、層次選擇器、過濾選擇器、表單選擇器四大類。其中，在過濾選擇器中有可以分為：簡單過濾選擇器、內容過濾選擇器、可見性過濾選擇器、屬性過濾選擇器、子元素過濾選擇器、表單物件屬性過濾選擇器6種<BR> --> <br><title>使用jQuery基本過濾選擇器</title> <br><!--使用jQuery基本過濾選擇器選擇元素：在頁面中，設定一個<h1>標記使用者顯示主題，創建<ul>標記並在其中放置四個<li>,再建立一個<span>標記，用於執行動畫效果。透過簡單過濾選擇器取得元素，將選取的元素改變其類別名稱，從而突出其被選中的狀態--> <br><script src="jquery-1.9.1.js" type="text/javascript"></script> <br><style type="text/css"> <BR>body{font-size:12px;text-align:center;} <BR>div{width:240px;height:83px;border :solid 1px #eee} <BR>he{font-size:13px;} <BR>ul{list-style-type:none;padding:0px} <BR>.DefClass,.NotClass{height:23px;width: 60px;line-height:23px;float:left;border-top:solid 1px #eee;border-bottom:solid 1px #eee} <BR>.GetFocus{width:58px;border:solid 1px #666;background :#eee} <BR>#spnMove{width:234px;height:23px;line-height:23px;} <BR></style> <br><script type="text/javascript"> <BR>$( function () { //增加第一個元素的類別<BR>$('li:first').addClass('GetFocus'); <BR>}) <BR>$(function () { //增加最後一個元素的類別<BR>$('li:last').addClass('GetFocus'); <BR>}) <BR>$(function () { //增加移除所有與給定選擇器相符的元素類別<BR>$('li:not(.NotClass)').addClass('GetFocus'); <BR>}) <BR>$(function () { //增加所有索引值為偶數的元素類別，從0開始計數<BR>$('li:even').addClass('GetFocus'); <BR>}) <BR>$(function () { //增加所有索引值為奇數的元素類別，從0開始計數<BR>$('li:odd').addClass('GetFocus'); <BR>}) <BR>$(function () { //增加一個給定索引值的元素類別，從0開始計數<BR>$('li:eq(1)').addClass('GetFocus'); <BR>}) <BR>$(function () { //增加所有大於給定索引值的元素類別，從0開始計數<BR>$('li:gt(1)').addClass('GetFocus'); <BR>}) <BR>$(function () { //增加所有小於給定索引值的元素類別，從0開始計數<BR>$('li:lt(4)').addClass('GetFocus'); <BR>}) <BR>$(function () { //增加標題類元素類別<BR>$('div h1').css('width', '238'); <BR>$(':header').addClass('GetFocus'); <BR>}) <BR>$ (function () { <BR>animateIt(); //增加動畫效果元素類別<BR>$('#spnMove:animated').addClass('GetFocus'); <BR>}) <BR>function animateIt( ) { //動畫效果<BR>$('#spnMove').slideToggle('slow', animateIt); <BR>} <BR></script> <br> <br> <br><div> <br><h1>基本過濾選擇器</h1> <br><ul> <br><li class="DefClass">Item 0</li> <br><li class="DefClass">Item 1</li> <br><li class="NotClass">Item 2</li> <br><li class="DefClass">Item 3</li> <br> </ul> <br><span id="spnMove">Span Move</span> <br> </div> <br> <br> <br> </div>
