5

As far as I am aware, the .prop() function can do everything the .attr() function can do but in a generally safer and simpler way.

For example:

  • If I want to get the default state of a checkbox in the HTML, I can do $('myCheckbox').prop('defaultChecked') (instead of $('myCheckbox').attr('checked')). This actually seems safer than using .attr('checked'), as the attribute can lose it's value if the checkbox is dynamically changed, while .prop('defaultValue') maintains the value (e.g. http://jsfiddle.net/p1Lrgwnb/1/)
  • Even though I often see .attr() used consistently with values such as id and name on StackOverflow examples, .prop() works fine with those as well. I am unaware of any reason .attr() seems to be preferred for these values other than traditional conventions and habits.

Is there ever a use case where I would need to use .attr() or that the .prop() function would not give me the information I needed?

EDIT: This question has nothing to do with what is the difference between .prop() and .attr(). I've studied those questions on StackOverflow in depth, including the one linked below (stackoverflow.com/questions/5874652/prop-vs-attr ). From my question, it is clear I understand fully the difference between the two, probably better than most. My question is are there any circumstances I must use .attr(), which is a completely different question from .prop() vs .attr().

Community
  • 1
  • 1
dallin
  • 8,775
  • 2
  • 36
  • 41
  • 1
    Well there's always [this pre-existing post][1] to answer your question. [1]: http://stackoverflow.com/questions/5874652/prop-vs-attr – dudewad Aug 06 '15 at 19:12
  • 2
    I'm voting to reopen this question, because I don't believe any answers on the linked question actually discuss when a developer might want to use `attr()` in a real-world scenario. – StriplingWarrior Aug 06 '15 at 19:25
  • 1
    @dudewad Please read my question again. It is entirely different from the question you linked, which I read and studied in depth before posting my question. If you can find an answer to my question in that link, please reference it. – dallin Aug 06 '15 at 19:25
  • Sorry for the drama over getting an answer to this question. I also believe this is definitely not a duplicate. – Maximillian Laumeister Aug 06 '15 at 19:31
  • 1
    @dallin: In case this doesn't get reopened, I'm going to add this as a comment. One possible reason is that since attributes do not change when you select/unselect them, you can use `attr()` to discover what value was there when the page first loaded, provided you don't have code that erroneously tries to modify the attribute directly. See http://jsfiddle.net/7s6qpnv6/ – StriplingWarrior Aug 06 '15 at 19:34
  • @MaximillianLaumeister lol, thank you. It's probably partially my fault. I need to work on learning the best way to word things to make a question clearly unique and straight forward. – dallin Aug 06 '15 at 19:35
  • 2
    @StriplingWarrior Thank you for your comment! As far as I'm aware though, you can access those same values through the `.prop()` function as well if you know the property that matches the attribute. For example, instead of using `.attr('checked')`, you can use `.prop('defaultChecked')` to get the initial value when the page was loaded. You then also have the advantage of getting a boolean over a string, so you can test it in an if statement. I am not aware of any examples, but does anyone know if there are any attributes that don't have a matching property like defaultChecked in the DOM? – dallin Aug 06 '15 at 19:39

1 Answers1

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

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

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.

Check this link

Shivakrishna
  • 1,333
  • 1
  • 12
  • 18