總結jQuery選擇器

原文:

總結jquery選擇器

1. id選擇器（指定id元素）

2. class選擇器（遍歷css類元素）

3. element選擇器（遍歷html元素）

4. * 選擇器（遍歷所有元素）

5. 並列選擇器$('p,div').css('margin', '0');

1. parent > child（直系子元素）

2. prev + next（下乙個兄弟元素，等同於next()方法）

3. prev ~ siblings（prev元素的所有兄弟元素，等同於nextall()方法）

——1.1 :first和:last（取第乙個元素或最後乙個元素）

——1.2 :not（取非元素）

$('div:not(.wrap)').css('color', '#ff0000');

——1.3 :even和:odd（取偶數索引或奇數索引元素，索引從0開始，even表示偶數，odd表示奇數）

——1.4 :eq(x) （取指定索引的元素）

——1.5 :gt(x)和:lt(x)（取大於x索引或小於x索引的元素）

$('ul li:gt(2)').css('color', '#ff0000');
$('ul li:lt(2)').css('color', '#0000ff');

——1.6 :header（取h1~h6標題元素）

$(':header').css('background', '#efefef');

——2.1 :contains(text)（取包含text文字的元素）

$('dd:contains("jquery")').css('color', '#ff0000');
——2.2 :empty（取不包含子元素或文字為空的元素）

$('dd:empty').html('沒有內容');

——2.3 :has(selector)（取選擇器匹配的元素）

$('div:has(span)').css('border', '1px solid #000');
——2.4 :parent（取包含子元素或文字的元素）

$('ol li:parent').css('border', '1px solid #000');

——3.1 :hidden（取不可見的元素）

jquery至1.3.2之後的:hidden選擇器僅匹配display:none或的元素，而不匹配visibility: hidden或opacity:0的元素。這也意味著hidden只匹配那些「隱藏的」並且不佔空間的元素，像visibility:hidden或opactity:0的元素佔據了空間，會被排除在外。

——3.2 :visible（取可見的元素）

——4.1 [attribute]（取擁有attribute屬性的元素）

$('a[title]').css('text-decoration', 'none');

——4.2 [attribute = value]和[attribute != value]（取attribute屬性值等於value或不等於value的元素）

$('a[class=item]').css('color', '#ff99cc');

$('a[class!=item]').css('color', '#ff6600');

——4.3 [attribute ^= value], [attribute $= value]和[attribute *= value]（attribute屬性值以value開始，以value結束，或包含value值）

——4.4 [selector1][selector2]（複合型屬性過濾器，同時滿足多個條件）

——5.1 :first-child和:last-child

——5.2 :only-child

當某個元素有且僅有乙個子元素時，:only-child才會生效。

——5.3 :nth-child

:nth-child有三種用法：

1) :nth-child(x)，獲取第x個子元素

2) :nth-child(even)和:nth-child(odd)，從1開始，獲取第偶數個元素或第奇數個元素

3) :nth-child(xn+y)，x>=0，y>=0。例如x = 3, y = 0時就是3n，表示取第3n個元素（n>=0）。實際上xn+y是上面兩種的通項式。（當x=0,y>=0時，等同於:hth-child(x)；當x=2,y=0時，等同於nth-child(even)；當x=2,y=1時，等同於:nth-child(odd)）

——6.1 :enabled和:disabled（取可用或不可用元素）

:enabled和:diabled的匹配範圍包括input, select, textarea。

——6.2 :checked（取選中的單選框或核取方塊元素）

下面的**，更改邊框或背景色僅在ie下有效果，chrome和firefox不會改變，但是alert都會彈出來。

——6.3 :selected（取下拉列表被選中的元素）

1. :input（取input,textarea,select,button元素）

:input元素這裡就不再多說了，前面的一些例子中也已經囊括了。

2. :text（取單行文字框元素）和:password（取密碼框元素）

這兩個選擇器分別和屬性選擇器$('input[type=text]')、$('input[type=password]')等同。

3. :radio（取單選框元素）

:radio選擇器和屬性選擇器$('input[type=radio]')等同

4. :checkbox（取核取方塊元素）

:checkbox選擇器和屬性選擇器$('input[type=checkbox]')等同

5. :submit（取提交按鈕元素）

:submit選擇器和屬性選擇器$('input[type=submit]')等同

6. :reset（取重置按鈕元素）

:reset選擇器和屬性選擇器$('input[type=reset]')等同

7. :button（取按鈕元素）

:button選擇器和屬性選擇器$('input[type=button]')等同

8. :file（取上傳域元素）

:file選擇器和屬性選擇器$('input[type=file]')等同

9. :hidden（取不可見元素）

:hidden選擇器和屬性選擇器$('input[type=hidden]')等同

總結jQuery選擇器

jQuery選擇器總結

Jquery選擇器總結

jQuery選擇器總結

總結jQuery選擇器

jQuery選擇器總結

Jquery選擇器總結

jQuery選擇器總結

相關推薦