80

我在某些地方看到 .attr() 在 jQuery 中使用。在某些地方 .prop() 被使用。但是我在 SO 和 google 中搜索我很困惑。请告诉我这两者之间的确切区别以及何时使用它们.

我看过下面的链接 jQuery attr vs. prop，有没有 props 的列表？ jQuery attr 与道具？

但我没有得到答案。请帮助我。在此先感谢。

在投反对票之前，请解释原因，然后我将在下一篇文章中更正。

4

3 回答 3

82

来自文档

属性和属性之间的区别在特定情况下可能很重要。在 jQuery 1.6 之前，.attr() 方法在检索某些属性时有时会考虑属性值，这可能会导致行为不一致。从 jQuery 1.6 开始，.prop() 方法提供了一种显式检索属性值的方法，而 .attr() 检索属性。

例子

例如，应使用 .prop() 方法检索和设置 selectedIndex、tagName、nodeName、nodeType、ownerDocument、defaultChecked 和 defaultSelected。在 jQuery 1.6 之前，可以使用 .attr() 方法检索这些属性，但这不在 attr 的范围内。这些没有对应的属性，只是属性。

评论后更新

您可以为 HTML 元素设置属性。您在编写源代码时定义它，一旦浏览器解析您的代码，将创建相应的 DOM 节点，这是一个具有属性的对象。

简单的例子可以是..

<input type="test" value="test" id="test" />

这里的type、value、id是属性。浏览器渲染后，你会得到其他属性，如 align、alt、autofocus、baseURI、checked等。

如果您想了解更多关于此的链接

于 2013-04-17T04:30:30.597 回答
59

.attr()更改该 HTML 标记的属性。

.prop()根据 DOM 树更改该 HTML 标记的属性。

正如此链接中的示例所示。输入字段可以具有属性“值”。这将等于您输入的默认值。如果用户更改输入字段中的值，则 DOM 树中的属性“值”会更改，但保留原始属性。

所以基本上，如果您想为 HTML 标签的属性设置默认值，请使用该.attr()函数。如果用户可以更改该值（例如输入、复选框、收音机等），请使用该.prop()函数获取最新值。

参考： HTML：属性和属性的区别

示例片段

$(document).ready(function() {
  console.log($('#test').attr('value') + " - With .attr()");

  $('#answer').click(function() {
    console.log($('#test').attr('value') + " - With .attr()");
    console.log($('#test').prop('value') + " - With .prop()");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>Change the input value and check the console...</div>
<input type="text" id="test" value="Sample">
<button id="answer">Click Me</button>

于 2013-04-17T04:35:03.093 回答
8

JQuery 是一个不断变化的库，有时他们会定期改进。.attr() 用于从 HTML 标记中获取属性，虽然它功能完善，但后来添加了 .prop() 以更具语义性，并且它更适用于像“checked”和“selected”这样的无值属性。

建议如果您使用的是更高版本的 JQuery，您应该尽可能使用 .prop()。

于 2013-04-17T04:30:20.640 回答