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

2022-02-07 16:32:47 字數 2800 閱讀 9819

前文提到jquery提供了豐富的內建方法來操作物件集,本文主要介紹jquery中的那些內建操作屬性和dom結構的方法。

從jquery1.6版開始,新增了prop方法來獲取和設定jquery物件的屬性,這裡的prop方法和attr方法究竟有什麼區別呢?

要弄懂這個問題,我們首先要區別property和attribute兩個概念。property主要是針對dom物件的,而attribute主要是針對html標籤的。這樣對prop和attr這兩個方法來說,它們的區別主要在如下幾個方面:

1.我們知道對於checkbox這個dom物件來說,它必然有個選擇狀態,且它的選擇狀態只有兩種,要麼是選中狀態,要麼是非選中狀態,所以不管什麼時候我們用prop方法獲取其checked值,都能獲得乙個確定的值,true或false,而對於checkbox的html表示來說,它可以簡單的表示為,這裡你可以不用對checked屬性賦值,這時,在用attr獲取checked值時,其值將是undefined.

2.對於某些html標籤屬性,在dom物件中將對應不同的屬性名,比如,其attribute名是class,但是其property名卻是classname.

3.用prop賦值將是針對其當前的狀態賦值,而對於某些屬性,attr則是賦予乙個初始值。這樣prop將永遠能動態的改變checkbox的狀態,而對某些瀏覽器來說,attr只能在checkbox被顯示在頁面上之前改變checked的初始狀態,而之後則再也無法改變checked的狀態。而且prop能永遠獲得checkbox的當前狀態,而不管checkbox的當前狀態如何,attr只能獲得初始狀態。

4.內建的dom property不能被移出,而attribute可以。

1.prop(name|name,value|name,function(index,oldprop))

2.attr(name|name,value|name,function(index,oldprop))

注意:盡量不要使用prop定義複雜的非內建的屬性。當獲取屬性值時,prop和attr都只能獲取物件集內第乙個元素的屬性。

3.removeprop(name)

4.removeattr(name)

注意,盡量不要使用屬性移除操作,而應該修改屬性值

1.html([htmlstr]|function(index,oldhtml))

獲取或設定物件集中物件的innerhtml

2.text([textstr]|function(index,oldtext))

獲取或設定物件集中物件的文字。當物件集中有多個物件時,獲取其文字,將把物件集中所有元素,其文字甚至是子孫節點的文字拼接在一起返回。

當設定文字時,若給定的文字串中含有html標籤,將被轉換。如$("li").text("this is a test.

");的結果是得到如下內容

<

li>

this is a test.

li>

3.val([value]|function(index,oldvalue))

獲取或設定checkbox,radio,select這類元素的值。

1.元素的插入

before(content[,content]|function(index))

將content元素插入物件集中物件的前面

after(content[,content]|function(index))

將content元素插入物件集中物件的後面

prepend(content[,content]|function(index))

將content元素插入物件集中物件的裡面,作為其第乙個子女

將content元素插入物件集中物件的裡面,作為其最後乙個子女

insertbefore(target)

將物件集中的物件都插入target元素前面

insertafter(target)

將物件集中的物件都插入target元素後面

insertafter(target)

將物件集中的物件都插入target元素裡面

prependto(target)

將物件集中的物件都插入target元素裡面,作為其第乙個子女

將物件集中的物件都插入target元素裡面,作為其最後乙個子女

2.元素的替換

replacewith(conten|function)

用content來替換物件集中物件

replaceall(target)

用物件集中所有物件來替換target元素,如果物件集中的物件在dom文件中,這種替換會使原有物件從原來的位置被移除。

3.元素的刪除

empty()

清空物件集中所有物件的子孫元素。

remove([selector])

刪除物件集中的所有物件及其子孫元素,若有selector,則只刪物件集中符合selector條件的物件及其子孫元素。

detach([selector])

功能和remove一樣,只是detach會將被刪的物件返回,如果你還需要用到這些物件則用detach。

4.其他操作

clone([withdataandevents] [,deepwithdataandevents])

複製物件集中的物件。

wrap(element|function(index))

用某元素將物件集中的物件分別包含起來。

unwrap()

將物件集中物件的父元素刪除。

wrapall(element)

用某元素將物件集中的所有物件包含起來

wrapinner(element|function(index))

將某元素分別放入物件集中的各物件中。

JQuery知識快覽之三 JQuery物件集

jquery物件,和dom物件是兩個不同的東西,jquery物件可以是dom物件的封裝,但是jquery物件不只是dom物件的封裝,它還可以代表其自定義的物件。為什麼要獲取jquery物件而不直接使用dom物件呢?因為jquery物件對dom物件的操作進行了很好的封裝,你可以方便的用jquery物件...

JQuery知識快覽之四 樣式

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

JQuery之五 操作元素內容

前面已經介紹了如何操作元素的properties attributes 以及 css styles,這節來看看如何操作元素的內容。獲取或替換html及text內容 1.使用html 方法 1 不帶引數的html 2 帶引數的html value 2.使用text 方法 1 不帶引數的text 2 t...