JQuery中attr 和prop 用法和區別

2021-08-07 21:28:23 字數 4523 閱讀 7893

jquery中用attr()方法來獲取和設定元素屬性,attr是attribute(屬性)的縮寫,在jquery dom操作中會經常用到attr(),attr()有4個表示式。

1. attr(屬性名)//獲取屬性的值(取得第乙個匹配元素的屬性值。通過這個方法可以方便地從第乙個匹配元素中獲取乙個屬性的值。如果元素沒有相應屬性,則返回 undefined )

2. attr(屬性名, 屬性值)//設定屬性的值 (為所有匹配的元素設定乙個屬性值。)

注意:如果標籤中已經存在了指定的屬性(屬性名),則給該屬性賦值,若不存在,則則該屬性新增乙個該屬性

3. attr(屬性名,函式值)//設定屬性的函式值 (為所有匹配的元素設定乙個計算的屬性值。不提供值,而是提供乙個函式,由這個函式計算的值作為屬性值。)

4.attr(properties)//給指定元素設定多個屬性值,即:。(這是一種在所有匹配元素中批量設定很多屬性的最佳方式。 注意,如果你要設定物件的class屬性,你必須使用』classname』 作為屬性名。或者你可以直接使用』class』或者』id』。)

prop()函式用於設定或返回當前jquery物件所匹配的元素的屬性值。

該函式屬於jquery物件(例項)。如果需要刪除dom元素的屬性,請使用removeprop()函式。

語法

jquery 1.6 新增該函式。prop()函式有以下兩種用法:

1.用法一:

jqueryobject.prop( propertyname [, value ] )

設定或返回指定屬性propertyname的值。如果指定了value引數,則表示設定屬性propertyname的值為value;如果沒有指定value引數,則表示返回屬性propertyname的值。

引數value還可以是函式,prop()將根據匹配的所有元素遍歷執行該函式,函式中的this指標將指向對應的dom元素。prop()還會為函式傳入兩個引數:第乙個引數就是該元素在匹配元素中的索引,第二個引數就是該元素propertyname屬性當前的值。函式的返回值就是為該元素的propertyname屬性設定的值。

2.用法二:

jqueryobject.prop( object )

以物件形式同時設定任意多個屬性的值。物件object的每個屬性對應propertyname,屬性的值對應value。

注意:prop()函式的所有」設定屬性」操作針對的是當前jquery物件所匹配的每乙個元素;所有」讀取屬性」的操作只針對第乙個匹配的元素。

引數請根據前面語法部分所定義的引數名稱查詢對應的引數。

引數 描述

propertyname——– string型別指定的屬性名稱。

value—– 可選/object/function型別指定的屬性值,或返回屬性值的函式。

object—- object型別指定的物件,用於封裝多個鍵值對,同時設定多項屬性。

引數value可以是包括物件和陣列在內的任意型別。

返回值

prop()函式的返回值是任意型別,返回值的型別取決於當前prop()函式執行的是」設定屬性」操作還是」讀取屬性」操作。

如果prop()函式執行的是」設定屬性」操作,則返回當前jquery物件本身;如果是」讀取屬性」操作,則返回讀取到的屬性值。

如果當前jquery物件匹配多個元素,返回屬性值時,prop()函式只以其中第乙個匹配的元素為準。如果該元素沒有指定的屬性,則返回undefined。

prop()和attr()的主要區別:prop()函式針對的是dom元素(js element物件)的屬性,attr()函式針對的是dom元素所對應的文件節點的屬性。詳情請檢視jquery函式attr()和prop()的區別。

注意事項

1、如果通過prop()函式更改和元素的type屬性,在多數瀏覽器上將會丟擲乙個錯誤,因為該屬性一般不允許在後期更改。

2、如果使用prop()函式操作表單元素的checked、selected、disabled等屬性,如果該元素被選中(或禁用),則返回true,否則(意即html中沒有該屬性)返回false。

3、prop()函式還可以設定或返回dom元素的element物件上的某些屬性,例如:tagname、selectedindex、nodename、nodetype、ownerdocument、defaultchecked和defaultselected等屬性。

4、在ie9及更早版本中,如果使用prop()函式設定的屬性值不是乙個簡單的原始值(string、number、boolean),並且在對應的dom元素被銷毀之前,該屬性沒有被移除,則可能會導致記憶體洩漏問題。如果你只是為了儲存資料,建議你使用data()函式,以避免記憶體洩漏問題。

一、自定義html標籤屬性

對於html檔案中的html標籤,可以自定義屬性,如:刪除

上面的標籤a並沒有action屬性(也就是說w3c定義中沒有給a標籤定義action屬性),但有href ,id 屬性。

但我們一樣可以給它加自己需要的屬性,如這裡的action。這個在很多場合下還是有用的,特別是當需要給標籤來設定某些特性時。

