jquery中attr和prop的區別

2021-09-02 10:04:34 字數 1275 閱讀 6858

在高版本的jquery引入prop方法後,什麼時候該用prop?什麼時候用attr?它們兩個之間有什麼區別?這些問題就出現了。

相比attr,prop是1.6.1才新出來的,兩者從中文意思理解,都是獲取/設定屬性的方法(attributes和properties)。只是,window或document中使用.attr()方法在jquery1.6之前不能正常執行,因為window和document中不能有attributes。prop應運而生了

attr方法**(jquery版本1.8.3)

prop方法**(jquery版本1.8.3)

attr方法裡面,最關鍵的兩行**,elem.setattribute( name, value + 「」 )和ret = elem.getattribute( name ),很明顯的看出來,使用的dom的api setattribute和getattribute方法操作的屬性元素節點

而prop方法裡面,最關鍵的兩行**,return ( elem[ name ] = value )和return elem[ name ],你可以理解成這樣document.getelementbyid(el)[name] = value,這是轉化成js物件的乙個屬性。

既然明白了原理是這樣,我們來看看乙個例子:

el.attr(「style」)輸出undefined,因為attr是獲取的這個物件屬性節點的值,很顯然此時沒有這個屬性節點,自然輸出undefined

el.prop(「style」)輸出cssstyledeclaration物件,對於乙個dom物件,是具有原生的style物件屬性的,所以輸出了style物件

至於document.getelementbyid(「test」).style和上面那條一樣

我們接著看:

首先用attr方法給這個物件新增abc節點屬性,值為111,可以看到html的結構也變了

el.attr(「abc」)輸出結果為111,再正常不過了

el.prop(「abc」)輸出undefined,因為abc是在這個的屬性節點中,所以通過prop是取不到的

我們再接著來:

我們再用prop方法給這個物件設定了abc屬性,值為222,可以看到html的結構是沒有變化的。輸出的結果就不解釋了。

上面已經把原理講清楚了,什麼時候用什麼就可以自己把握了。

提一下,在遇到要獲取或設定checked,selected,readonly和disabled等屬性時,用prop方法顯然更好,比如像下面這樣:

顯然,布林值比字串值讓接下來的處理更合理。

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...