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

"To summarize yourself, see the transcript below for details":

attr () is used to manipulate HTML properties, and the prop () property is used to manipulate DOM properties

①: In many cases, it can be interoperable

②:attr () for cases where custom HTML attributes, HTML attributes, and DOM properties do not have the same name, such as attributes with the same value: Class (HTML), ClassName (DOM)

③:prop () when the HTML attribute and Dom property do not have the same name, attributes such as checked,selected,disabled in the form are applied alone

The following turn from http://www.365mini.com/page/jquery-attr-vs-prop.htm, very detailed, very thorough

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 not the same. Let's take a detailed description of 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 of the element's document node--
<div Id="Message" Class="Test" data_id="123"></div>

<script type= "text /javascript "> 
 //here the name, age, and URL are all of the property 
 var obj ={ Name:  "Codeplayer" Span class= "pun" >, Age: 18 , Url:  "HTTP +/ www.365mini.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 type= "text /javascript "> 
 //prop () function for the property of the DOM Element (msg) itself  
 var msg = document< Span class= "pun". 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">
VarMsg=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 Msg.getattribute ("data_id");
VarDataid=$msg.attr("DATA_ID"); 145 
 
 
 
 /* * * * PROP () dependent on JS native Element[property] and element[property] = Value */ 
 
 //equivalent to msg["pid"] = "pid value";  $msg . Prop ( "pid" ,  "pid value" Span class= "pun");  
 
 //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.

In addition, although the property of the prop() DOM element is targeted, it is 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 corresponds to the attribute ID of the property corresponding to the id className attribute class.

<div Id="Message" Class="Test" data_id="123"></div>
<script Type="Text/javascript">
VarMsg=Document.getElementById("Message");
Var$msg=$(Msg);

Document.Writeln($msg.attr("Class" ); //test 
 $msg . Prop ( "className" ,  " Newtest ");  
 //modify classname (property) causes class (attitude) to change with  
 Document. Writeln ( $msg . Attr "class"   //newtest 
 </SCRIPT>    

Run code

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, attr() Gets the return value of these properties as Boolean: Returns if selected (or disabled) 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.1
VarUid=Document.getElementById("UID");
Var$uid=$(Uid);

Document.Writeln($uid.attr("Checked") ); Checked
Document.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, does 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 ()