jquery學習之選擇器與過濾器
阿新 • • 發佈:2019-01-10
基本選擇器
普遍選擇器 * 所有的
id選擇器 #id
類選擇器 .class
標籤選擇器 標籤名
群組選擇器 #one,.two 取並集
複合選擇器 div#one 取交集
子代或後代選擇器
子代選擇器 > 直接孩子
後代選擇器 空格 所有的後代
body * body中的所有的後代元素
兄弟選擇器
下一個兄弟節點 +
之後所有的兄弟節點 ~
過濾器
**在選擇器之後使用** **基本過濾器** :first 第一個元素,例:$('div:first'); body元素中的第一個div :last 最後一個元素,列:$('div:last'); body元素中的最後一個div :eq(index) 索引為index的 :lt(index) 索引小於index的 :gt(index) 索引大於index的 :even 索引為偶數的 :odd 索引為奇數的 :not(選擇器/過濾器) 選不為選擇器/過濾器的 :header 選擇h1~h6標題 這裡注意是這樣用$('div :header'); div後有空格,意思為選擇div的後代元素中為h1~h6標題的 ,若沒有空格,那麼選中的是div **內容過濾器** :contains(e) $(‘選擇器:contains(e)’) 選擇器中文字包含e的 :empty 選擇沒有文字也沒有子元素的 :paretn 選擇有內容或子元素的 :has(選擇器) 選擇有選擇器的 $('div:has("p")') **可見性過濾器** :hidden 選擇不佔據螢幕空間的元素 body體中不佔據空間的:display:none; input type="hidden" :visible 選擇佔據螢幕空間的元素 body體中在頁面顯示出來的都是 visibility:hidden; opacity:0; **屬性過濾器** [attr] 選擇有某個屬性名的 [attr=val] 選擇有屬性名且屬性值為val的 [attr^=val] 選擇有屬性名且屬性值以val開頭的 [attr$=val] 選擇有屬性名且屬性值以val結束的 [attr*=val] 選擇有屬性名且屬性值包含val的 [attr!=val] 選擇沒有attr屬性的或者有attr屬性名但不等於val值的 **子代過濾器** div :first-child 獲取每個div父元素的第一個兒子 div :last-child 獲取每個div父元素最後一個兒子 div :nth-child(index) 獲取每個父元素中的第幾個孩子節點 index從1開始 div :only-child 獲取每個父元素中的獨生子元素 div :first-of-type 獲取每個父元素中的每種型別的第一個元素 div :last-oftype 獲取每個父元素中的每種型別的最後一個元素