By PSR


2013-04-17 04:27:31 8 Comments

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.

I have seen the following links jQuery attr vs. prop, there are a list of props? 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.

3 comments

@CP510 2013-04-17 04:35:03

.attr() changes attributes for that HTML tag.

.prop() changes properties for that HTML tag as per the DOM tree.

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.

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.

Reference : HTML: The difference between attribute and 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>

@bipen 2013-04-17 04:30:30

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.

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.

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.

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.

link if you want to read more on this

@Debasis Panda 2019-11-06 17:30:06

First of all there is no type as test. I think you mean text. Second input type text doesn't have checked property.

@Cyril Gupta 2013-04-17 04:30:20

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

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

Related Questions

Sponsored Content

65 Answered Questions

[SOLVED] How to check whether a checkbox is checked in jQuery?

17 Answered Questions

[SOLVED] .prop() vs .attr()

27 Answered Questions

[SOLVED] How can I refresh a page with jQuery?

42 Answered Questions

[SOLVED] Is there an "exists" function for jQuery?

  • 2008-08-27 19:49:41
  • Jake McGraw
  • 729758 View
  • 2673 Score
  • 42 Answer
  • Tags:   javascript jquery

55 Answered Questions

[SOLVED] How do I check if an element is hidden in jQuery?

35 Answered Questions

[SOLVED] Add table row in jQuery

40 Answered Questions

[SOLVED] Setting "checked" for a checkbox with jQuery?

29 Answered Questions

[SOLVED] jQuery scroll to element

  • 2011-07-13 09:49:44
  • DiegoP.
  • 2367133 View
  • 2203 Score
  • 29 Answer
  • Tags:   javascript jquery

17 Answered Questions

[SOLVED] Disable/enable an input with jQuery?

Sponsored Content