當然jQuery對象和DOM對象可以互轉換。從上面的例子也可以看出,jQuery對象可以視為是一個DOM對象數組,因此轉換成DOM對象可使用get(index)方法或者[index]取下標;相反,DOM對象轉換為jQuery對象只需直接用$(document.getElementById(“id”))包裝一下就行了。
雖然取對象的方法很簡單$(selector),但是這個參數selector卻是種類繁多。這裡扼要說明一下:
過濾選擇器:附在所有選擇器的後面,通過特定的過濾規則來篩選出一部分元素,如$(selector:first)。若單獨使用,$(:first)則等價於$(*:first);
層次選擇器:通過DOM元素間層次關系來獲取特定元素,由兩個選擇器組合而成。選擇過程為先按照第一個選擇器選擇元素,然後根據符號確定後代元素或子元素或兄弟元素,最後在這些元素范圍內按照第二個選擇器選取最後想要的元素;
下面就是各種選擇器的表格說明- -這就打了我一上午,真蛋疼!
基本選擇器
選擇器
描述
返回
*
選取所有元素
集合元素
element
根據標簽名選取元素
集合元素
#id
根據id屬性值選取元素
單個元素
.class
根據class屬性值選取元素
集合元素
selector1,selector2,…,selectorN
將每個選擇器選取的元素合並在一個結果,主要用於選取不同元素
集合元素
基本過濾選擇器
選擇器
描述
返回
:first
選取第一個元素
單個元素
:last
選取最後一個元素
單個元素
:even
選取索引值是偶數的所有元素,索引從0開始
集合元素
:odd
選取索引值是奇數的所有元素,索引從0開始
集合元素
:eq(index)
選取索引值等於index的元素,index從0開始
單個元素
:gt(index)
選取索引值大於index的元素,index從0開始
集合元素
:lt(index)
選取索引值小於index的元素,index從0開始
集合元素
:not(selector)
選取匹配selector以外的元素
集合元素
:header
選取所有的標題元素
集合元素
:animated
選取當前正在執行動畫的所有元素
集合元素
子元素過濾選擇器
選擇器
描述
返回
:first-child
選取每個父元素的第一個子元素
集合元素
:last-child
選取每個父元素的最後一個子元素
集合元素
:only-child
如果某元素是父元素唯一的子元素,則將被選取
集合元素
:nth-child(odd)
選取每個父元素下索引值是奇數的子元素
集合元素
:nth-child(even)
選取每個父元素下索引值是偶數的子元素
集合元素
:nth-child(index)
選取每個父元素下索引值等於index的子元素
集合元素
:nth-child(equation)
選取每個父元素下索引值匹配equation的子元素
集合元素
內容過濾選擇器
選擇器
描述
返回
:contains(text)
選取文本內容為text的元素
集合元素
:has(selector)
選取含有後代元素為selector的元素
集合元素
:parent
選取含有後代元素或文本的元素
集合元素
:empty
選取不包含後代元素或文本的空元素
集合元素
可見性過濾選擇器
選擇器
描述
返回
:hidden
選取所有不可見的元素
集合元素
:visible
選取所有可見的元素
集合元素
屬性過濾選擇器
選擇器
描述
返回
[attr]
選取擁有attr屬性的元素
集合元素
[attr=value]
選取attr屬性值為value的元素
集合元素
[attr!=value]
選取attr屬性值不為value的元素
集合元素
[attr^=value]
選取attr屬性值以value開始的元素
集合元素
[attr$=value]
選取attr屬性值以value結束的元素
集合元素
[attr*=value]
選取attr屬性值含有value的元素
集合元素
[attr~=value]
選取attr屬性值用空格分隔的值中有一個為value的元素
集合元素
[selector1][selector2]…[selectorN]
選取滿足所有屬性過濾選擇器的元素
集合元素
層次選擇器
選擇器
描述
返回
selector1 selector2
從selector1的後代元素裡選取selector2
集合元素
selector1>selector2
從selector1的子元素裡選取selector2
集合元素
Selector1+selector2
從selector1後面的第一個兄弟元素裡選取selector2
集合元素
selector1~selector2
從selector1後面的所有兄弟元素裡選取selector2
集合元素
表單選擇器
選擇器
描述
返回
:input
選取<input><textarea><select><button>元素
集合元素
:text
選取符合[type=text]的<input>元素
集合元素
:password
選取符合[type=password]的<input>元素
集合元素
:radio
選取符合[type=radio]的<input>元素
集合元素
:checkbox
選取符合[type=checkbox]的<input>元素
集合元素
:image
選取符合[type=image]的<input>元素
集合元素
:file
選取符合[type=file]的<input>元素
集合元素
:button
選取符合[type=button]的<input>和<button>元素
集合元素
:submit
選取符合[type=submit]的<input><button>元素
集合元素
:reset
選取符合[type=reset]的<input><button>元素
集合元素
:hidden
選取所有不可見的元素
集合元素
表單過濾選擇器
選擇器
描述
返回
:enable
選取所有可用表單元素
集合元素
:disable
選取所有不可用表單元素
集合元素
:checked
選取被選中的<input>元素(單選框、復選框)
集合元素
:selected
選取被選中的<option>元素
集合元素