id
class元素*
復合元素選取
jquery物件如何轉化為js物件console.log
($(".mydiv"))
;console.log
($("*"))
; //獲取所有包括html, head, meta, title, style, script, script, body, div等所有
console.log
($("#mydiv,p"))
;
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
:firstconsole.log
($("ul li"))
; //所有子代元素(含孫子元素)
console.log
($("ul>li"))
; //僅包含子元素
console.log
($(".two+li"))
; // +代表只有下乙個同級元素
console.log
($(".two~li"))
; // ~代表之後的所有元素
:not(selector)
:even
:odd
:eq(index)
:gt(index)
:lang1.9+
:last
:lt(index)
:header
:animated
:focus
:root 1.9+
:target 1.9+
:contains(text)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"]
:empty
:has(selector)
:parent
:hiddenconsole.log
($("div:contains('是')"))
;//包含某個內容的元素
console.log
($("div:empty"))
; //元素是空(也不能有空格,回車)
console.log
($("ul:has(.two)"))
; //獲取包含某個元素的父元素
console.log
($("li:parent"))
; //匹配含有子元素或者文字的元素
:visible
[attribute]console.log
($(".myp:visible"))
;console.log
($(".myp:hidden"))
;
[attribute=value]
[attribute!=value]
[attribute^=value] 以什麼開頭
[attribute$=value] 以什麼結尾
[attribute*=value] 包含什麼
[attrsel1][attrsel2][attrseln]
:first-childconsole.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-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
前者是為每個父級元素匹配第乙個子元素(可含多個)
後者是取同型別元素的第乙個(可含多個)
:input 查詢所有的input元素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"))
;//匹配的元素必須是父元素的唯一子元素
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
:enabledconsole.log
($("input:checked"))
;console.log
($("input:file"))
;
: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...