jquery學習之選擇器與過濾器

2021-08-28 05:20:25 字數 1694 閱讀 6509

普遍選擇器   *   所有的

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 獲取每個父元素中的每種型別的最後乙個元素

Jquery過濾選擇器之基本過濾選擇器

過濾選擇器主要是通過特定的過濾規則來篩選出所需要的dom元素,過濾規則與css中的偽類選擇器語法相同,即選擇器都可以以乙個冒號 開頭。按照不同的過濾規則,過濾選擇器可以分為基本過濾 內容過濾 可見性過濾 屬性過濾 子元素過濾和表單物件屬性過濾選擇器。首先介紹基本過濾選擇器 選擇器描述 返回例項 fi...

JQuery 學習 過濾選擇器

第一 基本過濾器 過濾名jquery語法 說明返回 first li first 選取第乙個元素 單個元素 last li last 選取最後乙個元素 單個元素 even li even 選取索引 0開始 是偶數的所有元素 集合元素 not selector li not red 選取class不是...

jquery選擇器之層級過濾選擇器

ancestor descendant 選取parent元素後所有的child元素 parent child 選取parent元素後所有的直屬child元素,何謂 直屬 也就是第一級的意思了 prev next prev和next是兩個同級別的元素.選中在prev元素後面的next元素 prev s...