Jquery .prop() vs .attr()

One of the key point is jQuery 1.6 introduces .prop() function and separates DOM Attributes and Properties.After .prop() method there is biggest question aries what is the difference between .attr() & .prop() method.

Lets take a look.

As you can see in the above example by default i have set some value in input text and then tried to change it when my DOM is ready.

You can see the return result of .attr() and .prop() method in console.log

By this example we can say 

1.A property is in the DOM.

2.An attribute is in the HTML that is parsed into the DOM.

3.selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, and defaultSelected..etc should be retrieved and set with the .prop() method. These do not have corresponding attributes and are only properties.

4.For Checkbox

<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check me</label>

.attr( "checked" ): //checked
.prop( "checked" ): //true
.is( ":checked" ): //true