jQuery中prop()和attr()之间的区别以及何时使用attr()和prop()[duplicate]

时间:2022-03-13 22:35:17

This question already has an answer here:

这个问题在这里已有答案:

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和谷歌我很困惑。请告诉我这两者之间的确切区别以及何时使用它们。

I have seen the following links jQuery attr vs. prop, there are a list of props? jQuery attr vs prop?

我已经看到以下链接jQuery attr与prop,有一个道具列表? jQuery attr vs prop?

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之前请解释原因,然后我会在下一篇文章中更正。

3 个解决方案

#1


69  

from docs

来自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.

例如,应检索selectedIndex,tagName,nodeName,nodeType,ownerDocument,defaultChecked和defaultSelected,并使用.prop()方法进行设置。在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, id are attributes.Once browser renders it, you will get other properties like align, alt, autofocus, baseURI, checked and so on.

这里type,value,id是attributes.Once浏览器渲染它,你将获得其他属性,如对齐,alt,自动对焦,baseURI,检查等。

link if you want to read more on this

链接,如果你想了解更多关于此

#2


49  

.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.

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

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()函数获取最新值。

http://jquery-howto.blogspot.com/2011/06/html-difference-between-attribute-and.html

http://jquery-howto.blogspot.com/2011/06/html-difference-between-attribute-and.html

#3


6  

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()更具语义性,并且它更适用于“已检查”和“已选择”等无值属性。

It is advised that if you are using a later version of JQuery you should use .prop() whenever possible.

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

#1


69  

from docs

来自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.

例如,应检索selectedIndex,tagName,nodeName,nodeType,ownerDocument,defaultChecked和defaultSelected,并使用.prop()方法进行设置。在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, id are attributes.Once browser renders it, you will get other properties like align, alt, autofocus, baseURI, checked and so on.

这里type,value,id是attributes.Once浏览器渲染它,你将获得其他属性,如对齐,alt,自动对焦,baseURI,检查等。

link if you want to read more on this

链接,如果你想了解更多关于此

#2


49  

.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.

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

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()函数获取最新值。

http://jquery-howto.blogspot.com/2011/06/html-difference-between-attribute-and.html

http://jquery-howto.blogspot.com/2011/06/html-difference-between-attribute-and.html

#3


6  

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()更具语义性,并且它更适用于“已检查”和“已选择”等无值属性。

It is advised that if you are using a later version of JQuery you should use .prop() whenever possible.

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