jquery中attr與prop 讀寫值的不同表現

最近在進行專案開發的時候，發現全選與否的時候出現了問題，同樣的**，在不同框架中，不能正常執行了，

function selectall() 
else 
}

上述**在jquery-1.8.2.js中執行正常，而在高版本的jquery/jquery-3.4.1.js 和 jquery/jquery-1.11.3.js 就行不通了。（太大模糊了，右鍵—>開啟新標籤頁檢視）

得替換為：

function selectall() );
}

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

關於它們的區別。

jquery中有3個獲取元素value值的函式比較相似：attr(), prop(), val()；拿來比較一下。

示例**：

click

改變輸入框的值，此時控制台輸出：

123 123thgf 123thgf

如果我們沒有為文字框設定初始值，即刪除value=」123」後，依舊使用如上js**，則相應輸出如下：

undefined
attr()輸出為undefined，而prop()和val()輸出為「空」。

輸入value值後：控制台輸出為：

undefined
asdasd
asdasd
attr()輸出依然為undefined，而prop()和val()則輸出實際值。

可見，prop()和val()都能獲取到文字框的實際value值，而attr()獲取的則始終為文件結構中的value的屬性值，與文字框實際值無關，並不會變化。

對於html元素本身就帶有的固有屬性，（以及獲取動態屬性，即控制項的實際值）在處理時建議使用prop方法

對於html元素我們自定義的dom屬性，在處理時建議使用attr方法

上面的描述也許有點模糊，舉幾個例子就知道了。

超連結這個例子裡元素的dom屬性有id、href、target，這些屬性是元素本身就有的屬性，w3c標準裡就包含這幾個屬性，或者說在ide裡能夠智慧型提示出的屬性，這些就叫做固有屬性。處理這些屬性時，建議使用prop。

超連結這個例子裡元素的dom屬性有id、href、target、uuu，前三個是固有屬性，最後乙個「uuu」屬性使我們自定義的，元素本身是沒有這個屬性的，這種就是自定義的dom屬性。處理這些屬性時，建議使用attr。

讀取html元素固有屬性（已賦值）

超連結
//attr和prop都讀取成功
//attr("href")的值是：#
//prop("href")的值是：http://localhost:4590/attributehandle/index#
alert($("a").attr("href"));
alert($("a").prop("href"));

讀取html元素固有屬性（未賦值）

不同html標籤的固有屬性不完全相同，例如：checked屬性是checkbox標籤的固有屬性，但不是a標籤的固有屬性。class屬性雖然是a標籤的固有屬性，但是如果元素中沒有對該屬性賦值，用attr()也是讀取不到的。

超連結
alert($("a").attr("id"));//輸出：undefine
alert($("a").prop("id"));//輸出：預設值""
alert($("a").attr("checked"));//輸出：undefine
alert($("a").prop("checked"));//輸出：undefine
alert($("#testcheckbox").attr("checked"));//輸出：undefine
alert($("#testcheckbox").prop("checked"));//輸出：預設值false
alert($("a").attr("class"));//輸出：undefine
alert($("a").prop("class"));//輸出：預設值""

讀取html元素自定義屬性（已賦值）

超連結
alert($("a").attr("uuu"));//輸出：guoguo
alert($("a").prop("uuu"));//輸出：undefine

讀取html元素自定義屬性（未賦值）

超連結
alert($("a").attr("abc"));//輸出：undefine
alert($("a").prop("abc"));//輸出：undefine

設定html元素固有屬性

超連結
$("a").attr("id","link");//id屬性新增成功
$("a").prop("id","link");//id屬性新增成功

設定html元素自定義屬性

超連結
$("a").attr("abc", "myself");//成功新增屬性abc="myself"
$("a").prop("abc", "myself");//新增abc屬性失敗
$("a").attr("action", "addattribute");//成功新增屬性action="addattribute"
$("a").prop("action", "addattribute");//新增action屬性失敗

總結

prop讀取屬性值：讀取已賦值的固有屬性會得到屬性值，讀取未賦值的固有屬性會得到屬性預設值（或者實際操作值），讀取自定義屬性時無論是否賦值均得到undefine。

prop設定屬性值：prop只能設定固有屬性值。

attr讀取屬性值：無論是固有屬性還是自定義屬性，attr只能讀取元素中已有的屬性值（使用者操作的影響的屬性無法讀取，比如input,checkbox實際值），讀取元素中沒有的屬性值會返回undefine。

attr設定屬性值：attr可以對任意屬性設定屬性值。

jquery中attr與prop 讀寫值的不同表現

jquery中attr 與prop 區別

jquery中attr 與prop 的區別

JQuery中css與attr的比較

jquery中attr與prop 讀寫值的不同表現

jquery中attr 與prop 區別

jquery中attr 與prop 的區別

JQuery中css與attr的比較

相關推薦