jQuery: The difference between attr() and prop()

attr()

Get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element.
Get the attribute of the first element in the set of matched elements, or set one or more attributes for every matched element. Add one or more attributes to a selected element

prop()

Get the value of a property for the first element in the set of matched elements or set one or more properties for every matched element.
Get the set of matched elements The property of the first element in the element, or add one or more properties to each selected element

It can be observed that the functions between the two are very similar, but the objects they operate on are different.

In this way, we reduce the problem to the difference between attribute and property.

Attribute and property both mean attributes. In order to distinguish them, we agree to name attribute as attribute and property as property. Let’s talk about attribute first. In javascript, there is getAttribute(), which is specially used to obtain the attributes of nodes. value.

The attribute value of the node, we refer to the value of src in

<img  id=&#39;test&#39; src=&#39;test.jpg&#39; alt="jQuery: The difference between attr() and prop()" >
    <script type=&#39;text/javascript&#39;>
        var image = document.getElementById(&#39;test&#39;);
        console.log(image.getAttribute(&#39;src&#39;));
    </script>

<img  id=&#39;test&#39; src=&#39;test.jpg&#39; alt="jQuery: The difference between attr() and prop()" >
    <script type=&#39;text/javascript&#39;>
        var image = document.getElementById(&#39;test&#39;);
        image.setAttribute(&#39;src&#39;, &#39;another.jpg&#39;);
    </script>

Let’s talk about property

Property is the property of DOM elements. It is the same as the usual way of using objects. You can get the property value of the object through object.property, or you can set the property value of the object through the method of object.property=property value. .

<img  id=&#39;test&#39; src=&#39;test.jpg&#39; alt="jQuery: The difference between attr() and prop()" >
    <script type=&#39;text/javascript&#39;>
        var image = document.getElementById(&#39;test&#39;);
        console.log(image.src);
    </script>

You can see that the characteristic value of the DOM element has been obtained. Although it refers to the same content as the attribute value of the node, there is still a difference in form.

<img  id=&#39;test&#39; src=&#39;test.jpg&#39; alt="jQuery: The difference between attr() and prop()" >
    <script type=&#39;text/javascript&#39;>
        var image = document.getElementById(&#39;test&#39;);
        image.src=&#39;another.jpg&#39;;
    </script>

<img  id=&#39;test&#39; src=&#39;test.jpg&#39; alt="jQuery: The difference between attr() and prop()" >
    <script type=&#39;text/javascript&#39;>
        var image = document.getElementById(&#39;test&#39;);
        image.src=&#39;another.jpg&#39;;
        console.log(img.getAttribute(&#39;src&#39;));
    </script>

2. Not all attributes are consistent with the corresponding property names. For example, the class in attribute has the corresponding name in property is className.

3. For properties whose values ​​are true/false, similar to input's checked, etc., the value obtained by the attribute is the value in the HTML document (checked), and the property obtains the calculation result (true/false). Changes in the property do not affect the attribute Literal value, but attribute changes will affect property calculation.