jQuery中.attr()和.data()的区别分析


Posted in jQuery onSeptember 03, 2017

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

Jquery对象属性和DOM属性

一个简单的例子

<!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操作。

以上所述是小编给大家介绍的jQuery中.attr()和.data()的区别分析,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

jQuery 相关文章推荐
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
jqueryUI tab标签页代码分享
Oct 09 jQuery
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
jquery实现垂直无限轮播的方法分析
Jul 16 jQuery
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
jQuery实现轮播图效果
Nov 26 jQuery
jQuery 动画与停止动画效果实例详解
May 19 jQuery
jQuery实时统计输入框字数及限制
Jun 24 jQuery
jQuery实现朋友圈查看图片
Sep 11 jQuery
jQuery实现带进度条的轮播图
Sep 13 jQuery
jquery实现点击左右按钮切换图片
Jan 27 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 #jQuery
jquery tmpl模板(实例讲解)
Sep 02 #jQuery
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 #jQuery
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 #jQuery
jquery操作ul的一些操作笔记整理(干货)
Aug 31 #jQuery
jquery插件开发之选项卡制作详解
Aug 30 #jQuery
基于jQuery的左滑出现删除按钮的示例
Aug 29 #jQuery
You might like
十天学会php之第三天
2006/10/09 PHP
PHP 自定义错误处理函数的使用详解
2013/05/10 PHP
一个漂亮的php验证码类(分享)
2013/08/06 PHP
php中this关键字用法分析
2016/12/07 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
javascript 写类方式之九
2009/07/05 Javascript
添加JavaScript重载函数的辅助方法2
2010/07/04 Javascript
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
2012/01/15 Javascript
html的DOM中document对象forms集合用法实例
2015/01/21 Javascript
js实现类似菜单风格的TAB选项卡效果代码
2015/08/28 Javascript
跟我学习javascript的浮点数精度
2015/11/16 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
2016/03/09 Javascript
JS+CSS3制作炫酷的弹窗效果
2016/11/08 Javascript
Asp.Net之JS生成分页条的方法
2016/11/23 Javascript
Javascript同时声明一连串(多个)变量的方法
2017/01/23 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
2017/08/16 Javascript
详解Angular操作cookies方法
2018/06/01 Javascript
JavaScript实现小球沿正弦曲线运动
2020/09/07 Javascript
WEEX环境搭建与入门详解
2019/10/16 Javascript
Webpack5正式发布,有哪些新特性
2020/10/12 Javascript
[41:20]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS DK
2014/05/26 DOTA
[57:55]EG vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python使用两种发邮件的方式smtp和outlook示例
2017/06/02 Python
Python hashlib加密模块常用方法解析
2019/12/18 Python
Python中的sys.stdout.write实现打印刷新功能
2020/02/21 Python
css3 background属性调整增强介绍
2010/12/18 HTML / CSS
欧洲最大的婴幼儿服装及内衣公司:Petit Bateau(小帆船)
2016/08/16 全球购物
Linux Interview Questions For software testers
2012/06/02 面试题
《理想》教学反思
2014/02/17 职场文书
研究生个人学年总结
2015/02/14 职场文书
社区艾滋病宣传活动总结
2015/05/07 职场文书
2015年教研工作总结
2015/05/23 职场文书
辩护意见书
2015/06/04 职场文书
老人与海读书笔记
2015/06/26 职场文书
办公用品管理制度
2015/08/04 职场文书
goland 清除所有的默认设置操作
2021/04/28 Golang