互聯網 - 大數據

基本選擇器

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.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. 內容過濾選擇器

——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. 可見性過濾選擇器

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

jQuery至1.3.2之后的:hidden選擇器僅匹配display:none或<input type="hidden" />的元素，而不匹配visibility: hidden或opacity:0的元素。這也意味著hidden只匹配那些“隱藏的”并且不占空間的元素，像visibility:hidden或opactity:0的元素占據了空間，會被排除在外。

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

4. 屬性過濾選擇器

——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. 子元素過濾選擇器

——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. 表單對象屬性過濾選擇器

——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]')等同