When to use attr() and prop() in jquery

Before jQuery 1.6 , the attr() method sometimes took property values into account when retrieving some attributes, which caused in inconsistent behavior. And thus, the prop() method was introduced. As of jQuery 1.6. , the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes. 

What actually is Attributes?
Attributes carry additional information about an HTML element and come in name=”value” pairs. You can set an attribute for HTML element and define it while writing the source code. 

simple example can be: 

?

1	<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. 

Or,

first we need to think about what is an attribute and what is a property -

Attributes provide additional info about an HTML element - for example <input id="some_id" value="some_value"> basically they are things with name="value" in HTML constructs the point though is we are now talking about what is contained in the original HTML file

Now once the HTML is loaded and placed into the DOM HTML structure, then it becomes a node in that tree and it becomes a property of that node.

Content wise those things are the same, except if you modify

so now we can discuss jQuery.attr() vs jQuery.prop()

the jQuery.attr() will give the value of the first matching attribute in the original HTML file, while

jQuery.prop() will give the value of that same object but instead fetches it from the populated DOM structure

in many cases the returned item will be the same - but keep in mind one is the current state vs the original state

But - in earlier versions of jQuery (before 1.6) there are some special considerations, so if that is what you are doing then I would take a closer read in api.jquery.com/prop

Example - 

@{

    ViewBag.Title = "Home Page";

}

<script src="~/Scripts/jquery-1.10.2.min.js"></script>

<div class="jumbotron">

    <h1>Check attribute and property in jquery</h1>

    <input type='text' value='abc'>

    <button id='go'>Go</button>

    <script>

        $('#go').click(function () {

            debugger;

            var attrMethod = $('input[type="text"]').attr('value');

            alert(attrMethod);

            var propMethod = $('input[type="text"]').prop('value');

            alert(propMethod);

        });

    </script>

</div>

1)- click on button then get value abc by using both attr() and prop()

2)- Once change value to abcd then get abc by using attr() and abcd by using prop().

a