前文提到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...