jQuery中attr(),和prop()的區別

2021-08-20 23:12:37 字數 1827 閱讀 7859

prop()是jquery 1.6中新出的乙個方法,其用法和attr類似,因此也就引起了質疑,為什麼attr()已經存在還要引入prop()呢?兩者有什麼區別?

根據官方的建議:具有 true 和 false 兩個屬性的屬性,如 checked, selected 或者 disabled 使用prop(),其他的使用 attr()

來看一段**:

乙個核取方塊

html:

jquery:

console.log($("#iii").prop("checked"),$("#iii").attr("checked"))
瀏覽器中顯示如下:

可以看出prop()輸出結果為 false ;attr() 結果為 undefined

input節點checked屬性為 false。

結論先不說。。繼續看下面的圖。

接著用attr()設定checked屬性

$("#iii").attr()
瀏覽器中顯示如下:

可以看出,瀏覽器說顯示的dom節點中新增了屬性節點checked

而prop()結果為true;attr() 結果為 checked。

input節點checked屬性為 true。

下面換 prop()設定checked屬性

$("#iii").prop()
瀏覽器中顯示如下:

與attr()新增結果對比可以看出,瀏覽器說顯示的dom節點中並沒有屬性節點checked

而prop()結果為true;attr() 結果為 undefined。

input節點checked屬性為 true。

由以上三個結果對比可以推測出:

attr()操作的是元素屬性節點,元素節點上沒有屬性節點checked時,返回的必然是undefined;

prop()操作的是元素節點的 節點屬性 checked的值

或者直接分析jquery該方法原始碼,推薦:

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