Similarities and differences between. Prop () and. attr () in jquery1.6

Transferred from: http://hxq0506.iteye.com/blog/1046334

Recently, in Iteye's news, jquery has been updated to 1.6.1. And the biggest change in previous versions is the addition of the. Prop method. But the. Prop () method and the. attr () method are literally difficult to distinguish. Both properties and attributes have the meaning of "attribute" in Chinese.
The following is a brief translation of the usage of. Prop () and. attr () According to this blog post (javascript:mctmp (0)):

1, upgrade from 1.5.2 to 1.6.1

By introducing the new method. Prop () and the change in the. attr () method, jQuery1.6.1 caused a heated discussion about the differences and linkages between attributes and properties. At the same time, 1.6.1 also resolves some backward compatibility issues. When upgrading from 1.5.2 to 1.6.1, you do not have to modify any attribute code.

The following is a description of the attributes module changes in jQuery1.6 and 1.6.1, as well as the preferred use of the. attr () method and the. Prop () method. However, as mentioned earlier, jQuery1.6.1 allows you to use the. attr () method just as it used to be in all cases.

2. What has changed

The change in the attributes module was to remove ambiguities between the attributes and properties, but it caused some confusion in the jquery community because one method was used in all versions prior to 1.6 (. attr ()) To deal with attributes and properties. But the old. attr () method has some bugs that are difficult to maintain. jQuery1.6.1 has updated the Attributes module and fixed several bugs.

In particular, the Boolean attributes, such as: checked,selected,readonly and disabled are treated the same as before 1.6.1 and 1.6. This means the following code:

JS Code

1. $ (": CheckBox"). attr ("Checked", true);
2. $ ("option"). attr ("selected", true);
3. $ ("input"). attr ("ReadOnly", true);
4. $ ("input"). attr ("Disabled", true);

Even this kind of code:

JS Code

1. if ($ (": CheckBox"). attr ("checked")) {/ * do something */}

There is no need to make any changes in 1.6.1 in order to maintain the previously expected run results.

In order to make the change of the. attr () method in jQuery1.6 understood, here are some examples of using. attr (), although it works correctly in previous versions of jquery, but now you must use the. Prop () method instead:

First, the use of the. attr () method in window or document does not work correctly in jQuery1.6 because the window and document cannot have attributes. They contain properties (for example, location or readystate) and must be manipulated using the. Prop () method or simply using JavaScript native methods. In jQuery1.6.1, window and document use. attr () will be automatically turned into use. Prop instead of throwing an error.

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

JS Code

1. <input type= "checkbox" checked= "Checked" >

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

The properties are what the browser uses to record the current value. Under normal circumstances, the properties reflect their corresponding attributes (if present). But this is not the case with a Boolean attriubutes. The Boolean properties remain up-to-date when the user taps a checkbox element or selects an option for a SELECT element. But the corresponding Boolean attributes are not the same, as described above, they are only used by the browser to save the initial value.

JS Code

1. $ (": CheckBox"). Get (0). checked = true;
2. is the same as $ (": Checkbox:first"). Prop ("checked", true);

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

JS Code

1. $ (": CheckBox"). attr ("Checked", true);

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

However, when jQuery1.6 was released, the jquery team understood that setting some values was not particularly useful when the browser was only concerned with page loading. So, to keep backwards compatibility and the usefulness of the. attr () method, we can continue to use the. attr () method in jQuery1.6.1 to get and set these Boolean attributes.

The most common attributes are checked,selected,disabled and ReadOnly, but the following is the use of jQuery1.6.1 support. attr () dynamically acquire and set the Boolean attributes/ A complete list of properties:

JS Code

1. Autofocus, AutoPlay, async, checked, controls, defer, disabled,
2. Hidden, loop, multiple, open, ReadOnly, required, scoped, selected

(Translator Note: Most of the new attributes are HTML5)

It is also recommended that you use the. Prop () method to set these Boolean attributes/properties, even if these use cases are not converted to use the. Prop () method, but your code can still run correctly in jQuery1.6.1.

Here are a list of some of the attributes and properties, which should normally be used with their corresponding methods (see the list below) to get 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

For examplewindow.location
* * If required on (if needed over).width()

. attr () and. Prop () should not be used to value/set values. Use the. Val () method instead (even if you use. attr ("value", "somevalue") to continue running, as you did before 1.6)

3. Overview of Preferred usage

The. Prop () method should be used to handle Boolean attributes/properties and properties that do not exist in HTML (for example, window.location). All other attributes (those you see in HTML) can and should continue to be manipulated using the. attr () method.

Similarities and differences between. Prop () and. attr () in jquery1.6