我們看到很多的框架,如bootstrap都給html標籤定了各種自定義屬性。

二、獲取html標籤的屬性

方法一:利用dom物件來獲取

如: $(「#link1」)[0].id ,

或 $(「#link1」)[0][「id」]

注意:對於自定義屬性,無法利用dom物件來獲取,比如 $(「#link1」)[0].action 是獲取不到值的。可以利用下面介紹的attr方法來獲取。

方法二:利用jquery物件的 attr 或 prop方法

jquery的prop方法是jquery1.6版本引入的,那什麼時候使用 prop方法,什麼時候使用attr方法呢?

這個還真有些區別。經過實際的測試,發現如下使用比較好。

對於標籤的固有屬性(也就是說w3c給該標籤定義的屬性),建議用prop方法。 如 var id = $(「#link1」).prop(「id」); 獲取標籤a的id屬性。

對於上述在html檔案中靜態新增的自定義屬性,建議用attr方法。如 var action = $(「#link1」).attr(「action」); 獲取標籤a的自定義action屬性。因為經過測試發現,對於這種自定義屬性,呼叫prop方法無法獲取。如果想深入研究下,建議看下jquery的源**就清楚了。

三、動態設定html標籤的屬性

我們知道,html檔案的每個標籤,在瀏覽器記憶體中實際對應乙個dom物件。html頁面開發中的js**實際就是對dom物件的處理。

這樣我們可以利用js**動態的來給dom物件設定屬性。

也有兩種方法:

第一種方法時,獲取dom物件(注意不是jquery物件),如同給普通的js物件一樣,給其新增或設定屬性。

第二種方法,呼叫jquery物件的方法,給其對應的dom物件新增和設定屬性。

經過測試我們發現,如果要動態新增乙個新的屬性,需要利用prop方法,使用attr方法是無效的。如 $(「#link1」).prop(「mydata」,」demo」)

如果該屬性是通過在html檔案中靜態新增的自定義的屬性,則修改其值時只能用attr方法。

如果該標籤已經有某個靜態新增的自定義的屬性,這時用prop方法新增乙個屬性,則不會影響原來的靜態屬性。但原來的靜態屬性只能用attr方法去讀寫,而用prop方法新增的屬性只能用prop方法去讀寫。

可以看出,attr方法和prop方法還是有很多區別的。

對於自定義屬性,靜態設定和動態設定有較大差別,動態新增自定義屬性只能用prop方法(包括新增、讀取和修改),而靜態自定義屬性後續的讀取和修改只能用attr方法。並且靜態設定的自定義屬性和動態設定的自定義屬性是互不干涉的。對於標籤的固定屬性,讀寫都應該用prop方法。

四、動態刪除html元素的屬性

對於靜態自定義的html屬性,可以利用jquery物件的 removeattr 方法來刪除屬性,如$(「#link1」).removeattr(「action」); 就刪除了action自定義屬性。

如果是利用prop方法動態新增的自定義屬性,則需要呼叫jquery的 removeprop方法來刪除。

對於固定屬性,則也需要呼叫jquery的 removeprop方法來刪除。

五、小結

經過上面的介紹可以看出。 attr和prop方法是有區別的,並且容易混淆。這裡總結下:

1、如果沒有靜態自定義的屬性。則不管是否會動態設定固定屬性或動態屬性。都應該用 prop方法,刪除也用removeprop方法。

2、對於靜態自定義的屬性,則用attr方法和removeattr來操作。

如果同時有靜態自定義屬性和動態自定義屬性,則使用時要小心區別。並且要注意的是,隨著jquery版本的區別,prop和attr方法的含義也可能會有變化。

jQuery中prop 和 attr 區別

prop 方法是在jquery1.6中新新增的。我們知道 attr checked 獲取checkbox的checked屬性時選中的時候可以取到值,值為 checked 但沒選中獲取值就是undefined。而現在使用prop方法獲取屬性則統一返回true和false。那麼具體的用法是什麼,以下是個...

jquery中attr 方法介紹和用法

在js中設定節點的屬性與屬性值用到setattribute 獲得節點的屬性與屬性值用到getattribute 而在jquery中,用乙個attr 就可以全部搞定了,贊乙個先 jquery中用attr 方法來獲取和設定元素屬性,attr是attribute 屬性 的縮寫,在jquery dom操作中...

jQuery中prop方法和attr方法的區別

舊版本的jqury用attr方法來設定或者獲取元素的屬性,但是存在bug,所以新版本在此基礎上推出了prop方法,現在推薦使用prop這個方法來幹這個事情。jquery在1.6以上的版本新增了乙個prop方法,這個方法和attr的作用很像,但各司其責。以上的版本用 selector prop che...