attr(): Get the value of an attribute for the first element in the set of matched elements. Whereas,.prop(): (Introduced in jQuery 1.6) Get the value of a property for the first element in the set of matched elements.
Attributes carry additional information about an HTML element and come in name=”value” pairs. Where 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.
.attr() gives you the value of element as it was defined 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.