What is the difference between data() and attr() in jquery

Difference: "$.attr()" takes the attribute value from the DOM element every time, that is, it is consistent with the attribute value in the tag in the view; while "$.data()" takes the value from Jquery When obtaining values from an object, since the object attribute values are stored in memory, they may not necessarily be consistent with the attribute values in the view.

The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.

$.attr()and$.data()essentially belong toDOM attributesandJquery object attributesdifference.

A simple example

• $.attr() takes the value of the attribute from the DOMelementevery time, that is, and the view Attribute values within tags remain consistent.

  • $.attr('data-foo') will get the data-foo attribute value from the tag;

  • $.attr(' data-foo', 'world') will insert the string 'world' into the 'data-foo' attribute of the tag;

• $.data( ) is to get the value from theJquery object. Since the object attribute value is stored in memory, it may be inconsistent with the attribute value in the view.

  • $.data('foo') will get the attribute value of foo from theJquery object, not the data-foo attribute value from the tag;

  • $.data('foo', 'world') will stuff the string 'world' into the 'foo' attribute of theJquery objectinstead of In the data-foo attribute of the view tag.

#Combined with the above code and explanation, everyone should be able to understand the difference between the two.

So $.attr() and $.data() should avoid mixed use, that is, the following two situations should be avoided as much as possible:

• Through $. attr() to set the attribute, and then use $.data() to get the attribute value;

• Use $.data() to set the attribute, and then use $.attr() Get the attribute value.

At the same time, from a performance perspective, it is recommended to use $.data() for set and get operations, because it only modifies the attribute value of theJquey object, will not cause additional DOM operations.

Recommended related video tutorials:jQuery Tutorial(Video)

The above is the detailed content of What is the difference between data() and attr() in jquery. For more information, please follow other related articles on the PHP Chinese website!