首頁  >  文章  >  web前端  >  js中prop和attr區別詳解

js中prop和attr區別詳解

小云云
小云云原創
2018-03-19 17:52:052847瀏覽

本文主要是attr 是從頁面搜尋取得元素值,所以頁面必須明確定義元素才能取得值,相對來說比較慢。 
如:

<input name=&#39;test&#39; type=&#39;checkbox&#39;> 
$(&#39;input:checkbox&#39;).attr(&#39;type&#39;); 返回checkbox. 
$(&#39;input:checkbox&#39;).attr(&#39;checked&#39;); 返回undefined。

因為c6db19a8c5571531fae583c4104c57b0中沒有checked關鍵字。

  • prop是從屬性物件中取值,屬性物件中有多少屬性,就能取得多少值,不需要在頁面中顯示定義。
    例如 

  • $(&#39;input:checkbox&#39;).prop(&#39;checked&#39;); 返回false
    。

這裡就會遇到個問題:如果是自訂的屬性,那麼屬性物件中是沒有這個屬性的。所以prop回傳undefined。但是頁面中可以檢索到這個屬性,所以attr是可以取得的。

其次

  • attr取得的是初始化值,除非透過attr(‘name’,’value’)改變,否則值不變。 prop屬性值是動態的,例如checkbox,選取後,checked變成true,prop值也會改變。

總結

所以有個經驗是:

  • #對於HTML元素本身就帶有固有的屬性,在處理時,使用prop方法。快速,準確。

  • 對於HTML元素我們自己自訂的DOM屬性,在處理時,使用attr方法。

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

<a id="first" href="#" target="_self">超链接</a>

這個例子裡c6c96f5e3e389d70f7aaeb98d4f95fc8元素的DOM屬性有id、href、target,這些屬性是c6c96f5e3e389d70f7aaeb98d4f95fc8元素本身就有的屬性,W3C標準裡就包含這幾個屬性,或者說在IDE裡能夠智慧提示出的屬性,這些就叫做固有屬性。處理這些屬性時,建議使用prop。

<a id="first" href="#" target="_self" uuu="guoguo">超链接</a>

這個例子裡c6c96f5e3e389d70f7aaeb98d4f95fc8元素的DOM屬性有id、href、target、uuu,前三個是固有屬性,最後一個「uuu」屬性使我們自訂的,c6c96f5e3e389d70f7aaeb98d4f95fc8元素本身是沒有這個屬性的,這種就是自訂的DOM屬性。處理這些屬性時,建議使用attr。

讀取HTML元素固有屬性(已賦值)

<a href="#" target="_self">超链接</a>
//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()也是讀取不到的。

<a href="#" target="_self">超链接</a>
<input type="checkbox" id="testCheckBox" value="测试CheckBox"/>
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"));//输出:默认值falsealert($("a").attr("class"));//输出:undefine
alert($("a").prop("class"));//输出:默认值""

读取HTML元素自定义属性(已赋值)

<a href="#" target="_self" uuu="guoguo">超链接</a>
alert($("a").attr("uuu"));//输出:guoguoalert($("a").prop("uuu"));//输出:undefine

读取HTML元素自定义属性(未赋值)

<a href="#" target="_self" uuu="guoguo">超链接</a>
alert($("a").attr("abc"));//输出:undefinealert($("a").prop("abc"));//输出:undefine

设置HTML元素固有属性

<a href="#" target="_self" uuu="guoguo">超链接</a>
$("a").attr("id","link");//id属性添加成功$("a").prop("id","link");//id属性添加成功

设置HTML元素自定义属性

<a href="#" target="_self" uuu="guoguo">超链接</a>$("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只能读取元素中已有的属性值,读取元素中没有的属性值会返回undefine。 
attr设置属性值:attr可以对任意属性设置属性值。

以上是js中prop和attr區別詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn