DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery學習筆記 獲取jQuery對象
jQuery學習筆記 獲取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>元素

集合元素

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved