Detailed explanation of the difference between prop and attr in js

This article mainly focuses on attr obtaining the element value from page search, so the page must clearly define the element to obtain the value, which is relatively slow.
For example:

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

Because there is no checked keyword in <input name='test' type='checkbox'>.

• prop takes the value from the attribute object. You can get as many values ​​as there are attributes in the attribute object. There is no need to display the definition on the page.
  For example
  

##

$('input:checkbox').prop('checked'); 返回false
。

Copy after login

If it is a custom attribute, Then there is no such attribute in the attribute object. So prop returns undefined. But this attribute can be retrieved from the page, so attr can be obtained.

• attr obtains the initialization value. Unless it is changed by attr(‘name’,’value’), the value will not change. The prop attribute value is dynamic, such as checkbox. After it is selected, checked becomes true, and the prop value will also change.

• For the inherent attributes of the HTML element itself, when processing When, use the prop method. Fast and accurate.

• For our own customized DOM attributes of HTML elements, we use the attr method when processing them.

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

a> element include id, href, and target. These attributes are attributes of the <a> element itself. , these attributes are included in the W3C standard, or attributes that can be intelligently prompted in the IDE. These are called inherent attributes. When dealing with these properties, it is recommended to use prop.

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

a> element include id, href, target, and uuu. The first three are inherent attributes, and the last "uuu" attribute allows us to customize it. Yes, the <a> element itself does not have this attribute. This is a custom DOM attribute. When dealing with these attributes, it is recommended to use attr.

<a href="#" target="_self">超链接</a>
//attr和prop都读取成功
//attr("href")的值是：#//prop("href")的值是：http://localhost:4590/AttributeHandle/Index#alert($("a").attr("href"));alert($("a").prop("href"));

Copy after login

<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可以对任意属性设置属性值。

The above is the detailed content of Detailed explanation of the difference between prop and attr in js. For more information, please follow other related articles on the PHP Chinese website!