jQuery 中 prop() 和 attr() 之间的区别以及何时使用 attr() 和 prop()
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16051491/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
difference between prop() and attr() in jQuery and when to use attr() and prop()
提问by PSR
I saw in some places .attr() is used in jQuery.In some places .prop() is used.But i searched in SO and google i am very confused .Please tell me the exact difference between these two and when to use them.
我在某些地方看到 .attr() 在 jQuery 中使用。在某些地方使用 .prop()。但我在 SO 和 google 中搜索我很困惑。请告诉我这两者之间的确切区别以及何时使用它们.
I have seen the following links jQuery attr vs. prop, there are a list of props?jQuery attr vs prop?
我看到了以下链接 jQuery attr vs. prop，有一个 props 列表？jQuery attr vs 道具？
But I did not got the answer.Please help me.Thanks in advance.
但我没有得到答案。请帮助我。提前致谢。
Before giving a downvote please explain the reason, then I will correct in my next post.
在给出downvote之前，请解释原因，然后我会在下一篇文章中更正。
回答by bipen
from docs
来自文档
The difference between attributes and properties can be important in specific situations. Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.
属性和特性之间的差异在特定情况下可能很重要。在 jQuery 1.6 之前，.attr() 方法在检索某些属性时有时会考虑属性值，这可能会导致不一致的行为。从 jQuery 1.6 开始， .prop() 方法提供了一种显式检索属性值的方法，而 .attr() 方法检索属性。
example
例子
For example, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, and defaultSelected should be retrieved and set with the .prop() method. Prior to jQuery 1.6, these properties were retrievable with the .attr() method, but this was not within the scope of attr. These do not have corresponding attributes and are only properties.
例如，应该使用 .prop() 方法检索和设置 selectedIndex、tagName、nodeName、nodeType、ownerDocument、defaultChecked 和 defaultSelected。在 jQuery 1.6 之前，这些属性可以使用 .attr() 方法检索，但这不在 attr 的范围内。这些没有相应的属性，只是属性。
updated after comment
评论后更新
You can set an attribute for HTML element. You define it while writing the source code, once the browser parse your code, corresponding DOM node will be created which is an object thus having properties.
您可以为 HTML 元素设置属性。您在编写源代码时定义它，一旦浏览器解析您的代码，就会创建相应的 DOM 节点，该节点是一个具有属性的对象。
Simple example can be..
简单的例子可以是..
<input type="test" value="test" id="test" />
Here type, value, idare attributes.Once browser renders it, you will get other properties like align, alt, autofocus, baseURI, checkedand so on.
这里的type、value、id是属性。一旦浏览器渲染它，你将获得其他属性，如 align、alt、autofocus、baseURI、checked等。
linkif you want to read more on this
链接，如果你想了解更多关于这
回答by CP510
.attr()changes attributes for that HTML tag.
.attr()更改该 HTML 标记的属性。
.prop()changes properties for that HTML tag as per the DOM tree.
.prop()根据 DOM 树更改该 HTML 标记的属性。
As the example in this link suggests. An input field can have the attribute "value". This will equal the default value you entered. If the user changes the value in the input field, the property "value" changes in the DOM Tree, but the original attribute is left remaining.
正如此链接中的示例所示。输入字段可以具有属性“值”。这将等于您输入的默认值。如果用户更改输入字段中的值，则 DOM 树中的属性“值”会更改，但保留原始属性。
So basically, if you want the default value set up for an HTML tag's attribute, use the .attr()function. If that value can be changed by the user (such as inputs, checkbox's, radios, etc.) use the .prop()function to get the newest value.
所以基本上，如果您想为 HTML 标记的属性设置默认值，请使用该.attr()函数。如果用户可以更改该值（例如输入、复选框、收音机等），请使用该.prop()函数获取最新值。
Reference :HTML: The difference between attribute and property
参考：HTML：attribute 和property 的区别
Example Snippet
示例代码段
$(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>回答by Cyril Gupta
JQuery is a changing library and sometimes they make regular improvements. .attr() is used to get attributes from the HTML tags, and while it is perfectly functional .prop() was added later to be more semantic and it works better with value-less attributes like 'checked' and 'selected'.
JQuery 是一个不断变化的库，有时它们会定期改进。.attr() 用于从 HTML 标签中获取属性，虽然它功能完善，但后来添加了 .prop() 以增加语义，并且它更适用于诸如 'checked' 和 'selected' 之类的无值属性。
It is advised that if you are using a later version of JQuery you should use .prop() whenever possible.
建议如果您使用更高版本的 JQuery，则应尽可能使用 .prop()。
