jquery attr() vs prop() (difference)

according to the docs

jQuery.attr()
Get the value of an attribute for the first element in the set of matched elements.

whereas,

 jQuery.prop()
Get the value of a property for the first element in the set of matched elements.

Before jQuery 1.6 , the attr() method sometimes took property values into account when retrieving some attributes, which caused in inconsistent behavior. And thus, the prop() method was introduced. As of jQuery 1.6. , the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.

What actually is Attributes?
Attributes carry additional information about an HTML element and come in name=”value” pairs. You can set an attribute for HTML element and define it while writing the source code.

simple example can be:
here, "type","value", "id" are attributes of the input elements.

What is Property?
Property is a representation of an attribute in the HTML DOM tree. once the browser parse your HTML code ,corresponding DOM node will be created which is an object thus having properties.
in above case ,once browser renders the input, other properties like align, alt, autofocus, baseURI, checked so on will be added ...

since, attr() gives you the value of element as it was defines in the html on page load. It is always recommended to use prop() to get values of elements which is modified via javascript/jquery , as it gives you the original value of an element's current state.

try it in fiddle

some other links to read more about attr() and prop().
Link 1
Link 2

Comments

  1. UnknownMay 4, 2013 at 2:45 AM

    Very interesting article I Lear something I didn't new.

    ReplyDelete
  2. vivekDecember 10, 2013 at 5:37 PM

    Nice Article

    ReplyDelete
  3. Passing strangeSeptember 28, 2015 at 11:20 AM

    1) The jQuery prop() grabs the specified DOM property whereas attr() grabs the specified HTML attribute.
    2) The jQuery prop() method returns boolean value for selected, checked, readOnly, disabled and so on while attr() returns a defined string.

    For details information look here:
    http://www.namasteui.com/difference-between-prop-and-attr/

    ReplyDelete
  4. UnknownDecember 27, 2015 at 9:00 AM

    Great answer.Couldn't find elsewhere such a simple and understanding explanation.

    ReplyDelete
  5. UnknownApril 13, 2017 at 10:03 PM

    Thanks now i can understand.

    ReplyDelete
  6. abazineJuly 19, 2017 at 11:34 AM

    New thing, thanks

    ReplyDelete
  7. UnknownJanuary 9, 2018 at 6:28 AM

    I am lucky to find this concise and well written explanation of attr vs prop in my first google search. great article. Thank you.

    ReplyDelete

New comments are not allowed.

Popular posts from this blog

Jquery 'On' (Events,Direct ,Delegated)

jQuery makes it easy to respond to user interaction with a web page. Example, this code listen to click event on all element in a document and alert the text in it. HTML click 1 click 2 JQUERY There are other methods for event binding such as click(), keydown(), keyup(), blur() and so on, all of which make use of jQuery's .on() method. jQuery's .on() method attachs an event handler function for one or more events on selected elements. The example given above is Direct event. which basically means : HEY!!!! I want every div to listen up: when you get clicked , give me alert. Here, each of these div has been individually given click event which works as it should. However  if you notice in jquery's DOC, According to the jquery's documentation: Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). so, now what if some of the div is generated dynamically
Read more

Jquery :contains and making it Case-Insensitive

Well, playing around with jQuery, I once came accross jquery contains(). Very handy selector and easy to use and I have been using this in most of my scripts. So what does :contains do.. jQuery( ":contains(text)" ); Jquery contains selects all elements that contains the specified text. As the doc say, it selects all the elements which contains the given text. the elements can appear directly within the selected element, in any of that element's descendants, or a combination thereof. Example jQuery Javascript PHP JQUERY try it in fiddle The above script, will change the color of "Javascript" and "JQUERY". however, if you notice, the color of "jQuery" is not changed, though it starts with `J`. thus, :contains is case sensitive. The text must have matching case to be selected. What is you need contains with Case-Insensitive. One way to do this is , extending the old :contains selector. // OVERWRITES old selecor
Read more