An example of the difference between prop and attr in jQuery learning
- 2020-03-29 23:49:36
- OfStack
1. Prop (propertyName)
Gets the value of the Property of the first element in the matching set
2,
Prop (propertyName, value)
The prop (map)
.prop(propertyName, function(index, oldPropertyValue))
Sets one or more attributes to a collection of matching elements
.prop() is different from.attr()
The following is a description of the changes to the Attributes module in query1.6 and 1.6.1, as well as the preferred use of the.attr() and.prop() methods
The change to the Attributes module removed the ambiguity between Attributes and properties, but it caused some confusion in the jQuery community because all previous releases of 1.6 used a method (.attr()) to handle Attributes and properties. But the old.attr() method has some bugs that are hard to maintain. Query1.6.1 updates the Attributes module and fixes several bugs.
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 make the change to the.attr() method in query1.6 clear, here are some examples of using.attr(), which worked in previous versions of jQuery, but now must be replaced by the.prop () method:
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201311/201311151722493.gif? 20131015172320 ">
First, the.attr() method used in Windows or documents does not work in query1.6 because there are no attributes in Windows or documents. They contain properties(such as location or readyState) that must be manipulated using the.prop() method or simply using javascript native methods. In query1.6.1, the use of.attr() in Windows and documents is automatically converted to use.prop instead of throwing an error.
Second, checked,selected, and the other Boolean attributes mentioned earlier are treated special 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, 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 is what the browser USES to record the current value. Normally, properties reflect their corresponding attributes, if any. But this is not a case of boomerouse attrites. Boolean properties are kept up to date when the user clicks on a checkbox element or selects an option of a select element. But the corresponding Boolean attributes are different, and as mentioned above, they are only used by the browser to hold the initial values.
$(" : "checkbox). Get (0) checked = true;
// Is the same as $(":checkbox:first").prop(" checked ", true);
In jQuery1.6, if checked is set using the following method:
$(" : "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, once query1.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 maintain backward compatibility and the usefulness of the.attr() method, we can continue to use the.attr() method in query1.6.1 to get and set these Boolean attributes.
The most common attributes are checked, selected and disabled and readOnly, but here are jQuery1.6.1 support use. Attr () to dynamically get and set a Boolean attributes/properties of complete list:
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 the use cases are not converted to use the.prop() method, your code will still work in query1.6.1.
Below is a list of attributes and properties that you should normally get and set using their corresponding methods (see the list below). The following is the first usage, but the.attr() method can run under all attributes.
Note: the properties of some DOM elements are also listed below, but only run in the new.prop() method
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201311/201311151723484.gif? 2013101517240 ">
* e.g. Window.location
** if needed over).width()
.attr() and.prop() should not be used to set/value. Use the.val() method instead (even if.attr("value","somevalue") can continue, as it 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 such as window.location. All the other attributes(the ones you see in the HTML) can and should continue to be manipulated using the.attr() method.
The overview above is clear enough, and I don't need to summarize it.
References:
http://hxq0506.iteye.com/blog/1046334
Gets the value of the Property of the first element in the matching set
2,
Prop (propertyName, value)
The prop (map)
.prop(propertyName, function(index, oldPropertyValue))
Sets one or more attributes to a collection of matching elements
.prop() is different from.attr()
The following is a description of the changes to the Attributes module in query1.6 and 1.6.1, as well as the preferred use of the.attr() and.prop() methods
The change to the Attributes module removed the ambiguity between Attributes and properties, but it caused some confusion in the jQuery community because all previous releases of 1.6 used a method (.attr()) to handle Attributes and properties. But the old.attr() method has some bugs that are hard to maintain. Query1.6.1 updates the Attributes module and fixes several bugs.
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 make the change to the.attr() method in query1.6 clear, here are some examples of using.attr(), which worked in previous versions of jQuery, but now must be replaced by the.prop () method:
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201311/201311151722493.gif? 20131015172320 ">
First, the.attr() method used in Windows or documents does not work in query1.6 because there are no attributes in Windows or documents. They contain properties(such as location or readyState) that must be manipulated using the.prop() method or simply using javascript native methods. In query1.6.1, the use of.attr() in Windows and documents is automatically converted to use.prop instead of throwing an error.
Second, checked,selected, and the other Boolean attributes mentioned earlier are treated special 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, 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 is what the browser USES to record the current value. Normally, properties reflect their corresponding attributes, if any. But this is not a case of boomerouse attrites. Boolean properties are kept up to date when the user clicks on a checkbox element or selects an option of a select element. But the corresponding Boolean attributes are different, and as mentioned above, they are only used by the browser to hold the initial values.
$(" : "checkbox). Get (0) checked = true;
// Is the same as $(":checkbox:first").prop(" checked ", true);
In jQuery1.6, if checked is set using the following method:
$(" : "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, once query1.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 maintain backward compatibility and the usefulness of the.attr() method, we can continue to use the.attr() method in query1.6.1 to get and set these Boolean attributes.
The most common attributes are checked, selected and disabled and readOnly, but here are jQuery1.6.1 support use. Attr () to dynamically get and set a Boolean attributes/properties of complete list:
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 the use cases are not converted to use the.prop() method, your code will still work in query1.6.1.
Below is a list of attributes and properties that you should normally get and set using their corresponding methods (see the list below). The following is the first usage, but the.attr() method can run under all attributes.
Note: the properties of some DOM elements are also listed below, but only run in the new.prop() method
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201311/201311151723484.gif? 2013101517240 ">
* e.g. Window.location
** if needed over).width()
.attr() and.prop() should not be used to set/value. Use the.val() method instead (even if.attr("value","somevalue") can continue, as it 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 such as window.location. All the other attributes(the ones you see in the HTML) can and should continue to be manipulated using the.attr() method.
The overview above is clear enough, and I don't need to summarize it.
References:
http://hxq0506.iteye.com/blog/1046334