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

一个简单的例子

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>Jquery中.attr和.data的区别</title>

    </head>

    <body>

        <p id="app" data-foo="hello"></p>

    </body>

    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>

    <script type="text/javascript">

        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 设置DOM元素属性值

        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 设置DOM node属性值

        var getAttr3 = $('#app').attr('data-foo');

        var getData3 = $('#app').data('foo');

        console.log('getAttr3: ' + getAttr3); //world

        console.log('getData3: ' + getData3); //*** WORLD ***

    </script>

</html>

  • $.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()应避免混合用，也就是应该尽量避免如下两种情况的出现：

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

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

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

转自：https://segmentfault.com/a/1190000008642200

Jquery中.attr()和.data()的区别的更多相关文章

  1. jquery中attr和prop的区别、 什么时候用 attr 什么时候用 prop (转自 芈老头 )

    jquery中attr和prop的区别. 什么时候用 attr 什么时候用 prop   在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这 ...

  2. jQuery中.attr()和.prop()的区别

    之前学习jQuery的时候,学习到了两种取得标签的属性值的方法:一种是elemJobj.attr(),另一种是elemJobj.prop().而在学习JS的时候,只有一种方法elemObj.getAt ...

  3. jquery中attr和prop的区别（转）

    在网络上看到这样一篇关于jquery中attr和prop的区别文章,觉得不错,所以转载了. 在jQuery 1.6中,.attr()方法查询那些没有设置的属性,则会返回一个undefined.如果你要 ...

  4. jquery中attr和prop的区别分析

    这篇文章主要介绍了jquery中attr和prop的区别分析的相关资料,需要的朋友可以参考下 在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别 ...

  5. Jquery学习笔记（6）--jquery中attr和prop的区别【精辟】

    jquery中attr和prop的区别 在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答案很 ...

  6. jquery中attr与prop的区别

    先从一个老生常谈的问题说起,使用jquery实现全选全不选.楼主先使用的jquery版本是 jquery-1.11.1.min.js 全选<input type="checkbox&q ...

  7. Jquery中attr()与prop()的区别

    在jQuery中,attr()函数和prop()函数都用于设置或获取指定的属性,它们的参数和用法也几乎完全相同.但是,这两个函数的用处却并不相同.下面我们来详细介绍这两个函数之间的区别. 1.操作对象 ...

  8. jQuery中 attr和Prop的区别

    出自这里: http://www.365mini.com/page/jquery_noconflict.htm 在jQuery中,attr()函数和prop()函数都用于设置或获取指定的属性,它们的参 ...

  9. Jquery中attr 和 prop的区别和联系

    昨天在选择借款方类型的时候总是会出现选择要点两次的现象,比如点击公司,第一次点击选择公司,没有选中,必须在次点击才可以选中,总感觉是有点延迟加载的意思,后来审查元素, 发现是redio元素,这样的话就 ...

随机推荐

  1. JaveWeb 公司项目（4）----- Easyui的表单验证

    前面三篇博文讲述的是界面的搭建和数据的传输,可以看出目前我做的这个小项目已经有了一个大体的雏形,剩下的就是细节部分的打磨和一些友好的人机交互设计,今天做的是表单的验证,作为初学者,着实花了一番功夫,所 ...

  2. c语言关键字的区分

    const int a;//声明一个常整型数 int const a;//声明一个常整型数 const int *a;//声明指向常整型数的指针,整型数不可修改,指针可以修改 int * const ...

  3. Eclipse+maven 构建第一个简单的springmvc项目

    先给出项目的目录: 在eclipse下使用maven构建第一个springmvc项目步骤如下: 1.创建maven project(此处默认你已了解maven),此处需要注意以下两点 2.创建完毕后会 ...

  4. AndroidImageSlider第一张图闪过的问题解决

    1. AndroidImageSlider的使用: 参考源码:https://github.com/daimajia/AndroidImageSlider 当然网上介绍使用方法的很多,搜一搜. 2. ...

  5. 常见字符集&乱码问题

    字符集 常用字符集分类 ASCII及其扩展字符集 作用:表语英语及西欧语言. 位数:ASCII是用7位表示的,能表示128个字符:其扩展使用8位表示,表示256个字符. 范围:ASCII从00到7F, ...

  6. 力扣（LeetCode）500. 键盘行

    给定一个单词列表,只返回可以使用在键盘同一行的字母打印出来的单词.键盘如下图所示. 示例: 输入: ["Hello", "Alaska", "Dad& ...

  7. 关于repaint和reflow的笔记

    repaint(重绘) ,repaint发生更改时,元素的外观被改变,且在没有改变布局的情况下发生,如改变outline,visibility,background color,box-shadow不 ...

  8. LeetCode第[20]题(Java)：Valid Parentheses

    题目:有效的括号序列 难度:Easy 题目内容: Given a string containing just the characters '(', ')', '{', '}', '[' and ' ...

  9. Mac批量转换mp3为caf

    创建一个sh文件,输入如下代码后运行. 遍历文件夹中的mp3然后使用afconvert命令进行转换. #!/bin/bash for i in *.mp3; do afconvert $i " ...

  10. 一个sql实现查询并且插入到另一个表中

    两种不同方法,结果不同 方法一.查询的user表中3个元素,name为user表中的字段,1000,0,是往department中要赋的值(给id赋值) ,`name`,' 方法二(推荐使用方法二): ...