JS中attr和prop属性的区别,以及优先选择
发布网友
发布时间：2022-04-23 06:12
共2个回答
懂视网
时间：2022-04-23 10:34
如:
<input name='test' type='checkbox'>
$('input:checkbox').attr('type'); 返回checkbox.
$('input:checkbox').attr('checked'); 返回undefined。因为<input name='test' type='checkbox'>中没有checked关键字。
prop是从属性对象中取值，属性对象中有多少属性，就能获取多少值，不需要在页面中显示定义。
比如
$('input:checkbox').prop('checked'); 返回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>
这个例子里<a>元素的DOM属性有id、href、target，这些属性是<a>元素本身就有的属性，W3C标准里就包含这几个属性，或者说在IDE里能够智能提示出的属性，这些就叫做固有属性。处理这些属性时，建议使用prop。
<a id="first" href="#" target="_self" uuu="guoguo">超链接</a>
这个例子里<a>元素的DOM属性有id、href、target、uuu，前三个是固有属性，最后一个“uuu”属性使我们自定义的，<a>元素本身是没有这个属性的，这种就是自定义的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可以对任意属性设置属性值。
热心网友
时间：2022-04-23 07:42
既然我们想知道他们两的区别，最好就看看他们的源代码，不要被代码长度所吓到，我们只看关键的几句：
attr: function( elem, name, value, pass ) {
var ret, hooks, notxml,
nType = elem.nodeType;
// don't get/set attributes on text, comment and attribute nodes
if ( !elem || nType === 3 || nType === 8 || nType === 2 ) {
return;
}
if ( pass && jQuery.isFunction( jQuery.fn[ name ] ) ) {
return jQuery( elem )[ name ]( value );
}
// Fallback to prop when attributes are not supported
if ( typeof elem.getAttribute === "undefined" ) {
return jQuery.prop( elem, name, value );
}
notxml = nType !== 1 || !jQuery.isXMLDoc( elem );
// All attributes are lowercase
// Grab necessary hook if one is defined
if ( notxml ) {
name = name.toLowerCase();
hooks = jQuery.attrHooks[ name ] || ( rboolean.test( name ) ? boolHook : nodeHook );
}
if ( value !== undefined ) {
if ( value === null ) {
jQuery.removeAttr( elem, name );
return;
} else if ( hooks && "set" in hooks && notxml && (ret = hooks.set( elem, value, name )) !== undefined ) {
return ret;
} else {
elem.setAttribute( name, value + "" );
return value;
}
} else if ( hooks && "get" in hooks && notxml && (ret = hooks.get( elem, name )) !== null ) {
return ret;
} else {
ret = elem.getAttribute( name );
// Non-existent attributes return null, we normalize to undefined
return ret === null ?
undefined :
ret;
}
}
