一定學會jQuery的36堂關鍵課程 第二章

利用階層指定元素的選擇器

(1) 取出某個元素底下的元素

$('#eva a').css(...);

(2) 取得某個元素最親近一層的元素

$('#eva > a').css(...);

(3) 取得某一個元素的下一個元素

$('#eva + li').css(...);

(4) 取得某個元素之後的所有元素

$('#eva ~ li').css(...);


依照出現順序取得目標元素

(1) 取出最初/最後的元素

$('#eva > li:first').css(...);
$('#eva > li:last').css(...);

(2) 取出偶數編號或奇數編號元素

$('#eva  li:even').css(...);
$('#eva  li:odd').css(...);

(3) 取出第n個元素

$('#eva > li:eq(2)').css(...);

(4) 取出第n個元素之前/之後的元素

$('#eva > li:lt(2)').css(...);
$('#eva > li:gt(2)').css(...);


利用子元素與字元作為篩選元素的條件

(1) 取出下層裡含有特定字元的元素

$('li:contains("xml")').css(...);

(2) 篩選擁有/空白內容的元素

$('td:empty').css(...);

(3)  以吻合特定選擇器的子元素作為篩選目標元素的條件

$('p:has(cite)).css(...);


專門取得子元素的篩選器

(1) 取得開頭或結尾的子元素

$('ul  li:first-child').css(...);
$('ul  li:last-child').css(...);

(2) 每隔n個取出子元素

$('ul  > li:nth-child(3n)').css(...);

(3) 取得唯一的子元素

$('p img:only-child').css(...);


利用屬性值篩選目標元素

(1) 以擁有特定屬性為條件篩選目標元素

$('a[target]').css(...);

(2) 以特定屬性是否等於/不等於某值為篩選元素條件

$('a[target="_blank"]').css(...);

(3) 篩選屬性值部分一致的元素

a. 以屬性值開頭符合某字串為條件篩選目標元素(開頭一致)

$('[屬性名稱^=值]').css(...);

b. 以屬性值開頭符合某字串為條件篩選目標元素(結尾一致)

$('[屬性名稱$=值]').css(...);

c. 以屬性值含有某字串為條件篩選目標元素(部分一致)

$('[屬性名稱*=值]').css(...);

(4) 同時使用多個屬性篩選器

$('a[target^="http:/"][target]').css(...);


其他篩選器

(1) 只篩選標題的篩選器

$(':header').css(...);

(2) 取得與選擇器不一致的元素

$('a:not([target])').css(...);

(3) 取出特定的表單

a. 所有的表單元素(<input>、<textarea>、<button>、<select>元素)

$(':input').css(...);

b.  文字框

$(':text').css(...);

c. 密碼輸入框

$(':password').css(...);

d. 單選按鈕

$(':radio').css(...);

e. 勾選框

$(':checkbox').css(...);

f. 檔案勾選框

$(':file').css(...);

g. 送出按鈕

$(':submit').css(...);

h. 圖片按鈕

$(':image').css(...);

i. 重設按鈕

$(':reset').css(...);

j. 所有的按鈕(<button>、<input type="button">元素)

$(':button').css(...);

k. 隱藏的欄位以及未顯示於螢幕上的元素

$(':hidden').css(...);

(4) 篩選出應存取的元素

a. 表單元素呈現有效的的狀態下

$(':enabled').css(...);

b. 表單元素呈現無效的狀態下

$(':disabled').css(...);

c. 選單按鈕或勾選框被勾選的狀態下

$(':checked').css(...);

d. 選取框被選取的狀態下

$(':selected').css(...);

e. 元素處於隱藏的狀態下

$(':hidden').css(...);

f. 元素處於顯示的狀態下

$(':visible').css(...);

g. 元素位於動態之中的狀態下

$(':animated').css(...);