jQuery中prop（）和attr（）之间的区别以及何时使用attr（）和prop（）[重复]

Question

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

我看过以下链接 jQuery attr vs. prop, there are a list of props? jQuery attr vs prop?

但我没有得到答案。请帮助我。提前谢谢。

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

Answer 1

来自docs

属性和属性之间的区别在特定情况下可能很重要。在 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等其他属性。

link如果您想了解更多信息

Answer 2

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

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

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

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

参考：HTML: The difference between attribute and property

示例片段

$(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>

Answer 3

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

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