Jquery中.attr()和.data()的区别

v1 发布于2019-08-21 11:35 / 675人阅读

摘要：中和的区别和本质上属于属性和对象属性的区别。结合上面代码和解释，大家应该能够理解两者的区别。同时从性能的角度来说，建议使用来进行和操作，因为它仅仅修改的对象的属性值，不会引起额外的操作。

Jquery中.attr()和.data()的区别

$.attr()和$.data()本质上属于DOM属性和Jquery对象属性的区别。

Jquery对象属性和DOM属性

一个简单的例子

Jquery中.attr和.data的区别

$.attr()每次都从DOM元素中取属性的值，即和视图中标签内的属性值保持一致。

$.attr("data-foo")会从标签内获得data-foo属性值；

$.attr("data-foo", "world")会将字符串"world"塞到标签的"data-foo"属性中；

$.data()是从Jquery对象中取值，由于对象属性值保存在内存中，因此可能和视图里的属性值不一致的情况。

$.data("foo")会从Jquery对象内获得foo的属性值，不是从标签内获得data-foo属性值；

$.data("foo", "world")会将字符串"world"塞到Jquery对象的"foo"属性中，而不是塞到视图标签的data-foo属性中。

结合上面代码和解释，大家应该能够理解两者的区别。

小结

所以$.attr()和$.data()应避免混合用，也就是应该尽量避免如下两种情况的出现：

通过$.attr()来进行set属性，然后通过$.data()进行get属性值；

通过$.data()来进行set属性，然后通过$.attr()进行get属性值。

同时从性能的角度来说，建议使用$.data()来进行set和get操作，因为它仅仅修改的Jquey对象的属性值，不会引起额外的DOM操作。

云服务器 GPU云服务器 javascript和jquery的区别 jquery和javascript的区别 jquery_ajax_data 中SP与DP的区别

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86894.html

jQuery中attr()和prop()方法的一些区别理解

摘要：后来了一番不知怎么搜索的又发现了一个和区别的一些解释。操作对象不同在中表示文档节点属性，而则表示对象属性。函数主要依赖的是对象的和两个方法。昨天在开发的时候同事帮忙写了一小段JS代码，取数据的时候用到了以前都没用过的$(this).data(xxx)的这种形式，后来看了手册才知道在HTML5中可以对元素进行自定义属性。格式类似于data-xxx=value,然后可以用JQ中的....

iKcamp 2019-08-21 10:30 评论0 收藏0
JQuery基础修炼-样式篇

摘要：具有相同的父元素，并匹配过滤选择器子选择器选择所有指定元素中指定的的直接子元素。可见元素的宽度或高度，是大于零。元素的或被认为是可见的，因为他们仍然占用空间布局。 jQuery对象转化成DOM对象 jQuery库本质上还是JavaScript代码，它只是对JavaScript语言进行包装处理，为了是提供更好更方便快捷的DOM处理与开发常见中经常使用的功能。我们可以用jQuery...

_Dreams 2019-08-02 15:55 评论0 收藏0
JQuery基础修炼-样式篇

摘要：具有相同的父元素，并匹配过滤选择器子选择器选择所有指定元素中指定的的直接子元素。可见元素的宽度或高度，是大于零。元素的或被认为是可见的，因为他们仍然占用空间布局。 jQuery对象转化成DOM对象 jQuery库本质上还是JavaScript代码，它只是对JavaScript语言进行包装处理，为了是提供更好更方便快捷的DOM处理与开发常见中经常使用的功能。我们可以用jQuery...

luck 2019-08-19 18:24 评论0 收藏0
jQuery 属性与样式

摘要：与中用方法来获取和设置元素属性是属性的缩写，在操作中会经常用到有个表达式传入属性名获取属性的值属性名属性值设置属性的值属性名函数值设置属性的函数值给指定元素设置多个属性值，即属性名一属性值一属性名二属性值二删除方法为匹配的元素集合中的每个元 .attr()与.removeAttr() jQuery中用attr()方法来获取和设置元素属性,attr是attribute（属性）的缩写，在j...

yibinnn 2019-08-21 11:52 评论0 收藏0
jQuery基础(一) ：样式篇

摘要：如下就是对象或是如下以下两者的修改都是等价的但是使用不能很好的操作，所以可以将其转换成对象把元素转化成的对象总体，表示当前的上下文对象是一个对象，可以调用对象所拥有的属性和方法。代表的上下文对象是一个的上下文对象，可以调用的方法和属性值。一：初识 jquery： 1、 jQuery 只是一个库，不需要特别的安装，只需要我们在页面标签内中通过 script 标签脚本引入 jQuer...

SegmentFault 2019-08-20 10:35 评论0 收藏0