快捷導(dǎo)航

jQuery學(xué)習(xí)筆記獲取jQuery對(duì)象

更新時(shí)間：2012年09月19日 21:12:47 作者：

為了將Web的結(jié)構(gòu)層和表現(xiàn)層、行為層徹底分離，就不應(yīng)該在HTML標(biāo)簽上直接定義樣式或事件等。這意味著要想設(shè)置頁(yè)面中的某個(gè)元素，就需要先把這個(gè)元素選擇出來(lái)，選擇器正是解決這個(gè)問(wèn)題的技術(shù)

使用jQuery選擇器選擇頁(yè)面元素，目的是為了生成jQuery對(duì)象，語(yǔ)法相當(dāng)簡(jiǎn)單：$(selector)。但值得注意的是，這是生成jQuery對(duì)象，不是DOM對(duì)象，因此$(selector).innerHTML以獲取元素內(nèi)部HTML代碼是錯(cuò)誤的，正確寫(xiě)法是$(selector).html()。同樣的，判斷一個(gè)DOM對(duì)象是否存在，不能夠?qū)懗蒳f($(selector))，而是if($(selector).length>0)。

　　當(dāng)然jQuery對(duì)象和DOM對(duì)象可以互轉(zhuǎn)換。從上面的例子也可以看出，jQuery對(duì)象可以視為是一個(gè)DOM對(duì)象數(shù)組，因此轉(zhuǎn)換成DOM對(duì)象可使用get(index)方法或者[index]取下標(biāo)；相反，DOM對(duì)象轉(zhuǎn)換為jQuery對(duì)象只需直接用$(document.getElementById(“id”))包裝一下就行了。

　　雖然取對(duì)象的方法很簡(jiǎn)單$(selector)，但是這個(gè)參數(shù)selector卻是種類(lèi)繁多。這里扼要說(shuō)明一下：

　　過(guò)濾選擇器：附在所有選擇器的后面，通過(guò)特定的過(guò)濾規(guī)則來(lái)篩選出一部分元素，如$(selector:first)。若單獨(dú)使用，$(:first)則等價(jià)于$(*:first)；

　　層次選擇器：通過(guò)DOM元素間層次關(guān)系來(lái)獲取特定元素，由兩個(gè)選擇器組合而成。選擇過(guò)程為先按照第一個(gè)選擇器選擇元素，然后根據(jù)符號(hào)確定后代元素或子元素或兄弟元素，最后在這些元素范圍內(nèi)按照第二個(gè)選擇器選取最后想要的元素；

　　下面就是各種選擇器的表格說(shuō)明- -這就打了我一上午，真蛋疼！

基本選擇器

選擇器	描述	返回
*	選取所有元素	集合元素
element	根據(jù)標(biāo)簽名選取元素	集合元素
#id	根據(jù)id屬性值選取元素	單個(gè)元素
.class	根據(jù)class屬性值選取元素	集合元素
selector1,selector2,…,selectorN	將每個(gè)選擇器選取的元素合并在一個(gè)結(jié)果，主要用于選取不同元素	集合元素

基本過(guò)濾選擇器

選擇器	描述	返回
:first	選取第一個(gè)元素	單個(gè)元素
:last	選取最后一個(gè)元素	單個(gè)元素
:even	選取索引值是偶數(shù)的所有元素，索引從0開(kāi)始	集合元素
:odd	選取索引值是奇數(shù)的所有元素，索引從0開(kāi)始	集合元素
:eq(index)	選取索引值等于index的元素，index從0開(kāi)始	單個(gè)元素
:gt(index)	選取索引值大于index的元素，index從0開(kāi)始	集合元素
:lt(index)	選取索引值小于index的元素，index從0開(kāi)始	集合元素
:not(selector)	選取匹配selector以外的元素	集合元素
:header	選取所有的標(biāo)題元素	集合元素
:animated	選取當(dāng)前正在執(zhí)行動(dòng)畫(huà)的所有元素	集合元素

子元素過(guò)濾選擇器

選擇器	描述	返回
:first-child	選取每個(gè)父元素的第一個(gè)子元素	集合元素
:last-child	選取每個(gè)父元素的最后一個(gè)子元素	集合元素
:only-child	如果某元素是父元素唯一的子元素，則將被選取	集合元素
:nth-child(odd)	選取每個(gè)父元素下索引值是奇數(shù)的子元素	集合元素
:nth-child(even)	選取每個(gè)父元素下索引值是偶數(shù)的子元素	集合元素
:nth-child(index)	選取每個(gè)父元素下索引值等于index的子元素	集合元素
:nth-child(equation)	選取每個(gè)父元素下索引值匹配equation的子元素	集合元素

內(nèi)容過(guò)濾選擇器

選擇器	描述	返回
:contains(text)	選取文本內(nèi)容為text的元素	集合元素
:has(selector)	選取含有后代元素為selector的元素	集合元素
:parent	選取含有后代元素或文本的元素	集合元素
:empty	選取不包含后代元素或文本的空元素	集合元素

可見(jiàn)性過(guò)濾選擇器

選擇器	描述	返回
:hidden	選取所有不可見(jiàn)的元素	集合元素
:visible	選取所有可見(jiàn)的元素	集合元素

屬性過(guò)濾選擇器

選擇器	描述	返回
[attr]	選取擁有attr屬性的元素	集合元素
[attr=value]	選取attr屬性值為value的元素	集合元素
[attr!=value]	選取attr屬性值不為value的元素	集合元素
[attr^=value]	選取attr屬性值以value開(kāi)始的元素	集合元素
[attr$=value]	選取attr屬性值以value結(jié)束的元素	集合元素
*[attr=value]**	選取attr屬性值含有value的元素	集合元素
[attr~=value]	選取attr屬性值用空格分隔的值中有一個(gè)為value的元素	集合元素
[selector1][selector2]…[selectorN]	選取滿足所有屬性過(guò)濾選擇器的元素	集合元素

層次選擇器

選擇器	描述	返回
selector1 selector2	從selector1的后代元素里選取selector2	集合元素
selector1>selector2	從selector1的子元素里選取selector2	集合元素
Selector1+selector2	從selector1后面的第一個(gè)兄弟元素里選取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	選取所有不可見(jiàn)的元素	集合元素

表單過(guò)濾選擇器

選擇器	描述	返回
:enable	選取所有可用表單元素	集合元素
:disable	選取所有不可用表單元素	集合元素
:checked	選取被選中的<input>元素（單選框、復(fù)選框）	集合元素
:selected	選取被選中的<option>元素	集合元素