jquery2

Difference between jQuery .attr() and .prop()

jQuery 1.6 introduces .prop() function and separates DOM Attributes and Properties, it raised a lot of questions about the difference between .attr and .prop functions. Before going jQuery, let us understand DOM Attributes and Properties. See following line

<input id="demo" type="text" value="TechBrij" />

Now, I changed text ‘TechBrij‘ to ‘jQuery‘ in textbox and see FireBug DOM Tab(select Show DOM Properties option in DOM tab dropdown)

dom properties attributes jQuery .attr() vs .prop()

You see Property “value” is ‘jQuery‘, but Attribute “value” is still ‘TechBrij‘. Now you have got idea what it means. Only element’s property is changed, because it is in the DOM and dynamic. But element’s attribute is in HTML text and can not be changed. In wide sense, the property always represents the current state while the attribute (except in old versions of IE) represents the initial state or is meant for html attributes as they are strictly defined. the attribute tells you nothing about the current state.

In jQuery 1.6+, .prop() is used for property and .attr() for attribute. After changing text, when you run

$("#demo").attr("value");   // returns TechBrij
$("#demo").prop("value");   // returns jQuery

Points to Remember:

1. selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, and defaultSelected..etc should be retrieved and set with the .prop() method. These do not have corresponding attributes and are only properties.

2. for a checkbox (jquery 1.6+)

<input id="check1" checked="checked" type="checkbox" />

.attr('checked') //returns  checked
.prop('checked') //returns  true
.is(':checked') //returns true

prop method returns Boolean value for checked, selected, disabled, readOnly..etc while attr returns defined string. So, you can directly use .prop(‘checked’) in if condition.

3. .attr() calls .prop() internally so .attr() method will be slightly slower than accessing them directly through .prop().

Conclusion:

For jQuery 1.6+, prop will be mostly used because it is simple and wider than attr. In most old projects, attr is used to get current state information of element. But now prop has taken this job and attr would be replaced with prop.

Hope, It helps. Share your opinion in comment box.

Related Posts


6 thoughts on “Difference between jQuery .attr() and .prop()

  1. on this site

    Awesome blog! Is your theme custom made or did you
    download it from somewhere? A theme like yours with a few simple adjustements would really make
    my blog shine. Please let me know where you got your theme.
    Appreciate it

    Reply
  2. click here

    Hi, I check your blogs on a regular basis. Your writing style is
    awesome, keep doing what you’re doing!

    Reply
  3. Prodan

    Nice but it would be great if you extended this to rovmee target=”_blank” from internal links, just in case they have them turned on. Shouldn’t be hard, just a simple if else statement, but I’m sure someone would find it useful.

    Reply
  4. kore dizileri izle

    I was seeking for this great sharing admin very much thanks and also have great running a blog bye

    Reply
  5. Bertram

    Greetings thanks for great put up i was browsing for this issue last 2 days. I will look for upcoming valuable posts. Have entertaining admin.

    Reply
  6. Rigoberto Kraker

    I just want to tell you that I am just newbie to blogging and seriously loved your web-site. More than likely I’m planning to bookmark your blog post . You absolutely have fabulous article content. Kudos for revealing your webpage.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>