jQuery中prop()和attr()的区别以及何时使用attr()和prop()

Question

jQuery中prop()和attr()的区别以及何时使用attr()和prop()

jqueryattrprop

84

我在一些地方看到 jQuery 中使用了 .attr() 方法，而在另一些地方则用到了 .prop() 方法。但是我在 Stack Overflow 和谷歌上搜索后非常困惑，请告诉我这两者的确切区别以及何时使用它们。

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

但是我没有得到答案。

- PSR

3个回答

60

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

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

正如此链接中的示例所建议的那样。输入字段可以具有属性"value"。这将等于您输入的默认值。如果用户更改了输入字段中的值，则DOM树中的属性"value"会更改，但原始属性仍保持不变。

因此，基本上，如果您想设置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>

- CP510

9

JQuery是一个不断发展的库，有时会进行定期改进。.attr()用于从HTML标签中获取属性，虽然它完全可用，但稍后添加了.prop()以更具语义并更好地处理无值属性，如“checked”和“selected”。

建议使用较新版本的JQuery时尽可能使用.prop()。

- Cyril Gupta

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bipen · Accepted Answer

来自文档

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

示例

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

评论后更新

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

一个简单的示例可以是..

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

这里的type、value、id是属性。一旦浏览器呈现它，您将获得其他属性，例如align、alt、autofocus、baseURI、checked等。

链接，如果您想了解更多信息。