Jquery選取器使用方法大全

Jquery選取器使用方法大全

 

摘要：本文主要講是Jquery中選取器的使用方法

一、基本選取器1. id選取器（指定id元素）
將id=divOne的元素背景色設定為紅色。（id選取器返單個元素）

 

 

 $('#divOne').css('background', 'red');

 

2. class選取器（遍曆css類元素）

將class=divTwo的元素背景色設為藍色

 

 $('.divTwo').css('background', 'blue');

3. element選取器（遍曆html元素）
將p元素的文字設定為粉色

 

 

  $('p').css('color', 'pink');

4. * 選取器（遍曆所有元素）

 

將ul下的所有元素字型設定成黃色

 $('ul *').css('color', 'yellow');

5. 並欄選取器

 

將id = spanOne,class = 'pTwo' 的字型設定成藍色

   $('#spanOne,.pTwo').css('color', 'blue');

 

整個效果如下：

 

範例程式碼如下：

 

<script src=jquery-1.8.1.min.js> </script>點我改變顏色我是divOne我是divTwo

我是段落一

我是段落二

• 序列一
• 序列二
• 序列三

並列一

並列二

這是還沒改變之前的：

這是改變之後的：

二、 層次選取器

 

1. parent > child（直系子項目）

  $('#divOne > p').css('color', 'blue');

下面的代碼，只有外層段落的字型會改變顏色，裡層不會，因為裡層是屬於divInner的直系元素

外層段落一

外層段落二

外層段落三

裡層段落一

裡層段落二

裡層段落三

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

   $('#divTwo + ul').css('color', 'red');

下面的代碼，只有序列2開頭的會變色

 

• 序列1_1
• 序列1_2
• 序列1_3

• 序列2_1
• 序列2_2
• 序列2_3

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

    $('#divThree ~ span').css('color', 'red');

下面的代碼，兄弟一到三會變色

 兄弟一
兄弟二
兄弟三

樣本結果：

 

整個範例程式碼如下：

 

<script src=jquery-1.8.1.min.js> </script>點我改變顏色

外層段落一

外層段落二

外層段落三

裡層段落一

裡層段落二

裡層段落三

 

• 序列1_1
• 序列1_2
• 序列1_3

• 序列2_1
• 序列2_2
• 序列2_3

 兄弟一
兄弟二
兄弟三

改變之前：

改變之後：

三、 過濾選取器

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

 $('#divOne ul li :first').css('color', 'red');$('#divOne ul li :last').css('color', 'blue');

下面的代碼，序列1_1（first元素）和序列1_3（last元素）會變色

 

 

• 序列1_1
• 序列1_2
• 序列1_3

——1.2 :not（取非元素）

我是divTwo我是divThree
下面的代碼，divTwo和divThree會變色

 

 

• 序列1_1
• 序列1_2
• 序列1_3

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

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

偶數行行顏色為紅色（第一行的索引為0），奇數為藍色

Month	Savings	Name
January	$100	LinBingWen
Feb	$200	test
Jna	$2300	kkk
Nev	$800	cdf
few	$300	ggg
Oct	$300	ccc

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

 $('tr:eq(2)').css('background', 'yellow');//表格第二行變色

更改第二行的背景色為黃色


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

     $('#divFour ul li:gt(2)').css('color', 'red');     $('#divFour ul li:lt(2)').css('color', 'blue');

序列4_0到4_1是紅色，4_3到4_4為藍色

• 序列4_0
• 序列4_1
• 序列4_2
• 序列4_3
• 序列4_4

——1.6 :header（取H1~H6標題元素）

 $(':header').css('background', 'pink');

下面的代碼，H1~H6的背景色都會成粉色

H1H2H3H4H5H6上面的整個代碼如下：

 

 

<script src=jquery-1.8.1.min.js></script>點我改變顏色

• 序列1_1
• 序列1_2
• 序列1_3

我是divTwo我是divThree

Month	Savings	Name
January	$100	LinBingWen
Feb	$200	test
Jna	$2300	kkk
Nev	$800	cdf
few	$300	ggg
Oct	$300	ccc

• 序列4_0
• 序列4_1
• 序列4_2
• 序列4_3
• 序列4_4

H1H2H3H4H5H6

 

原始效果：

選擇後效果：

 

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

     $('#divOne span:contains(兄弟1_1)').css('color', 'red');

下面的代碼，兄弟1_1會變色

兄弟1_1
兄弟1_2
兄弟1_3
——2.2 :empty（取不包含子項目或文本為空白的元素）

 $('#divTwo span:empty').html('沒有內容').css('color', 'red');

下面第span顯示沒有內容文本

 

 

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

     $('#divThree:has(h1)').css('border', '1px solid #000');  // 為包含h1元素的div添加邊框

為包含h1元素的div添加邊框

 

 

我是標題一
——2.4 :parent（取包含子項目或文本的元素）

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

下面的代碼，序列1和序列2所在的li會有邊框

1. 序列1
2.  
3.  
4. 序列2

整個代碼如下：

 

 

<script src=jquery-1.8.1.min.js></script>點我改變顏色兄弟1_1
兄弟1_2
兄弟1_3

 我是標題一

1. 序列1
2.  
3.  
4. 序列2

 

原始內容：

點擊後的：

3. 可見度過濾選取器
——3.1 :hidden（取不可見的元素）

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

——3.2 :visible（取可見的元素）
範例程式碼如下：

 

<script src=jquery-1.8.1.min.js></script>點我改變顏色  原始：

 

點擊後:

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

 

將有title元素的span設定背景色為籃色

 

   $('span[title]').css('background','blue');

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

 $('span[title = test3]').css('background','red');

將將有title=‘test3’元素的span設定背景色為紅色

 

整個代碼如下：

 

<script src=jquery-1.8.1.min.js></script>點我改變顏色兄弟1_1
兄弟1_2
兄弟1_3

 

原效果：

點擊後：