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

This article introduces the relevant knowledge of "what is the difference between data () and attr () in jquery". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Difference: "$.attr ()" takes the value of the attribute 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 the Jquery object, because the object property value is stored in memory and is not necessarily consistent with the attribute value in the view.

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

$.attr () and $.data () are essentially the difference between the DOM property and the Jquery object property.

A simple example.

The difference between .attr and .data in Jquery

Var getAttr1 = $('# app'). Attr ('data-foo'); var getData1 = $(' # app'). Data ('foo'); console.log (' getAttr1:'+ getAttr1); / / hello console.log ('getData1:' + getData1); / / hello $('# app'). Attr ('data-foo',' world') / / $.attr sets the DOM element attribute value var getAttr2 = $('# app'). Attr ('data-foo'); var getData2 = $(' # app'). Data ('foo'); console.log (' getAttr2:'+ getAttr2); / / world console.log ('getData2:' + getData2); / / * * hello * * $('# app'). Data ('foo',' WORLD') / / $.data set the DOM node attribute value var getAttr3 = $('# app'). Attr ('data-foo'); var getData3 = $(' # app'). Data ('foo'); console.log (' getAttr3:'+ getAttr3); / / world console.log ('getData3:' + getData3); / / * * WORLD * *

Attr () takes the value of the attribute from the DOM element each time, which is consistent with the attribute value within the tag in the view.

$.attr ('data-foo') gets the value of the data-foo attribute from within the tag

$.attr ('data-foo',' world') plugs the string 'world'' into the tag's' data-foo' attribute

Data () is a value taken from the Jquery object, which may be inconsistent with the property values in the view because the object property values are stored in memory.

$.data ('foo') gets the foo attribute value from the Jquery object, not the data-foo attribute value from the tag

$.data ('foo',' world') plugs the string 'world' into the' foo' property of the Jquery object instead of the data-foo attribute of the view tag.

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

Therefore, the mixing of $.attr () and $.data () should be avoided, that is, the following two situations should be avoided as far as possible:

Make the set attribute through $.attr (), and then the get attribute value through $.data ()

Make the set attribute through $.data (), and then the get attribute value through $.attr ().

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

That's all for the content of "what's the difference between data () and attr () in jquery". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.