CSS 選擇器

jQuery選擇器大全

一、基本選擇器
1. id選擇器（指定id元素）id選擇器返單個元素）

$('#one').css('background', '#000');

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

$('.one').css('background', '#000');

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

 $('p').css('font-size', '12px');

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

 // 遍歷form下的所有元素，將字型顏色設定為紅色
        $('form *').css('color', '#FF0000');
 

5. 並列選擇器

// 將所有p元素和div元素的margin設為0
        $('p, div').css('margin', '0');

二、 層次選擇器
1. parent > child（直系子元素）

 // 選取div下的第一代span元素，將字型顏色設為紅色
        $('div > span').css('color', '#FF0000');

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

 // 選取class為item的下一個div兄弟元素
    $('.item + div').css('color', '#FF0000');
    // 等價程式碼
    //$(
 
'.item').next('div').css('color', '#FF0000');

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

 // 選取class為inside之後的所有div兄弟元素
    $('.inside ~ div').css('color', '#FF0000');
    // 等價程式碼
    //$('.inside').nextAll('div').css('color', '#FF0000');

三、 過濾選擇器
1. 基本過濾選擇器
——1.1 :first和:last（取第一個元素或最後一個元素）

 $('span:first'
 
).css('color', '#FF0000');
            $('span:last').css('color', '#FF0000');

——1.2 :not（取非元素）

// 當非這個元素的div和非這個元素是父子關係時， 都會變色
 $('div:not(.wrap)').css('color', '#FF0000');

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

 $('tr:even').css('background', '#EEE'); // 偶數行顏色
            $('tr:odd').css('background', '#DADADA'); // 奇數行顏色

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

$('tr:eq(2)').css('background', '#FF0000');

——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標題元素）

// H1~H6的背景色都會變
 $(':header').css('background', '#EFEFEF');

2. 內容過濾選擇器
——2.1 :contains(text)（取包含text文字的元素）

 // dd元素中包含"jQuery"文字的會變色
            $('dd:contains("jQuery")').css('color', '#FF0000');

——2.2 :empty（取不包含子元素或文字為空的元素）

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

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

/ 為包含span元素的div新增邊框
            $('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或的元素，而不匹配visibility: hidden或opacity:0的元素。這也意味著hidden只匹配那些“隱藏的”並且不佔空間的元素，像visibility:hidden或opactity:0的元素佔據了空間，會被排除在外。

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

4. 屬性過濾選擇器
——4.1 [attribute]（取擁有attribute屬性的元素）

// a標籤帶title屬性，取消下劃線
$('a[title]').css('text-decoration', 'none');

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