Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript AJAX Basics (retiring) AJAX and APIs Stage 4 Challenge Answer

Kieran Barker
Kieran Barker
15,004 Points

.prop() vs .attr()

  1. Why does Dave use jQuery's .prop() method in one instance, and then .attr() in another to accomplish the same thing? What's the difference? Surely it would be better to be consistent?

  2. Why does setting .prop("disabled", false) or .attr("disabled", false) work? My understanding was that the mere presence of the disabled attribute turns it on, so disabled, disabled="", disabled="true", disabled="false", and disabled="sandwich" would all make something disabled. I thought you had to actually remove the attribute altogether. Or is this how jQuery handles it in this case, specifically?

2 Answers

I had the same question and did not find the jQuery docs very useful in answering it. I found several discussions of how properties and attributes are different, but what helped me understand it was to realize that in the first case of $searchField.prop("disabled", true) we are setting the property of that field to be disabled. In the second case, $submitButton.attr("disabled", true).val("searching ..."); we are disabling the submit button AND we are changing the value attribute from "Search" to "searching ...". Hope that is helpful.

Nour El-din El-helw
Nour El-din El-helw
8,241 Points

I think the jQuery docs will answer your questions. :D

I understand why this comment got down votes because one's gut reaction as a new learner is to react negatively to someone who suggests that you search for your own answers; however, there is wisdom to his suggestion.

  1. Things change, including how jQuery functions work. If you rely on static responses, you could be learning deprecated solutions to a problem. The jQuery docs will ALWAYS be up to date and therefore they are a more reliable source of information.
  2. If you don't research answers yourself, you'll never get a full picture of how jQuery (or any other programming language or library) works. There are almost always several ways to do something. This case is no different.
  3. The jQuery docs do have a better explanation for the difference between .attr() and .prop() than anything posted here so far. In fact, there is a section called "Attributes vs. Properties". Imagine that.

Something from a Stackflow thread: "Attributes are defined by HTML. Properties are defined by DOM. Some HTML attributes have 1:1 mapping onto properties. id is one example of such. Some do not (e.g. the value attribute specifies the initial value of an input, but the value property specifies the current value)."