Difference between prop () and attr () in jQuery and when to use attr () and prop ()

Question

I saw in some places .attr () is used in jQuery. Some places use .prop (). But I searched in SO and google I am very confused. Please tell me the exact difference between the two and when to use them.

I saw the following jQuery attr vs. links prop, is there a list of details? jQuery attr vs prop?

But I didn’t have an answer. Please help me. Thanks in advance.

Before giving a downward belt, explain the reason, then I will correct it in my next post.

Answer 1

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 certain attributes, which can lead to inconsistent behavior. Starting with jQuery 1.6, the .prop () method provides a way to explicitly retrieve property values, while .attr () retrieves attributes.

Example

For example, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked and defaultSelected should be retrieved and set using the .prop () method. Prior to jQuery 1.6, these properties were restored using the .attr () method, but this was not within the scope of attr. They do not have corresponding attributes and are only properties.

updated after comment

You can set an attribute for an HTML element. You define it when writing the source code, as soon as the browser analyzes your code, a corresponding DOM node will be created, which is an object that thus has properties.

A simple example might be ...

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

Here type, value, id are attributes. When the browser displays it, you will get other properties such as align, alt, autofocus, baseURI, checked , etc.

link if you want to know more about it

Answer 2

.attr() changes the attributes for this HTML tag.

.prop() changes the properties for this HTML tag to match the DOM tree.

As the example in this link shows. The input field may have a value attribute. This will be equal to the default value you entered. If the user changes the value in the input field, the value property changes in the DOM tree, but the original attribute remains unchanged.

Basically, if you want to set a default value for an attribute of an HTML tag, use the .attr() function. If this value can be changed by the user (for example, inputs, flags, radios, etc.), use the .prop() function to get the newest value.

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

Answer 3

JQuery is a changing library, and sometimes they make regular improvements .. attr () is used to get attributes from HTML tags, and although it works fine .prop () was added later to be more semantic, and it works better with attributes without Values ​​such as checked and selected.

It is reported that if you are using a later version of jQuery, you should use .prop () whenever possible.