The difference between attr () and prop () in jquery

Source: Internet
Author: User

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 . checkedthe 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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.