Example introduction to the difference between prop and attr in jQuery learning_jquery

1. .prop( propertyName )
Get the value of the Property of the first element in the matching set
2.
.prop( propertyName, value )
.prop( map )
.prop (propertyName, function(index, oldPropertyValue))
Set one or more attributes to the matching element set

The difference between .prop() and .attr()

The following is about jQuery1 Description of the changes to the Attributes module in .6 and 1.6.1, and the preferred use of the .attr() method and the .prop() method

The changes to the Attributes module are to remove the ambiguity between attributes and properties , but caused some confusion in the jQuery community because in all versions prior to 1.6 a single method (.attr()) was used to handle attributes and properties. But the old .attr() method has some bugs and is difficult to maintain. jQuery1.6.1 updates the Attributes module and fixes several bugs.

elem.checked true (Boolean) Will change with checkbox state
$(elem).prop("checked") true (Boolean) Will change with checkbox state
elem.getAttribute("checked ") "checked" (String) Initial state of the checkbox; does not change
$(elem).attr("checked")(1.6) "checked" (String) Initial state of the checkbox; does not change
$(elem).attr("checked")(1.6.1 ) "checked" (String) Will change with checkbox state
$(elem).attr("checked")(pre-1.6) true ( Boolean) Changed with checkbox state

if ( elem.checked )
if ( $(elem).prop("checked") )
if ( $(elem).is(":checked ") )

These three all return Boolean values.

In order to make the changes in the .attr() method in jQuery 1.6 more clear, here are some examples of using .attr(). Although it worked normally in previous versions of jQuery, now The .prop() method must be used instead:

First of all, using the .attr() method in window or document does not work properly in jQuery 1.6, because there cannot be attributes in window or document. They contain properties (such as location or readyState) and must be manipulated using the .prop() method or simply using native JavaScript methods. In jQuery 1.6.1, using .attr() in window and document will be automatically converted to using .prop instead of throwing an error.

Secondly, checked, selected, and other boolean attributes mentioned earlier are treated specially because of the special relationship between these attributes and their corresponding properties. Basically, an attribute is what you see in the following HTML:



Boolean attributes, such as checked, are only set to default or initial values. In a checkbox element, checked attributes are set when the page loads, regardless of whether the checkbox element is selected.

Properties are what the browser uses to record the current value. Normally, properties reflect their corresponding attributes (if present). But this is not the case with boolean attriubutes. Boolean properties are kept up to date when the user clicks a checkbox element or selects an option in a select element. But the corresponding boolean attributes are different. As mentioned above, they are only used by the browser to save the initial value.

$(":checkbox").get(0).checked = true;

// Is the same as $(":checkbox:first").prop("checked" , true);

In jQuery1.6, if you use the following method to set checked:

$(“:checkbox”).attr(“checked”, true);

The checkbox element will not be checked because it is a property that needs to be set, but all your settings will be initial values.

However, once jQuery 1.6 was released, the jQuery team understood that setting some values ​​was not particularly useful when the browser only cared about page loading. Therefore, in order to maintain backward compatibility and the usefulness of the .attr() method, we can continue to use the .attr() method to get and set these boolean attributes in jQuery 1.6.1.

The most common attributes are checked, selected, disabled and readOnly, but here is the complete list of jQuery 1.6.1 supports using .attr() to dynamically get and set boolean attributes/properties:

autofocus, autoplay, async, checked, controls, defer, disabled,

hidden, loop, multiple, open, readonly, required, scoped, selected

It is still recommended to use the .prop() method To set these boolean attributes/properties, even if these use cases are not converted to use the .prop() method, your code will still run normally in jQuery 1.6.1.

The following is a list of some attributes and properties. Under normal circumstances, you should use their corresponding methods (see the list below) to get and set them. The following is the first usage, but the .attr() method will work with all attributes.

Note: Some DOM element properties are also listed below, but only run in the new .prop() method

* For example: window.location

** If needed over (if needed over) .width()

Neither .attr() nor .prop() should be used to get/set values.Use the .val() method instead (even if you use .attr("value","somevalue") you can continue to run, just like you did before 1.6)

3. Overview of preferred usage

.prop() method should be used to handle boolean attributes/properties and properties that do not exist in html (eg: window.location). All other attributes (the ones you see in HTML) can and should continue to be manipulated using the .attr() method.

The above summary has been described clearly enough, and there is no need for me to summarize it further.

Reference:
http://hxq0506.iteye.com/blog/1046334