這一節詳細的總結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'); // 選擇所有不可以操作的表單元素