$.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. Spring数据库连接池依赖

    <!-- https://mvnrepository.com/artifact/c3p0/c3p0 --> <dependency> <groupId>c3p0&l ...

  2. hdu 2108 Shape of HDU 判断是否为凸多边形

    Shape of HDU Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Pro ...

  3. Python：ModuleNotFoundError: No module named 'windows'

    pymouse安装后,又出现了ModuleNotFoundError: No module named 'windows'的错误 解决: 下载安装pyhook:http://www.lfd.uci.e ...

  4. testin 测试用例管理平台

    应用信息:应用图标,应用名称,版本号,应用包名,系统平台[Android,ios,Web/H5,小程序,快应用]项目成员:成员帐号[邮箱],成员姓名,成员角色,成员职位,状态[激活,未激活],操作[移 ...

  5. ZZNU 正约数之和 2094

    #include<iostream> #include<cstring> #include<queue> #include<cstdio> #inclu ...

  6. STL_map.VC6简单使用例子

    1. #include <windows.h> //使用map时会出现如下警告:主要意思是 identifier was truncated to '255' characters in ...

  7. [转]C++中const、volatile、mutable的用法

    原文:https://blog.csdn.net/imJaron/article/details/79657642 const意思是“这个函数不修改对象内部状态”. 为了保证这一点,编译器也会主动替你 ...

  8. [转]VS中的路径宏 OutDir、ProjectDir、SolutionDir各种路径含义

    转自 http://blog.csdn.net/restraint/article/details/39934401 说明 $(RemoteMachine) 设置为“调试”属性页上“远程计算机”属性的 ...

  9. SpringBoot整合Graylog3.0

    Graylog简介 Graylog是一个开源的完整的日志管理工具,功能和ELK类似,安装部署更方便. 官方网站 https://www.graylog.org 搭建 使用docker快速搭建 参考 h ...

  10. 学习笔记23—window10 64位 python2.7 安装liblinear

    最近在使用pythin,因为要使用libsvm,所以到官网去下载libsvm.官网地址为libsvm(https://www.csie.ntu.edu.tw/~cjlin/libsvm/)结果下载下来 ...