Jquery .attr():

1. Get the value of an attribute for the first element in the set of matched elements.

2. An attribute value may only be a string.

3. The attributes contains basic information along with some additional information about an HTML element and come in name=value pairs. The attributes gets changed for that html tag using .attr.

4. The initial states(start states) are represented by attributes. It doesn't give any information about the current state.

Jquery .prop():

1. Gets the value of a property for the first element in the set of matched elements.

2. A property can be of any type. For example, the checked property is of Boolean type.

3. The .prop() method provides a way to explicitly retrieve property values.

4. In HTML DOM tree,it is the property that works as a representation of an attribute.The corresponding DOM node is created which is an object that contains properties,when the browser parses the HTML code.

5. Since the prop() stores or keeps the current state value,therefore it is recommended to retrieve the values of the elements that has been modified using JavaScript/jQuery.

Here is an example code for .attr() and .prop() :-

<input id="sample" checked="checked" type="checkbox" />
.attr('checked') //returns checked
.prop('checked') //returns true
.is(':checked') //returns true

This code depicts that .prop returns a boolean value for checked,selected and so on while .attr returns a string value that is defined.