The attr and prop of jquery

jQuery1.6 adds a new prop method that looks and uses the same as the attr method, what is the difference between these two methods? This is from the HTML attribute and property differences, attr and prop is the abbreviation for these two things.

Attribute and property

Attribute and property can be translated into attributes, in order to differentiate, these two words are usually translated into attributes and properties.

<div id= "Test" >click here</div>

The above HTML statement has three nodes, namely the element "div", attribute "id", Text "click here", our most common attribute formally refers to the attribute type node, In JavaScript there are functions that specialize in handling attribute. getattribute (name)/SetAttribute (Name,value). Of course attribute is not just the few we can see in the HTML document, we can customize the 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>

This allows Div to be modified to

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

attribute that are set by method SetAttribute will eventually be reflected in the node of the attribute type of the element

property is a field of Dom objects, as with some of the objects we normally use, including a lot of fields, which are property, values, or set values that pass through the "object. Field" way as normal fields.

It seems that attribute and property should have nothing to do with it. Attribute and properties are easy to mix abnormal because many attribute nodes have a corresponding property attribute, such as the "id" of the div above attribute You can also use T.id (which is actually what most people get), and after changing the ID with the property, the ID obtained with Getattibute is the updated ID.

T.id= ' test1 '; Console.log (T.getattribute (' id '));//test1

We can also customize the property

t.customizedprop= ' customized prop ';

Difference

1. In the build-in attribute, attribute and property share data, attribute changes the property, and vice versa, but the custom properties of both are independent data, even if name does not affect each other, it looks like this picture , but IE6, 7 do not differentiate, and still share the custom attribute data

2. Not all attribute are consistent with the corresponding property name, such as the class attribute of the attribute you have just used, which should be the case when you use the properties classname

T.classname= ' Active2 ';

3. For the value is True/false property, similar to input checked attribute, etc., attribute obtains the value is the HTML document literal value, the property is obtains the computation result, Property changes do not affect attribute literals, but attribute changes will always be calculated

<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 of the path-related properties, the values of the two are different, but the same attribute obtained is the literal, the property gets the full path after the 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#

About the compatibility problems caused by the browser (IE) can see that IE confuses the DOM object properties and HTML tag attributes (attribute), resulting in incorrect implementation of SetAttribute, getattribute

attr and prop

Believe that after reading the above content, we will understand why jquery to add Prop method, in the jquery API also has a special explanation

Attributes VS. Properties

In some special cases, the difference between attributes and properties is very large. Before jQuery1.6, the. attr () method uses the property value when obtaining some attributes, which results in some inconsistent behavior. In jQuery1.6, the. Prop () method provides a clear way to get the property, so the. attr () method returns only attributes.

For example,,,,,, selectedIndex tagName nodeName nodeType ownerDocument defaultChecked , and defaultSelected应该使用.prop()方法获取/设置值。 before jQuery1.6, these property that do not belong to attribute need to be obtained using the. attr () method. These few do not have the corresponding attibute, only the property.

About Boolean type attributes, such as an HTML tag, which is in JavaScript with the variable named Elem

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

Elem.checked	true(Boolean) Would change with checkbox state
$ (elem). Prop ("checked")	true(Boolean) Would 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) Would change with checkbox state
$( elem ).attr( "checked" )(pre-1.6)	true(Boolean) Changed with checkbox State

According to the Specification,checked property is a Boolean value, which means that as long as the checked property is displayed in HTML, then the corresponding properties should be true, even if checked has no value, Craved applies to properties of other Boolean types as well.

The most important thing to remember about the checked attribute, however, is that it is not consistent with the checked property. In fact, this attribute is consistent with the property and defaultChecked should only be used to set the initial value of the checkbox. Checked attribute does not change with the state of Checkedbox, but the checked property changes accordingly. Therefore the browser-compatible judge whether the Checkebox is selected should use the property

if (elem.checked) if ($ (elem). Prop ("checked")) if ($ (elem). Is (": Checked"))

This also applies to other dynamic attribute similar to selected and value.

In previous versions of IE9, if the property was not deleted before the DOM element was removed, using the. Prop () method sets the value of the DOM element property (except Simple type: Number, String, Boolean) to cause a memory leak. To safely set the value of the DOM object and avoid memory leaks, you can use the. Data () method.

Usage Scenarios

Actually understand the above mentioned content, when should use. attr () when to use. Prop () It's clear, but it's a very popular picture.

The attr and prop of jquery