jquery之選擇器

2021-10-02 19:33:30 字數 4499 閱讀 5786

id

class元素*

復合元素選取

console.log

($(".mydiv"))

;console.log

($("*"))

; //獲取所有包括html, head, meta, title, style, script, script, body, div等所有

console.log

($("#mydiv,p"))

;

jquery物件如何轉化為js物件

console.log($("#mydiv")); // init [div#mydiv, context: document, selector: "#mydiv"] console.log($("#mydiv")[0]); // lorem

隱式迭代器

jquery物件返回的是乙個集合,直接使用,jquery**可以進行隱式迭代器(不用再迴圈遍歷,因為已經預設遍歷了內部dom)

ancestor descendant

parent > child

prev + next

prev ~ siblings

console.log

($("ul li"))

; //所有子代元素(含孫子元素)

console.log

($("ul>li"))

; //僅包含子元素

console.log

($(".two+li"))

; // +代表只有下乙個同級元素

console.log

($(".two~li"))

; // ~代表之後的所有元素

:first

:not(selector)

:even

:odd

:eq(index)

:gt(index)

:lang1.9+

:last

:lt(index)

:header

:animated

:focus

:root 1.9+

:target 1.9+

console.log

($("ul>li:first"))

;console.log

($("ul>li:last"))

;console.log

($("ul>li:not(.two)"))

;console.log

($("ul>li:even"))

; //索引的偶數獲取

console.log

($("ul>li:odd"))

; //奇

console.log

($("ul>li:eq(1)"))

; //按照當前索引來獲取

console.log

($("ul>li:gt(1)"))

; //獲取比匹配元素索引大的所有元素

console.log

($("ul>li:lt(1)"))

; //獲取比匹配元素索引小的所有元素

console.log

($(":header"))

; //獲取所有的h標籤

console.log

($(":root"))

; //直接是html init [html, prevobject

:init

(1), context

: document, selector

:":root"]

:contains(text)

:empty

:has(selector)

:parent

console.log

($("div:contains('是')"))

;//包含某個內容的元素

console.log

($("div:empty"))

; //元素是空(也不能有空格,回車)

console.log

($("ul:has(.two)"))

; //獲取包含某個元素的父元素

console.log

($("li:parent"))

; //匹配含有子元素或者文字的元素

:hidden

:visible

console.log

($(".myp:visible"))

;console.log

($(".myp:hidden"))

;

[attribute]

[attribute=value]

[attribute!=value]

[attribute^=value] 以什麼開頭

[attribute$=value] 以什麼結尾

[attribute*=value] 包含什麼

[attrsel1][attrsel2][attrseln]

console.log

($("div[id]"))

;console.log

($("div[id][class]"))

;//需要同時滿足多個條件時使用。

console.log

($("div[id='mydiv'][class='mydiv']"))

;console.log

($("div[id!='mydiv']"))

;console.log

($("div[id^='m']"))

;//獲取的屬性值以什麼開頭

console.log

($("div[id$='v']"))

;//獲取的屬性值以什麼結尾

console.log

($("div[id*='d']"))

;//獲取的屬性值包含什麼

:first-child

:first-of-type1.9+

:last-child

:last-of-type1.9+

:nth-child

:nth-last-child()1.9+

:nth-last-of-type()1.9+

:nth-of-type()1.9+

:only-child

:only-of-type1.9+

first-child 與 first-of-type

前者是為每個父級元素匹配第乙個子元素(可含多個)

後者是取同型別元素的第乙個(可含多個)

console.log

($("ul>li:first-child"))

; //為每個父級元素匹配第乙個子元素(可含多個)

console.log

($("span:first-of-type"))

; //取同型別元素的第乙個(可含多個)

console.log

($("li:nth-child(3)"))

; //從1開始的第幾個元素

console.log

($("li:nth-last-of-type(3)"))

; //從後往前

console.log

($("ul>li:only-child"))

;//匹配的元素必須是父元素的唯一子元素

:input 查詢所有的input元素

:text

:password

:radio

:checkbox

:submit

:image

:reset

:button

:file

console.log

($("input:checked"))

;console.log

($("input:file"))

;

:enabled

:disabled

:checked

:selected

console.log

($("input:disabled"))

;console.log

($("input:enabled"))

;console.log

($("input:checked"))

;//獲取單選、多選框中被選擇的元素

console.log

($("select option:selected"))

;//匹配select被選擇的下拉的option

低版本沒有

$.escapeselector(selector)3.0+

給class類名稱有.的進行轉義編碼,使他能正常顯示為.classname

jQuery選擇器之全選擇器( 選擇器)

在css中,經常會在第一行寫下這樣一段樣式 萬用字元 意味著給所有的元素設定預設的邊距。jquery中我們也可以通過傳遞 選擇器來選中文件頁面中的元素 描述 拋開jquery,如果要獲取文件中所有的元素,通過document.getelementsbytagname 中傳遞 同樣可以獲取到 不難發現...

jQuery選擇器之全選擇器(選擇器)

jquery選擇器之全選擇器 選擇器 在css中,經常會在第一行寫下這樣一段樣式 萬用字元 意味著給所有的元素設定預設的邊距。jquery中我們也可以通過傳遞 選擇器來選中文件頁面中的元素 描述 拋開jquery,如果要獲取文件中所有的元素,通過document.getelementsbytagna...

jquery選擇器之層次選擇器

層次選擇器中包括 1 ancestor descendant 使用 form input 的形式選中form中的所有input元素.即ancestor 祖先 為from,descendant 子孫 為input.例 bgred div 選擇css類為bgred的元素中的搜有元素。2 parent c...