jQuery學習筆記 擷取jQuery對象

使用jQuery選取器選擇頁面元素，目的是為了產生jQuery對象，文法相當簡單：$(selector)。但值得注意的是，這是產生jQuery對象，不是DOM對象，因此$(selector).innerHTML以擷取元素內部HTML代碼是錯誤的，正確寫法是$(selector).html()。同樣的，判斷一個DOM對象是否存在，不能夠寫成if($(selector))，而是if($(selector).length>0)。

　　當然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>元素	集合元素