Examples of differences between prop and attr in jQuery Learning

1. prop (propertyName)
Obtains the Property value of the first element in the matching set.
2,
. Prop (propertyName, value)
. Prop (map)
. Prop (propertyName, function (index, oldPropertyValue ))
Set one or more attributes for the Matching Element Set

Difference between. prop () and. attr ()

The following describes the Attributes module changes in jQuery1.6 and 1.6.1, as well as the preferred use of the. attr () method and. prop () method.

The Attributes module is changed to remove the ambiguity between attributes and properties, but it causes some confusion in the jQuery community, because a method is used in all versions earlier than 1.6 (. attr () to process attributes and properties. However, the old. attr () method has some bugs and is difficult to maintain. JQuery1.6.1 updated the Attributes module and fixed 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 "))

All three return Boolean values.

To enable. the changes in the attr () method are clearly understood. The following are some examples of usage. the attr () example works normally in earlier versions of jQuery, but it must be used now. prop () method instead:
 
First, the. attr () method in window or document cannot run normally in jQuery1.6, because attributes cannot exist in window and document. They contain properties (such as location or readyState) and must be operated using the. prop () method or simply using the javascript native method. In jQuery1.6.1, using. attr () in the window and document will be automatically converted to using. prop instead of throwing an error.

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

<Input type = "checkbox" checked = "checked">

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

Properties is what the browser uses to record the current value. Normally, properties reflects the corresponding attributes (if any ). But this is not a case of boolean attriubutes. When a user clicks a checkbox element or selects an option for a select element, boolean properties remains up-to-date. However, the corresponding boolean attributes are different. As described above, they are only used by the browser to save the initial values.

$ (": 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 the property to be set, but all your settings are the initial values.

However, when jQuery1.6 was released, the jQuery team understood that setting some values is not particularly useful when the browser only cares about page loading. Therefore, to maintain backward compatibility and the usefulness of the. attr () method, we can continue to use the. attr () method in jQuery1.6.1 to obtain and set these boolean attributes.

The most common attributes types are checked, selected, disabled, and readOnly. However, the complete list of Using. attr () supported by jQuery1.6.1 to dynamically obtain and set boolean attributes/properties is as follows:

Autofocus, autoplay, async, checked, controls, defer, disabled,

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

We recommend that you use it. the prop () method is used to set these boolean attributes/properties, even if these use cases are not converted to use. prop () method, but your code can still run normally in jQuery1.6.1.

Below are some attributes and properties lists. Normally, you should use the corresponding method (see the list below) to obtain and set them. The following is the first usage, but the. attr () method can run in all attributes cases.

Note: The properties of some DOM elements are also listed below, but only run in the new. prop () method.
 
* Example: window. location

** If you need ()

. Attr () and. prop () should not be used for value/set value. Use the. val () method instead (even if you use. attr ("value", "somevalue"), you can continue running, as you did before 1.6)

3. Overview of preferred usage

The. prop () method should be used to process boolean attributes/properties and properties that do not exist in html (such as window. location. All other attributes (the ones you see in html) can and should continue to use the. attr () method for operations.

The above overview is clear enough, and I do not need to summarize it.

References:
Http://hxq0506.iteye.com/blog/1046334