We know that there are two common ways to get element attributes in jquery, one is the attr () method, which is used more often and is the first one we think of. The other is the prop () method, which is seldom used before, and it is a new method after jquery1.6. So these two methods are to get properties, then God horse difference? Gossip doesn't say much, let's talk about it.
First, from the word interpretation, attr and prop are the abbreviations of the word attribute and property respectively, and they all mean "attributes". Let's look at a simple example.
<body> <input type= "text" id= "inputs" value= "name" > <script > $ ("#inputs"). Focusout (function() { var inputval = $ (this). attr ("value"); alert (inputval); }); </script></body>
A simple input box, we want to get the value after the user input, and then I wrote the above section of code. When I open a browser test, I find that no matter what value I enter, the pop-up is always name, which is the initial value of value. The same input box we try again with the prop () method.
<body> <input type= "text" id= "inputs" value= "name" > <script > $ ("#inputs"). Focusout (function() { var inputval = $ (this). Prop ("value"); alert (inputval); }); </script>
</body>
We found out what I was typing this time, and that's what I wanted. If this example does not explain anything, then let's take a look at the following example.
<body> <input type= "checkbox" id= "Testbox" > <script> console.log ($ (' # Testbox '). attr (' checked ')); // undefined Console.log ($ (' #testBox '). Prop (' checked ')); // false </script></body>
A radio box, I want to know whether it is selected, and then I get his checked value, this time I found that using the attr () method to return the undefined, and the prop () method can be used to correctly obtain a Boolean value. What is this for?
For a DOM node object, properties is all the properties of the object, and attributes is the property of that object's corresponding element (label). When a DOM node is created for an HTML element, most of its properties have the same or similar name as the corresponding attributes, but this is not a one-to-one relationship.
For the first example,
The ID obtained by Id:property is a mapping of the ID on attribute: Getting the property equals reading its corresponding attribute value, and setting the property is the attribute assignment.
Type:property is a mapping of attribute: Acquiring the property is equal to reading its corresponding attribute value, and setting the property is attribute assignment. But type is not a purely mapped property because its value is limited to the known value (that is, the legal type of input, such as: text, password). If you have <input type="aaa">
, then theInput.getAttribute("type")
it will return "aaa"
and theInput.type
will return "text"
.
Value:property does not map value
attribute. Instead, the current value of input. When the user manually changes the value of the input box, value
the property reflects the change. The property reflects the current text content of input, while attribute is the initial text content specified in the HTML source value attribute.
For the example of the form, the attr()
method will return to the attributes that are not set undefined
. checked
the value of the attribute does not change according to the status of the checkbox, and the property checked
will. Therefore, when judging whether a checkbox is selected, you should use theproperty。
The difference between attr () and prop () in jquery