jQuery學習筆記（三）：選取器總結

標籤：inf   checked   pyc   box   color   blog   可見   empty   info   

這一節詳細的總結jQuery選取器。

 

一、基礎選取器

$(‘#info‘);  　　　　　 // 選擇id為info的元素，id為document中是唯一的，因此可以通過該選取器擷取唯一的指定元素
$(‘.infoClass‘);  　　 // 選擇class為infoClass的所有元素
$(‘div‘);  　　　　  // 選擇標籤名為div的所有的元素
$(‘*‘);   　　　　　　// 選擇所有標籤元素

 

二、基本過濾器

基本選取器擷取的元素集合，通過過濾器的篩選，使選擇更加精確。

$(‘.infoClass:first‘);    // 選擇class為infoClass的所有元素集合，並篩選集合中的第一個元素
$(‘.infoClass:last‘);     // 選擇class為infoClass的所有元素集合，並篩選集合中的最後一個元素
$(‘.infoClass:odd‘);      // 選擇class為infoClass的所有元素集合，並篩選集合中索引為奇數的元素，如1,3,5
$(‘.infoClass:even‘);     // 選擇class為infoClass的所有元素集合，並篩選集合中索引為偶數的元素，如0,2,4
$(‘.infoClass:eq(2)‘);    // 選擇class為infoClass的所有元素集合，並篩選集合中索引為2的元素
$(‘.infoClass.lt(2)‘);    // 選擇class為infoClass的所有元素集合，並篩選集合中索引小於2的元素集合
$(‘.infoClass.gt(2)‘);    // 選擇class為infoClass的所有元素集合，並篩選集合中索引大於2的元素集合

 

三、內容過濾器

jQery準備了內容過濾器用於對選擇的元素集合內容進行過濾。

統一名稱：

• 空元素：不包含任何後代元素或常值內容的元素，如<div></div>
• 非空元素：包含後代元素或者包含常值內容的元素

$(‘div:contains("info")‘);     // 選擇標籤為div的所有元素集合，並篩選集合中常值內容包含info欄位的元素
$(‘div:empty‘);                // 選擇標籤為div的所有元素集合，並篩選集合中所有空元素
$(‘div:parent‘);              // 選擇標籤為div的所有元素集合，並篩選集合中所有非空元素
$(‘div:has(p)‘);               // 選擇標籤為div的所有元素集合，並篩選集合中後代元素含有p標籤的元素

 

四、可視化過濾器

對於元素是否可見，jQuery也進行了處理。

$(‘div:visible‘);            // 選擇標籤為div的所有元素集合，並篩選集合中可見的元素
$(‘div:hidden‘);             // 選擇標籤為div的所有元素集合，並篩選集合中不可見的元素

 

五、屬性過濾器

不同元素之間，擁有不同的屬性參數，jQuery允許通過參數進行過濾。

$(‘input[placeholder]‘);               // 選擇所有標籤為input的元素集合，並篩選包含placeholder屬性的元素
$(‘input[placeholder="info"]‘);        // 選擇所有標籤為input的元素集合，並篩選placeholder屬性值為info的元素
$(‘input[placeholder^="info"]‘);       // 選擇所有標籤為input的元素集合，並篩選placeholder屬性值以info開頭的元素
$(‘input[placeholder$="tion"]‘);       // 選擇所有標籤為input的元素集合，並篩選placeholder屬性值以tion結尾的元素
$(‘input[placeholder*="mat"]‘);        // 選擇所有標籤為input的元素集合，並篩選placeholder屬性值中包含欄位mat的元素
$(‘input[id][placeholder*="mat"]‘);    // 選擇所有標籤為input的元素集合，並篩選包含id屬性並且placeholder屬性值中包含欄位mat的元素

 

六、子項目過濾器

這個比較容易混淆，進行對比總結。

<ul>  <li>John</li>  <li>Karl</li>  <li>Brandon</li></ul><ul>  <li>Glen</li>  <li>Tane</li>  <li>Ralph</li></ul>

$(‘ul li:first-child‘).css(‘background-color‘, ‘red‘);   // 選擇每一個ul標籤下的li元素集合中的第一個

$(‘ul li:first‘).css(‘background-color‘, ‘red‘);   // 選擇所有ul標籤下的li元素集合中的第一個

$(‘ul li:last-child‘);   // 選擇每一個ul標籤下的li元素集合中的最後一個

 

七、關係選取器

• 同級元素：即當前元素處於同一層級。
• 父級元素：即當前元素的直屬上層元素。
• 祖先元素：即當前元素的所有上層元素。
• 子級元素：即當前元素的直屬子層元素。
• 後代元素：即當前元素的所有子層元素。

$(‘form input‘);           // 選擇所有標籤為form的元素中，後代元素標籤為input的元素
$(‘form>input‘);           // 選擇所有標籤為form的元素中，子級元素標籤為input的元素
$(‘label+input‘);          // 選擇所有標籤為label的同級元素中，標籤為input的元素集合中的第一個
$(‘label~input‘);          // 選擇所有標籤為label的同級元素中，標籤為input的元素集合

 

八、表單選取器

方便表單元素的選擇。

$(‘:input‘);                // 選擇所有表單輸入元素，包括input，textarea，select
$(‘:text‘);                 // 選擇所有的type為text的input元素
$(‘:password‘);             // 選擇所有的type為password的input元素
$(‘:radio‘);                // 選擇所有的type為radio的input元素 
$(‘:checkbox‘);             // 選擇所有的type為checkbox的input元素 
$(‘:submit‘);               // 選擇所有的type為submit的input元素 
$(‘:image‘);                // 選擇所有的type為image的input元素 
$(‘:reset‘);                // 選擇所有的type為reset的input元素 
$(‘:button‘);               // 選擇所有的type為button的input元素 
$(‘:file‘);                 // 選擇所有的type為file的input元素 
$(‘:hidden‘);               // 選擇所有類型為hidden的input元素或表單的隱藏欄位 

表單元素過濾器

$(‘:enabled‘);                  // 選擇所有的可操作的表單元素 $(‘:disabled‘);                 // 選擇所有的不可操作的表單元素 $(‘:checked‘);                  // 選擇所有的被checked的表單元素 $(‘select option:selected‘);    // 選擇所有的select 的子項目中被selected的元素 

 

九、對比總結

為了方便記憶，將功能相關的選取器進行總結：

1. $(‘#id‘)與$(‘.calss‘)

$(‘#id‘);  　　　　　 // 根據id選擇元素$(‘.class‘);  　　   // 根據class選擇元素

 

2.$(‘div:first‘)與$(‘div:last‘)

$(‘div:first‘);     // 選擇div元素集合中的第一個  $(‘div:last‘);      // 選擇div元素集合中的最後一個

 

3.$(‘div:odd‘)與$(‘div:even‘)

$(‘div:odd‘);       // 選擇div元素集合中的奇數個元素  $(‘div:even‘);      // 選擇div元素集合中的偶數個元素

 

4.$(‘div:gt(i)‘)與$(‘div:lt(i)‘)

$(‘div:gt(i)‘);       // 選擇div元素集合中索引大於i的元素  $(‘div:lt(i)‘);       // 選擇div元素集合中索引小於i的元素

 

5.$(‘div:empty‘)與$(‘div:parent‘)

$(‘div:empty‘);        // 選擇div元素集合中空元素$(‘div:parent‘);       // 選擇div元素集合中非空元素

 

6.$(‘div:visible‘)與$(‘div:hidden‘)

$(‘div:visible‘);      // 選擇div元素集合中可見元素$(‘div:hidden‘);       // 選擇div元素集合中隱藏元素

 

7.$(‘ul li:first‘)與$(‘ul li:first-child‘)

$(‘ul li:first‘);             // 選擇所有ul後代元素li元素集合中的第一個
$(‘ul li:first-child‘);       // 選擇每個ul後代元素li元素集合中的第一個

 

8.$(‘:disable‘)與$(‘:enable‘)

$(‘:disable‘);             // 選擇所有可以操作的表單元素$(‘:enable‘);              // 選擇所有不可以操作的表單元素




[轉寄自http://www.cnblogs.com/Lands-ljk/p/6049740.html]

jQuery學習筆記（三）：選取器總結