Difference Between Prop and Attr in jQuery

If I run the following jQuery syntax then it will produce such results.


Now I've slightly changed the code and removed the read-only attribute as shown below in the image:


I run the application and see some attribute and property to understand the difference on the fly.

Initially after running the application we have these attributes and properties of input text type as depicted in the image below.

Note: Kindly scroll down when you run the attached sample application to see the Value property using the Firebug tool of the Firefox browser.



The property always represents the current state while the attribute (except in old versions of IE) represents the initial state or is meant for HTML attributes since they are strictly defined. The attribute tells you nothing about the current state.

Reference MSDN
The Prop() method returns a Boolean value for checked, selected, disabled, readOnly and so on while attr returns a defined string. So, you can directly use .prop("checked") in an if condition.

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

.attr() calls .prop() internally so the .attr() method will be slightly slower than accessing them directly through .prop().

Question: What are the differences among .js and .min.js and vsdoc.js?


Question: How to select id that contains a Meta Character?