jQuery的各類選擇器

基本選擇器

• 通配符選擇器：匹配全部

console.log($('*'));

• 組合選擇器：多個選擇器之間使用逗號分隔(並集)

console.log($('#d1,.cls'));

• 組合選擇器：多個選擇器之間沒有任何分隔(交集)

console.log($('#d2.cls'));

層級選擇器

• 指定元素的下一個相鄰兄弟元素

console.log($('#d1+div'));

• 指定元素的後面全部的兄弟元素

console.log($('#d1~div'));

• siblings()方法：獲取指定元素全部的兄弟元素(前面+後面)

console.log($('#d1').siblings('div'));

基本過濾選擇器

• 在指定範圍匹配的元素中進行篩選

//找到div裏第一個元素
console.log($('div:first'));
//找到div裏最後一個元素
console.log($('div:last'));

• 索引值爲偶數時：奇數元素；索引值奇數時：偶數元素

//指定div中的偶數元素
console.log($('div:even'));
//指定div中的奇數元素
console.log($('div:odd'));

• :eq(index):index表示索引值

//指定div元素索引值爲0的元素
console.log($('div:eq(0)'));
//指定div元素索引值大於2的元素
console.log($('div:gt(2)'));
//指定div元素索引值小於2的元素
console.log($('div.lt(2)'));

• :header:匹配h1~h6元素
• :animated: 只能匹配由jQuery實現的動畫
• :not:不是not裏面的元素

內容過濾選擇器

• :contains:元素只要包含此文本便可
• :empty:匹配全部不包含子元素或者文本的空元素
• :parent：匹配含有子元素或者文本的元素
• :has()：匹配含有選擇器所匹配的元素的元素

可見性過濾選擇器

• :hidden選擇器

不能匹配css樣式屬性visibility設置爲hidden的隱藏元素
還能匹配HTML頁面中不作任何顯示效果的元素
儘可能肯定元素類型或指定範圍

• :visible選擇器

匹配CSS樣式屬性visibility設置爲hidden的隱藏元素
當visibility設置爲hidden時的元素，依舊佔有頁面空間
還能匹配HTML頁面中HTML和body元素

屬性過濾選擇器

• [attr]過濾選擇器：匹配包含給定屬性的元素
• [attr=value]過濾選擇器：匹配給定的屬性是某個特定值的元素
• [attr!=value]過濾選擇器：匹配全部不含有指定的屬性，或者屬性不等於特定值的元素
• [attr^=value]過濾選擇器：匹配給定的屬性是以某些值開始的元素
• [attr$=value]過濾選擇器：匹配給定的屬性是以某些值結尾的元素
• [attr*=value]過濾選擇器：匹配給定的屬性是以包含某些值的元素
• 組合屬性過濾選擇器：匹配元素須要同時知足多個屬性過濾選擇器

子元素過濾選擇器

• :nth-child()過濾選擇器：匹配其父元素下的第N個子或奇偶元素，它的index位置是從1開始，表示第幾個
• :first-child過濾選擇器：匹配第一個子元素
• :last-child過濾選擇器：匹配最後一個子元素
• :only-child過濾選擇器：若是某個元素是父元素中惟一的子元素，那將會被匹配

表單選擇器

• :enabled過濾選擇器：匹配全部可用元素
• :disabled過濾選擇器：匹配全部不可用的元素
• :checked過濾選擇器：匹配全部選中的被選中元素(複選框、單選框)
• :selected過濾選擇器：匹配全部選中的<option>元素

因爲jQuery對象是類數組對象，即便匹配的元素只有一個，返回的結果依舊是類數組對象