Elementary Introduction to attr () and prop () functions

as a front-end developer of the Poly media, jquery is often used, but there are a few minor problems when it comes to using function development in jquery , and today we're going to talk about The use of some similar but different functions in jQuery. The following is an example of attr () and prop () for detailed analysis.

Obviously,"attr" and "prop" are the words "attribute" and "property" respectively. , and they all denote the meaning of " attributes " . 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 in jQuery ,"attribute" and "property" are two different concepts. attribute represents The attributes of the HTML document node, and the property represents the JS The properties of the object. The comparison is as follows:

1. Different application versions

attr () is a JQuery 1.0 The version has the function, prop () is a jQuery 1.6 version of the new function. There is no doubt that before 1.6 You can only use the attr () function, 1.6 and later, you may choose the corresponding function according to your actual needs.

in theJQuery 1.6before theattr ()function not only bears theattributeset up and get work, but also take Propertysettings and get work. For example: injQuery 1.6before theattr ()you can also set or getTagName,ClassName,NodeName,NodeTypewaitDOMElements of Property.

until jQuery 1.6 added the prop () function and used to assume The property's settings or get work, attr () only to be responsible for attribute settings and get work.

2. Different objects of Operation

in the bottom -up implementation of jQuery, Functions attr () and prop () function are all via JS The native Element object is implemented.

The attr ( ) function relies primarily on the getattribute () and SetAttribute () of the Element object. two methods.

The prop () function mainly relies on the method of obtaining and setting the object property of JS.

JQuery encapsulates these operations, making it easier for us to operate (for example, setting multiple properties in object Form )andenabling cross-browser compatibility.

Jquery dom element (referring to js attr () dom The attributes on the document node corresponding to the element

For example:

<!-- here the ID,class,data_id are the elements of the document node Attribute --

<div id= "message" data_id= "123" ></div>

<script type= "Text/javascript" >

here the name,age, andURL are all obj 's Property

var obj = {name: "Codeplayer", age:18, url: "http://www.365mini.com/"};

</script>

In addition, it is important to note that whileProp ()against IS theDOMElements of Property, rather than the element node'sattribute, butDOMchanges to some properties of an element also affect the corresponding attribute on the element node. For example, Propertyof theIDcorrespondingattributeof "ID", Propertyof theClassNamecorrespondingattributeof "class".

3. Different property value types for setting

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

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

4.Other Details

for form elements "Checked" " selected " Span style= "font-family: ' The song Body '; >, " disabled " jquery 1.6 attr () Span style= "font-family: ' The song Body '; > Get the return value of these properties is boolean Type: If selected (or disabled) returns true false

however , starting with 1.6, using attr () to get the return value of these properties is a String type, and if selected (or disabled) returns " Checked "," selected " or " disabled ", otherwise (that is, the element node does not have this property) returns 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.

becauseJqueryThink:attributeof the"Checked","Selected","Disabled"is the value that represents the initial state of the property, Propertyof thechecked,selected,Disabledvalue that represents the real-time status of the property(value istrueorfalse). Therefore, injQuery 1.6and later versions, use theprop ()function to set or getchecked,selected,Disabledand other properties. For others that can be usedprop ()implement the operation, also try to useprop ()function.

The above is a simple comparison of attr and prop .

in fact, whether it is JavaScript ,Jquery or other technology, there are small problems like this, only through the project, continuous comparison, summary, So as to keep improving.

Digital media to strive for high-quality and efficient completion of work, and as a digital media, a front-end developers, more need to constantly upgrade their skills, so as to efficiently and quickly complete the project, to meet the company requirements.

Elementary Introduction to attr () and prop () functions