The difference between ARRT () and prop () in jquery

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.

1 <!--The ID, class, and data_id are the attribute of the element's document node. -2 <DivID= "message"class= "Test"data_id= "123"></Div>3 4 <Scripttype= "Text/javascript">5 //the name and age are the property of the person.6 var Person={name:"Xiao Ming", Age: -};7 </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).

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() .

<Button>Button</Button>    <inputtype= "checkbox"name=""ID=""checked= "Checked">    <Scriptsrc= "Jquery.js"></Script>    <Script>        //$ (' button '). On (' click ', Function () {        // });        //var r = $ (' input ');        $('Button'). On ('Click',function() {Console.log ( One)            if ($('input'). Prop ('checked')) {                $('input'). Prop ('checked',false); }Else{                $('input'). Prop ('checked',true); }        })    </Script>

Attr/prop
attr ==> getattribute ()/SetAttribute ()
For manipulating custom properties, the properties of the Boolean type for the DOM object itself can only be
This two method is used to set or read the default value, but cannot change the value dynamically.
//
Prop ==> dom.checked = true;
For Boolean-valued properties (selected/checked/diabled), you need to access the property directly by
Way to manipulate (point syntax, [])

The difference between ARRT () and prop () in jquery