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

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

 

1、基礎選擇器

$('#info');  　　　　　 // 選擇id爲info的元素，id爲document中是惟一的，所以能夠經過該選擇器獲取惟一的指定元素
$('.infoClass');  　　 // 選擇class爲infoClass的全部元素
$('div');  　　　　  // 選擇標籤名爲div的全部的元素
$('*');   　　　　　　// 選擇全部標籤元素

 

2、基本過濾器

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

$('.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的元素集合

 

3、內容過濾器

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

統一名稱：

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

$('div:contains("info")');     // 選擇標籤爲div的全部元素集合，並篩選集合中文本內容包含info字段的元素
$('div:empty');                // 選擇標籤爲div的全部元素集合，並篩選集合中全部空元素
$('div:parent');              // 選擇標籤爲div的全部元素集合，並篩選集合中全部非空元素
$('div:has(p)');               // 選擇標籤爲div的全部元素集合，並篩選集合中後代元素含有p標籤的元素

 

4、可視化過濾器

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

$('div:visible');            // 選擇標籤爲div的全部元素集合，並篩選集合中可見的元素
$('div:hidden');             // 選擇標籤爲div的全部元素集合，並篩選集合中不可見的元素

 

5、屬性過濾器

不一樣元素之間，擁有不一樣的屬性參數，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的元素

 

6、子元素過濾器

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

<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元素集合中的最後一個

 

7、關係選擇器

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

$('form input');           // 選擇全部標籤爲form的元素中，後代元素標籤爲input的元素
$('form>input');           // 選擇全部標籤爲form的元素中，子級元素標籤爲input的元素
$('label+input');          // 選擇全部標籤爲label的同級元素中，標籤爲input的元素集合中的第一個
$('label~input');          // 選擇全部標籤爲label的同級元素中，標籤爲input的元素集合

 

8、表單選擇器

方便表單元素的選擇。

$(':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的元素 

 

9、對比總結

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

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');              // 選擇全部不能夠操做的表單元素