jQuery - when to use attr() ?? when to use prop() ???

with effect from jQuery 1.6 a new method has been introduced to change or retrieve values of attributes (or properties).

So what is the big deal here you might ask. the problem is that new comers doesn't understand the difference between the attr() method which has been there and the new method prop() which introduced lately.

In a HTML element there is two kind of  things we can see.

1. Attributes
2. Properties

I will explain this by an example. Lets take following HTML input tag for an instance.

 <input id="q" value="" class="button-gray" name="_3_keywords" readonly>  

In the above example  id, value, name are belong to Attribute family while readonly is a property. So when to use attr() method or when to use prop() method is depend on whether you are dealing with an attribute or a property.

For example lets say you want to change the class attribute of above INPUT tag. Here you have to use  attr() method like below.

 $("#q").attr("class", "newclass")  

But lets say if you want to make the above INPUT tag readable (it is readonly originally according to the code above). So here you have to use prop() from  jQuery 1.6 onwards like below.

 $("#q").prop("readonly", false)  

Yeah you might noticed the change. Before jQuery 1.6 you have to use attr() method like below. 

 $("#q").attr("readonly", "readonly")  

But with new  prop() you can save life by just giving a boolean as the second attribute.