The difference between prop and attr in the study of jquery

1.attr (): The default is to save the browser's initial value prop () Save the updated value

2. The following is the first usage, but the. attr () method can run in all attributes cases.

Note: The properties of some DOM elements are also listed below, but only run in the new. Prop () method

The. Prop () method should be used to handle Boolean attributes/properties and properties that do not exist in HTML (for example, window.location). All other attributes (those you see in HTML) can and should continue to be manipulated using the. attr () method.

3.

Precautions

1. If you prop() change the properties of <input> and <button> elements through a function type , an error will be thrown on most browsers because this property is generally not allowed to be changed at a later time.

2, if prop() the function is used to manipulate the checked,selected,disabled and other attributes of the form element, if the element is selected (or true disabled) , it is returned, otherwise (meaning thatno such attribute is in HT ml) is returned false .

3. The prop() function can also set or return Element some properties on the object of the DOM element, for example:tagName, SelectedIndex, NodeName, NodeType, Ownerdocument, Attributes such as defaultchecked and defaultselected.

4. In IE9 and earlier versions, if the prop() property value set by using a function is not a simple original value (String, number, Boolean), and the property is not removed before the corresponding DOM element is destroyed, a memory leak problem may occur. If you are just trying to store data, it is recommended that you use data () functions to avoid memory leak issues.

The following HTML code is an example:

<div Id="N1">
<p Id="N2" Class="Demo Test" Data-key="UUID" Data_value="1235456465">Codeplayer</p>
<input Id="N3" Name="Order_Id" type= "checkbox"  value= "1" > 
     <input id= " N4 " name=" order_id " Span class= "ATN" >type= "checkbox"  checked = "checked"  value=< Span class= "ATV" > "2" > 
 </DIV>    

We write the following jquery code:

Var$n 2=$("#n2");
The prop () action is for attributes of elements (element objects), not attributes of ELEMENT nodes (HTML documents)
Document.Writeln($n 2.Prop("Data-key") ); Undefined
Document.Writeln($n 2.Prop("Data_value") ); Undefined

Document.Writeln($n 2.Prop("id") ); N2
Document.Writeln($n 2.Prop("TagName") ); P
Document.Writeln($n 2.Prop("ClassName") ); Demo Test
Document.Writeln($n 2.Prop("InnerHTML") ); Codeplayer
Document.Writeln( typeof$n 2.Prop("GetAttribute") ); function

The properties set by Prop () are also for elements (element objects), so they can also be accessed directly through the element itself
$n 2.Prop("Prop_a", "Codeplayer");
Document.Writeln($n 2[0].Prop_a); Codeplayer
VarN2=Document.getElementById("N2");
Document.Writeln(N2.Prop_a); Codeplayer

Set multiple properties at the same time as objects, which can be any type of object, array, and so on
$n 2.Prop( { 
Prop_b: "Baike",
Prop_c: 18,
Site: {Name: "Codeplayer",wr.: "http://www.365mini.com/" }
} );
Document.Writeln($n 2[0].Prop_c); 18
Document.Writeln($n 2[0site.);  //http://www.365mini.com/ 
 
 // Uncheck all checkboxes (unchecked, select to uncheck)  
 $ (prop (, function (index, oldvalue< Span class= "pun") { 
     return ! oldvalue;               

Learning Links: 1. Http://blog.sina.com.cn/s/blog_655388ed01017cnc.html

2.http://www.365mini.com/page/jquery-prop.htm http://www.365mini.com/page/jquery-attr.htm

3.http://www.tuicool.com/articles/3uuqrr6

4.http://www.365mini.com/page/jquery-attr-vs-prop.htm

The difference between prop and attr in the study of jquery