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

一个简单的例子

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>Jquery中.attr和.data的区别</title>
  6.     </head>
  7.     <body>
  8.         <p id="app" data-foo="hello"></p>
  9.     </body>
  10.     <script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
  11.     <script type="text/javascript">
  12.         var getAttr1 = $('#app').attr('data-foo');
  13.         var getData1 = $('#app').data('foo');
  14.         console.log('getAttr1: ' + getAttr1); //hello
  15.         console.log('getData1: ' + getData1); //hello
  16.  
  17.         $('#app').attr('data-foo', 'world'); //$.attr 设置DOM元素属性值
  18.         var getAttr2 = $('#app').attr('data-foo');
  19.         var getData2 = $('#app').data('foo');
  20.         console.log('getAttr2: ' + getAttr2); //world
  21.         console.log('getData2: ' + getData2); //*** hello ***
  22.  
  23.         $('#app').data('foo', 'WORLD'); //$.data 设置DOM node属性值
  24.         var getAttr3 = $('#app').attr('data-foo');
  25.         var getData3 = $('#app').data('foo');
  26.         console.log('getAttr3: ' + getAttr3); //world
  27.         console.log('getData3: ' + getData3); //*** WORLD ***
  28.  
  29.     </script>
  30. </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. Linux下清空或删除大文件内容的2种方法

    在Linux终端下处理文件时,有时候我们想要直接清空文件的内容时但又不用使用任何Linux命令行编辑器,去打开这些文件.那如何才能达到这个目的呢? 1.通过重定向到NULL来清空文件内容 清空或者让一 ...

  2. Java常见异常:Exception in thread "main" java.lang.NoClassDefFoundError

    在某一路径下执行编译好的class文件出错. 异常如下: E:\liwy>java Test98 Exception in thread "main" java.lang.N ...

  3. win10 安装keras

    1.安装Python环境 建议安装Anconda3 ,4.2.0版本 下载地址: https://repo.continuum.io/archive/index.html 或 https://mirr ...

  4. https申请部署

    此案例用IIS8.0演示 前提条件: 1.HTTPS协议需要443端口,安全组和防火墙开放443端口. 2.需要SSL证书 开放端口就不说了,主要说下申请SSL证书. 1.https://www.ss ...

  5. Django模板操作

    进行加减运算 def index(request): a = request.GET['a'] b = request.GET['b'] c = int(a) + int(b) return Http ...

  6. maven阿里云镜像及本地仓库

    一.添加阿里云镜像 1 找到maven的安装目录,conf文件夹下的setting.xml文件 2 打开setting.xml文件,找到mirrors节点添加阿里镜像库地址: <mirror&g ...

  7. 大整数加法 HDU1002

    今天早上没事干又把这个敲了一遍,虽然手冻得不行,不过又深入理解理解还可以哈. 难点就在给你的整数可能很大很长,所以long long 肯定不行,得用字符串来读取存储,然后注意一下相加的时候进位,最后输 ...

  8. MySQL processlist/kill

    1.show full processlist 显示MySQL所有正在执行的进程,用于查看当前的MySQL运行情况,避免死锁等导致的异常情况. 主要的列: Id:进程Id User:登录账号 Host ...

  9. Unity---资源管理中不同资源的路径获取方式

    1.首先需要先了解两个知识点: Unity内置的文件路径获取方式.windows的Directory.GetFiles文件获取方式:   1>Unity内置的文件路径获取方式,一下是官方解释:h ...

  10. spring cloud: zuul(四): 正则表达式匹配其他微服务(给其他微服务加版本号)

    spring cloud: zuul(四): 正则表达式匹配其他微服务(给其他微服务加版本号) 比如我原来有,spring-boot-user微服务,后台进行迭代更新,另外其了一个微服务: sprin ...