difference between prop() and attr() in jQuery and when to use attr() and prop()

Question

This question already has answers here:

Answer 1

from docs

The difference between attributes and properties can be important in specific situations. Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.

example

For example, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, and defaultSelected should be retrieved and set with the .prop() method. Prior to jQuery 1.6, these properties were retrievable with the .attr() method, but this was not within the scope of attr. These do not have corresponding attributes and are only properties.

updated after comment

You can set an attribute for HTML element. You define it while writing the source code, once the browser parse your code, corresponding DOM node will be created which is an object thus having properties.

Simple example can be..

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

Here type, value, id are attributes.Once browser renders it, you will get other properties like align, alt, autofocus, baseURI, checked and so on.

link if you want to read more on this