Shulou(Shulou.com)06/01 Report--

This article is about the differences between attr () and prop () in jQuery. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

JQuery attr () method and prop () method

The attr () method sets or returns the property value of the selected element.

The prop () method sets or returns the properties and values of the selected element.

Note: from the point of view of definition, the effects of the two methods are the same. And the usage is similar, as shown below.

Function one: returns the attribute value of the selected element. The syntax is as follows:

$(selector) .attr (attribute)

$(selector) .prop (property)

Function 2: set the attributes and values of the selected element. The syntax is as follows:

$(selector) .attr (attribute,value)

$(selector) .prop (property,value)

Function 3: set multiple properties and values. The syntax is as follows:

$(selector) .attr ({attribute:value, attribute:value...}) / / object, key-value pair

$(selector) .prop ({property:value, property:value,...}) / / object, key-value pair

Function 4: use functions to set properties and values. The syntax is as follows: (seldom used at ordinary times)

/ / second parameter: specifies the function that returns the value of the property to be set.

/ * this function includes two parameters:

* index-retrieves the index location of the elements in the collection.

* oldvalue / currentvalue-retrieves the current attribute value of the selected element.

, /

$(selector) .attr (attribute,function (index,oldvalue))

$(selector) .prop (property,function (index,currentvalue))

We will find:

The usage of both methods is the same, except that the method names are different. One is attr, the other is prop.

The full spelling of attr is attribute. The full spelling of prop is property. They are two different words, although they all have the meaning of attributes, but their meanings must be different.

The difference between property and attribute

Property n. Attribute, nature, performance; property; ownership

Attribute n. An attribute; an attribute.

Thus it can be seen that the two are very easy to be confused because the translation in Chinese is very close. But in fact, they are different things and belong to different categories.

Looking into their Chinese meaning, we can understand attribute as "feature" and property as "attribute".

Obviously, one is an attribute, and the other is a feature. It must be different.

If you Baidu "attribute" keyword, you will find that the attribute corresponding to the English directly is property. And Baidu's detailed interpretation of "attribute" is: it refers to the inherent and indispensable nature of the thing itself.

Now, we know:

Property property. It is inborn, not acquired. For example, some objects have certain properties when they are defined.

Attribute feature. What you don't have in yourself, it's given to you. For example, after some objects are created, customize the properties assigned to them.

Corresponding to js is:

Property is an attribute in DOM and an object in JavaScript

Attribute is a property (attribute) on the HTML tag, and its value can only be a string

Corresponding to jQuery is:

For the inherent attributes of the HTML element itself, or these attributes are included in the W3C standard, it is more intuitive to say that some attributes can be intelligently prompted in the editor, such as src, href, value, class, name, id and so on. When processing, use the prop () method.

For the HTML element, we customize the DOM attribute, that is, the element itself does not have this attribute, such as: data-*. When processing, use the attr () method.

Return values of the attr () method and the prop () method

(eleStr) .attr ()

Get the class attribute value of the image

twelve

$("button") .click (function () {

Console.log ($("img") .attr ("class")); / / returns the property value if the property exists, or undefined if the property does not exist

Console.log ($("img") .prop ("class")); / / returns the property value if the property exists, or null ("") if the property does not exist

});

(eleStr) .prop ()

Gets the selected status of the check box

twelve

$("button") .click (function () {

Console.log ($("input") .prop ("checked")); / / returns true; if the attribute value exists, returns false if the attribute value does not exist.

Console.log ($("input") .attr ("checked")); / / returns checked; if the attribute value exists, returns undefined if the attribute value does not exist.

Thank you for your reading! This is the end of the article on "what is the difference between attr () and prop () in jQuery". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.