The difference between the jquery function attr () and prop ()

In jquery, both the attr () function and the prop () function are used to set or get the specified properties, and their parameters and usages are almost identical.

But it has to be said that the use of these two functions is very different. Let me describe in detail the differences between the two functions.

1. Different objects of operation

Obviously,attr and prop are abbreviations for word attribute and  property respectively, and they all mean "attributes".

However, in jquery,attribute and property  are two different concepts. Attribute represents the properties of the HTML document node, and the property represents the properties of the JS object.

<!--here the ID, class, and data_id are all attribute--><div id= "message" class= "test" data_id= "123" of the element's document node ></div ><script type= "Text/javascript" >//here the name, age, and URL are all obj Propertyvar obj = {name: "Codeplayer", age:18, url: "H ttp://www.baidu.com/"};</script>

In jquery, the prop() function is designed to set or get the property on the specified DOM element (referred to as the JS object, element type), and attr() the function is designed to set or get properties on the document node corresponding to the specified DOM element ( attribute).

<!--the attr () function is for the attribute of the document node--><div id= "message" class= "test" data_id= "123" ></div><script The type= "Text/javascript" >//prop () function is for the DOM Element (msg) itself Propertyvar msg = document.getElementById ("message"); var $ msg = $ (msg);</script>

Of course, in the underlying implementation of jquery, functions and functions are attr() prop() implemented through the JS native element object (as in the code above msg ). The attr() function mainly relies on the getAttribute() and two methods of the element object setAttribute() . The prop() function mainly relies on the object property acquisition and setting method of JS native.

<div id= "message" class= "test" data_id= "123" ></div><script type= "Text/javascript" >var msg = document.getElementById ("message"), var $msg = $ (msg);/* * * * * * * * attr () depends on the element object's Element.getattribute (attribute) and Element.setattribute (attribute, value) * * * *///equivalent to Msg.setattribute ("data_id", 145); $msg. attr ("data_id", 145);//equivalent to M Sg.getattribute ("data_id"); var dataid = $msg. attr ("data_id"); 145/* * * * attr () depends on the JS native Element[property] and element[property] = value; *///equivalent to msg["pid"] = "pid value", $msg. Prop ("pid", "pid value");//equivalent to msg["pid"];var testprop = $msg. Prop ("pid"); PID Value </script>

Of course, jquery encapsulates these operations, making it easier for us to operate (for example, setting multiple properties in object form) and implementing cross-browser compatibility.
Also, although prop () is for the property of the DOM element, not the attribute of the element node. However, changes to some properties of DOM elements also affect the corresponding attributes on the element nodes. For example, the property's ID corresponds to the classname of the attribute id,property corresponding to the attribute class.

<div id= "message" class= "test" data_id= "123" ></div><script type= "Text/javascript" >var msg = document.getElementById ("message"), var $msg = $ (msg);d Ocument.writeln ($msg. attr ("class")); Test$msg.prop ("ClassName", "newtest");//Modify ClassName (property) causes class (attitude) to change Document.writeln ($msg. attr ("class")); Newtest</script>　

2. Different application versions

attr()is the jquery 1.0 version of the function, prop() is the jquery 1.6 version of the new function. There is no doubt that before 1.6, you attr() can only use functions, 1.6 and later versions, you may choose the corresponding function according to the actual needs. 

3. Different property value types for setting

Because the attr() function operates on the properties of the document node, the property value set can only be a string type, and if it is not a string type, its ToString () method is also called to convert it to a string type. 

prop()The function operates on the properties of the JS object, so the property values set can be any type, including arrays and objects . 

4. Other details

Prior to jquery 1.6, only attr() functions were available, and the function not only assumed the setup and acquisition of attribute, but also assumed the property's setup and acquisition work. For example: Before jquery 1.6, attr() You can also set or get the property of DOM elements such as tagname, ClassName, NodeName, NodeType, and so on.

Until the jquery 1.6 new prop() function is used to take care of the property's settings or get work, it attr() is only responsible for setting up attribute and getting work.

In addition, for attributes such as checked,selected,disabled , and so on for form elements, before jquery 1.6, the attr() return value of these properties is obtained as a Boolean type: If selected (or disabled) is returned true , otherwise returned false .

However, starting with 1.6, the attr() return value used to get these properties is of type string, and if selected (or disabled) returns checked,selected , or disabled, Otherwise (that is, the element node does not have this property) is returned undefined . Also, in some versions, these property values represent the initial state values at the time the document was loaded, and the corresponding property values do not change even after the selected (or disabled) State of those elements is changed.

Because jquery thinks: attribute's checked,selected, anddisabled are the values that indicate the initial state of the property, checked selected disabledrepresents the value of the property's real-time state (value true or false ).

Therefore, in jquery 1.6 and later versions, use prop() functions to set or get, and checked so on, selected disabled properties. For other operations that can be prop() implemented, use the function as much as possible prop() .

<input id= "UID" type= "checkbox" checked= "Checked" value= "1" ><script type= "Text/javascript" >// The current jquery version is 1.11.1var uid = document.getElementById ("UID"), var $uid = $ (UID);d Ocument.writeln ($uid. attr ("checked")); Checkeddocument.writeln ($uid. Prop ("checked")); true//Uncheck the check box UID (set it to false)//equivalent to uid.checked = False, $uid. Prop ("checked", false),//attr () Gets the value of the initial state, even if unchecked, It will not change Document.writeln ($uid. attr ("checked")); checked//prop () the value obtained has changed Document.writeln ($uid. Prop ("checked")); False</script>

The difference between the jquery function attr () and prop ()