看到在这段代码中使用attr
和prop
做同样的事情,我想知道这两者有什么区别?以及在哪些情况下建议使用其中一种或另一种,但不会陷入意见,而是基于出于可证明或记录的原因而提出的建议。
$(function()
{
$('#attrId').click(function(e)
{
console.log($(this).attr('id'));
});
$('#propId').click(function(e)
{
console.log($(this).prop('id'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="attrId">attr</a>
<hr />
<a href="#" id="propId">prop</a>
要了解和之间的主要区别
.attr()
,.prop()
您必须解释 HTML 中属性和属性之间的区别,因为正如其名称所暗示的那样,.attr()
它将用于处理属性,同时.prop()
处理属性。当你创建一个 HTML 元素时,你可以给它属性,例如这个
input
有属性id
,name
,type
和value
:但是浏览器在呈现 HTML 时,会在 DOM 中创建一个与该 HTML 元素对应的节点,并且由于该节点是一个对象,因此它将具有属性。该对象不仅包含 HTML 元素的属性,而且还具有自己的属性,例如
nodeName
,selectedIndex
,defaultValue
...在以前的 jQuery 版本中,它
.attr()
可以互换地返回属性和属性。并且从 1.6 版(当)开始, for 属性和for 属性.prop()
之间的这种区别被分开并做出了(并非没有一些争议,这迫使一些更改被撤消,正如 jQuery 的创建者 John Resig 所解释的那样,在他的博客上)。.attr()
.prop()
一般来说,在大多数情况下
.attr()
,它可以更改为 a.prop()
并且它仍然可以工作(因为属性最终会被转换为属性),但反之则不行(因为有些属性没有对应的属性)。实际上,为了避免出现问题,在某些情况下
.attr()
,它会调用以.prop()
获取未作为属性找到但可以作为属性存在/变异的值;让它.attr()
慢一点。在这种情况下,即使.attr()
它有效,在概念上正确的做法是使用.prop()
.下面是一个值如何
.attr()
和.prop()
不同的示例:两个单选按钮,其中一个被选中,如果您按下按钮,您将看到当属性被“选中”时(根据 HTML 规范),该属性已将该值转换为带有 value 的布尔值true
。现在检查另一个单选按钮并再次点击按钮:属性已更改为false
但属性仍然显示“已检查”!来源和参考书目(英文):
.attr()
和.prop()
.attr()
.prop()
对于当前版本的 jQuery:
attr
指 HTML 代码中的属性值,而prop
它指的是属性的当前值(最初设置为属性的值)一个实际的例子:
可以看出,使用 prop 激活和停用复选框,属性
checked
将状态更改为false
,然后更改为true
,属性checked
保持其值,checked
这是 DOM 开始时的值。但是,当使用
attr
set 属性时,null
将删除和检查属性,因此也会将状态(属性checked
)更改为 false(停用)。在将其原始值返回给checked
元素时,它会恢复其属性,但是,此操作不会修改复选框的状态,这将使其属性保持为 false。通常
prop
,如果您尝试操作元素的当前状态并且attr
仅获取元素的初始状态,则始终使用它(如果该元素已将该元素附加到 DOM,我不建议您使用它来操作属性)是动态的,如果是静态的,则永远不会)