What is difference between Prop and Attr in jQuery ?

This is one of the most question that come to many developers while coding or or may be in interviews.

Today we will discuses over this, because many of developer uses them  frequently but they are not understands the basic difference between them.

So in  article  I am gonna  explains the difference between prop and attr in jQuery.

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

JQuery. Prop()
Gets the value of a property for the first element in the set of matched elements.


What actually is Attributes?

Attributes are additional properties.Means we can  have our own attributes.

simple example can be:

<input id="test" type="test" value="test">

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.