Introduction to attr and prop of jQuery

The attribute and the property

Both attribute and property can be translated as attributes. To make a distinction, these two words are usually translated as attributes and properties.

< Div id = "test" > Click Here< / div>

In the above HTML statement, there are three nodes, namely Element "div", attribute "id", and Text "click here". The most common attribute formally refers to the node of attribute type. In JavaScript, there is a function called.getattribute (name)/setAttribute(name,value) that specifically processes attributes. Attribute, of course, not only we can see this a few on the HTML document, we can custom attributed to the DOM node

<div id="test">123</div>

    <script type="text/javascript">
        var t=document.getElementById('test');
        t.setAttribute('class','active');
        t.setAttribute('customizedAttr','customized');
    </script>

So div can be changed to

<div id="test" class="active" customizedattr="customized">123</div>

Attributes set by the setAttribute method are eventually reflected in the node of the attribute type of the element

A property is a field of a DOM object, just like some of the objects we usually use. It contains many fields, and these fields are called properties.

It seems that attributes and properties should have nothing to do with each other. Attribute and property are easy to mix because many attribute nodes also have a corresponding property attribute. For example, the "id" attribute of the above div can also be retrieved by t.i. (in fact, most people get it this way). After id is changed by property, the id obtained by getAttibute is the updated id.

t.id='test1';
console.log(t.getAttribute('id'));//test1

We can also customize properties

t.customizedProp='customized prop';

The difference between

1. Share data with build-in attribute, attribute and property. Attribute changes will affect the property, and vice versa

< img Alt = "" border = 0 height = 249 SRC =" / / files.jb51.net/file_images/article/201310/2013101021431623.png "width = 388 >

2. Not all attributes are consistent with the corresponding property names. For example, the class attribute of the attribute just used should be className when using the property operation

t.className='active2';

3. For properties whose value is true/false, such as input checked attribute, etc., the value obtained by attribute is the literal value of HTML document, while the property is the calculated result. The property change does not affect the literal value of attribute, but the attribute change will be calculated from the property

<input id="test3" type="checkbox"/>

var t=document.getElementById('test3');
        console.log(t.getAttribute('checked'));//null
        console.log(t.checked);//false;

        t.setAttribute('checked','checked');
        console.log(t.getAttribute('checked'));//checked
        console.log(t.checked);//true

        t.checked=false;
        console.log(t.getAttribute('checked'));//checked
        console.log(t.checked);//false

4. For some attributes related to paths, the two get different values, but the same attribute gets literal value, and the property gets the complete path after calculation

<a id="test4" href="#">Click</a>

var t=document.getElementById('test4');
        console.log(t.getAttribute('href'));//#
        console.log(t.href);//file:///C:/Users/bsun/Desktop/ss/anonymous.html#

Check out the browser (IE) compatibility problems (link: http://www.w3help.org/zh-cn/causes/SD9006)

Attr and prop

Believe that after reading the above content, we will understand why jQuery to add prop method, there is also special explanation in jQuery API

The Attributes vs. Properties

In some special cases, attributes and properties can be quite different. Prior to jQuery1.6, the.attr() method used a property value to get some attributes, which led to some inconsistent behavior. In query1.6, the.prop() method provides an explicit way to get property values, so the.attr() method simply returns attributes.

For example, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, and defaultSelected should get/set using the.prop() method. Before query1.6, these properties that are not attributes need to be obtained using the.attr() method. There is no corresponding attibute, just property.

For the Boolean type attributes, for example, there is an HTML tag like this, which in JavaScript has a variable called elem

<input type="checkbox" checked="checked" />

Elem. 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 The < code > $(elem). Attr (" checked ") < / code > (pre - 1.6) true (Boolean) Changed with checkbox state
According to (link: http://www.w3.org/TR/html401/interact/forms.html#h-17.4), checked attribute is a Boolean value, which means that as long as the checked attribute shown in HTML, and then the corresponding property is true, no value, even checked it some applicable to other members of the Boolean type attributes.

The most important thing to remember about the checked property, however, is that it is not consistent with the checked property. This attribute is actually the same as the defaultChecked property, and should only be used to set the initial value of the checkbox. The checked attribute does not change with the state of the checkedbox, but the checked property does. Therefore, property should be used to determine whether a checkebox is selected for browser compatibility

 
if ( elem.checked ) 
if ( $( elem ).prop( "checked" ) ) 
if ( $( elem ).is( ":checked" ) ) 

This applies to other dynamic attributes such as selected and value.

In previous IE9 versions, setting the value of the DOM element property (except for simple types: number, string, Boolean) using the.prop() method caused a memory leak if the property was not deleted before the DOM element was removed. To set the DOM object's value securely and avoid memory leaks, use the.data() method.

Usage scenarios

Now that you know what's going on, it's clear when you should use.attr() and when you should use.prop(), but why not post a popular picture

< img border = 0 title = image height = 671 Alt = image SRC = "/ / files.jb51.net/file_images/article/201310/2013101021431624.png" width = 479 border = 0 >