jquery選擇器用法總結

2021-08-07 02:16:28 字數 1745 閱讀 9578

jquery最核心的是查詢功能,下面對jquery選擇器總結一下(版本是1.9)。

一、 基礎選擇器

(1)*號選擇器,獲取所有元素。例:$("*")。

(2)class選擇器。例:$(".classname")。

(3)id選擇器。例:$(「#id」)。

(4)多個選擇器的集合。 例:$("div, span, p, .classname, #id")。

二、層級選擇器

(1)根據父節點獲取直接子節點。例:$("ul>li")。

(2)根據祖先節點獲取子孫節點。例:$("ul li")。

(3)獲取直接相鄰元素。例:$("label+input") 。

(4)獲取同級元素。例:$("p~div")。

三、特性篩選

(1)獲取正在執行動畫效果的元素。例:$("div:animated")。

(2)在匹配的元素中選擇索引值為index的元素。例:$("td:eq(2)")。

(3)選擇索引值為偶數的元素。例:$("div:even")。

(4)選擇第乙個匹配的元素。例:$("div:first")。

(5)選擇大於索引值的元素。例:$("td:gt(2)")。

(6)獲取所有的標題元素。例:$(":header")。

(7)獲取指定語言的所有元素。例:$("div:lang(en-us)")。

(8)選擇最後乙個匹配的元素。例:$("div:last")。

(9)選擇匹配集合中小於指定索引值的元素。例:$("td:lt(4)")

。(10)選擇集合中除了指定元素的其他集合。例:$("td:not(#id)")。

(11)選擇索引值為奇數的元素。例:$("td:odd")。

(12)選擇根元素。例:$(":root")。

(13)選擇由文件uri的格式化識別碼表示的目標元素。例:$("p:target")。

三、內容篩選

(1)選擇包含指定文字的元素。例:$("div:contains('aaa')")。

(2)選擇沒有子元素的元素。例:$("td:empty")。

(3)選擇其中至少包含一種選擇器的元素。例:$("div:has(p)")。

(4)選擇含有子元素的元素。例:$("td:parent")。

四、可見性篩選

(1)選擇所有隱藏的元素。例:$("div:hidden")。

(2)選擇所有可見的元素。例:$("div:visible")。

五、根據屬性篩選

(1)選擇屬性值為指定字串或字串為字首。例:$("a[href|='aaa']")。

(2)選擇指定屬性值裡包含自定字串的元素。例:$("input[name*='aaa']")。

(3)選擇指定屬性用分割的值中包含乙個指定值的元素。例:$("input[name~='man]")。

(4)選擇指定屬性是以給定值結尾的元素。例:$("input[name$='letter']")。

(5)選擇指定屬性是給定值的元素。例:$("input[name='aaa']")。

(6)選擇指定屬性不存在或值不等於給定字串的元素。例:$("input[name!='aaa']")。

(7)選擇具有指定元素的值。例:$("div[id]")。

(8)選擇多個屬性匹配的元素。

六、子元素篩選

(1)選擇所有父元素下的第乙個子元素。例:$("div:first-child")。

(2)選擇所有父元素下的最後乙個子元素。例:$("div:last-child")。

jquery選擇器用法

1.基本選擇器 2.層次選擇器 2.1.sela selb 派生選擇器 父子關係 div span 在 div內部獲得全部 span 標籤,無需考慮層次 2.2.sela selb 子元素選擇器 父子關係 div span 在 div的內部獲得子級 span標籤 2.3.sela selb 兄弟關係...

選擇器用法

選擇器 idelement class selertor1,selector2 逗號 ancestor descendant 祖先元素的所有後代元素 parent child 父元素的所有子元素 prev next 所有緊接在prev元素後面的next元素 prev siblings 匹配prev元...

css的巢狀選擇器用法總結

css復合選擇器的使用規則 1 id巢狀class myid.myclass 2 乙個元素標籤使用多個class。important.warning 注意不要有空格 有空格表示分別適用於兩個class。3 id標籤內的class元素。myid myclass 4 元素標籤下的class。p mycl...