JQuery知識快覽之三 JQuery物件集

2022-02-07 16:32:49 字數 3405 閱讀 2155

jquery物件,和dom物件是兩個不同的東西,jquery物件可以是dom物件的封裝,但是jquery物件不只是dom物件的封裝,它還可以代表其自定義的物件。為什麼要獲取jquery物件而不直接使用dom物件呢?因為jquery物件對dom物件的操作進行了很好的封裝,你可以方便的用jquery物件的方法來操作內部封裝的dom物件,而不用操心瀏覽器相容性的問題。

jquery函式,簡寫為$可以有多種不同的用法

1.$(dom element)

將乙個dom element封裝成jquery物件,前面講到的$(this)就是這種用法。

2.$(dom element array)

3.$(jquery object)

對原有jquery物件的轉殖

4.$(object)

var foo = ;

var $foo = $( foo );

5.$()

建乙個空jquery物件集

6.$(selector[,context])

selector就是前文提過的選擇器,我們可以將這個選擇器用在已有的dom物件,document或者乙個jquery物件集上。像$(selector,context)這樣使用,效果等同於$(context).find(selector)

7.jquery( html [, ownerdocument ] )

解析html,並將之加入ownerdocument中,需要注意的是,當html裡面包含多個節點時,將會為了能將之加入ownerdocument做一定的處理。比如用先包裝一下,去掉直接的文字,去掉,標籤等等。

8.jquery( html, attributes )

為乙個簡單的元素提供屬性。

$("<

a>

a>

", }

我們構造了乙個初始的物件集後還可以對物件集做各種的管理,如合併物件集,過濾物件集等。

1.合併物件集

add(selector|elements|html|jquery object)

add(selector, context)

做兩個物件集的和,結果物件集的順序按照其在dom中的順序。

addback()

1.8版新增,替代andself功能。

將這一次物件集中的物件和上一次物件集中的物件合併在一起。

2.獲取子物件集

first()

獲取物件集中第乙個元素

last()

獲取物件集中最後乙個元素

eq(index)

獲取物件集中給定位置的元素,從0開始計數,若為負,則從後數起。

slice(start [,end])

獲取物件集中給定範圍內的元素,從0開始計數,若為負,則從後數起。

3.過濾物件集

filter(selector|element|function(index)|jquery object)

從物件集中留下滿足某條件的節點

not(selector|elements|function(index)|jquery object)

從物件集裡將滿足某條件的節點去掉。

4.得到物件集的子元素或子孫元素

contents()

獲取物件集中物件的所有文字和節點子元素。

children([selector])

獲取物件集中物件的所有節點子元素。如果有選擇器則子元素需要滿足選擇器的條件,否則不被獲取

find(selector|element|jquery object)

查詢物件集的子孫節點中所有滿足條件的元素。後面2種引數形式是1.6版新增的。

has(selector|contained element)

獲取物件集中所有擁有滿足某條件的子孫節點的物件

5.得到物件集的父元素或祖先元素

parent([selector])

獲取物件集中物件的所有節點的父元素,如果有選擇器則父元素需要滿足選擇器的條件,否則不被獲取

parents([selector])

獲取物件集中物件的所有節點的祖先元素,如果有選擇器則祖先元素需要滿足選擇器的條件,否則不被獲取

parentsuntil[selector [,filter]|element [,filter]]

對物件集中的每個物件,依次獲取其祖先元素,直到有個祖先元素滿足選擇器的條件。

offsetparent()

對物件集中的每個物件,依次獲取其祖先元素,直到有個祖先元素具有relative,absolute或fixed位置。

closest(selector [,context]|element|jquery object)

對物件集中的所有物件從該物件開始依次向其父節點查詢滿足條件的元素,直到找到乙個或者查詢到根節點。後面2種引數形式是1.6版新增的。

6.得到物件集的鄰居

prev[selector]

獲取物件集中每個物件的前面乙個元素,如果帶選擇器的話,則在前面乙個元素符合條件時獲取,否則不獲取。

next[selector]

獲取物件集中每個物件的後面乙個元素,如果帶選擇器的話,則在前面乙個元素符合條件時獲取,否則不獲取。

prevall[selector]

獲取物件集中每個物件的前面所有滿足選擇器條件的元素。

nextall[selector]

獲取物件集中每個物件的後面所有滿足選擇器條件的元素。

prevuntil[selector [,filter]|element [,filter]]

依次獲取物件集中每個物件前面的元素,直到有個元素滿足選擇器的條件。

nextuntil[selector [,filter]|element [,filter]]

依次獲取物件集中每個物件後面的元素,直到有個元素滿足選擇器的條件。

siblings([selector])

獲取物件集中每個物件的所有滿足選擇器條件的鄰居元素。

7.其他

end()

返回到上一次操作後的結果物件集。

獲取了物件集後我們可以對物件集進行各種的操作,比如$( "li" ).css( "background-color", "red" );設定$("li")物件集中所有物件的背景顏色。jquery提供了大量內建的方法可用於物件集,另外,我們也可以通過下面的函式定製對物件集的操作:

is(selector|element|function(index)|jquery object)

測試物件集中是否有滿足某條件的元素,後面3種引數形式是1.6版新增的。

map(callback(index,  element))

對物件集中的所有物件執行給定的操作返回乙個結果。這個函式通常和get()一起使用來獲取乙個進行給定操作後的結果集。

each(function(index,  element)

對物件集中的所有物件執行給定的操作.

JQuery知識快覽之五 操作屬性和結構

前文提到jquery提供了豐富的內建方法來操作物件集,本文主要介紹jquery中的那些內建操作屬性和dom結構的方法。從jquery1.6版開始,新增了prop方法來獲取和設定jquery物件的屬性,這裡的prop方法和attr方法究竟有什麼區別呢?要弄懂這個問題,我們首先要區別property和a...

JQuery知識快覽之四 樣式

前面我們獲取了物件集,本文介紹怎麼控制物件集的樣式 在乙個html頁面中,我們有兩種方式來控制乙個物件的樣式,用html attribute控制,或者用css類來控制,這兩種方法雖然都能控制物件的樣式,但是通過css來控制物件的樣式,將內容和呈現分離開來是更為推薦的一種方法。jquery提供了豐富的...

spring知識之三

條件化的bean 假設你希望乙個或多個bean只有在應用的類路徑下包含特定的庫時才建立。或者我們希望某個bean只有當另外某個特定的bean也宣告了之後才會建立。我們還可能要求只有某個特定的環境變數設定之後,才會建立某個bean。在spring 4之前,很難實現這種級別的條件化配置,但是spring...