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跨域模拟搜索引擎
Jun 17 jQuery
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
jQuery实现简易QQ聊天框
Feb 10 jQuery
jQuery实现穿梭框效果
Jan 19 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通过文件头检测文件类型通用代码类(zip,rar等)
2010/10/19 PHP
PHP如何获取当前主机、域名、网址、路径、端口等参数
2017/06/09 PHP
laravel框架上传图片实现实时预览功能
2019/10/14 PHP
laravel中Redis队列监听中断的分析
2020/09/14 PHP
给Function做的OOP扩展
2009/05/07 Javascript
JQuery datepicker 使用方法
2011/05/20 Javascript
关于jquery input textare 事件绑定及用法学习
2013/04/03 Javascript
jquery动态改变onclick属性导致失效的问题解决方法
2013/12/04 Javascript
jquery 显示*天*时*分*秒实现时间计时器
2014/05/07 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
2017/02/13 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
2017/06/16 Javascript
vue-cli如何添加less 以及sass
2017/07/06 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
2019/01/09 jQuery
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
2019/09/21 Javascript
微信小程序中weui用法解析
2019/10/21 Javascript
微信小程序 button样式设置为图片的方法
2020/06/19 Javascript
jquery实现简单每周轮换的日历
2020/09/10 jQuery
JavaScript实现浏览器网页自动滚动并点击的示例代码
2020/12/05 Javascript
[05:43]VG.R战队教练Mikasa专访:为目标从未停止战斗
2016/08/02 DOTA
python docx 中文字体设置的操作方法
2018/05/08 Python
Pycharm新建模板默认添加个人信息的实例
2019/07/15 Python
python中单下划线(_)和双下划线(__)的特殊用法
2019/08/29 Python
python模拟点击在ios中实现的实例讲解
2020/11/26 Python
俄罗斯和世界各地的酒店预订:Hotels.com俄罗斯
2016/08/19 全球购物
韩国休闲女装品牌网站:ANAIS
2016/08/24 全球购物
BIBLOO波兰:捷克的一家在线服装店
2018/03/09 全球购物
Bose加拿大官方网站:美国知名音响品牌
2019/03/21 全球购物
德国自行车商店:Tretwerk
2019/06/21 全球购物
酒吧创业计划书
2014/01/18 职场文书
男女朋友协议书
2014/04/23 职场文书
授权委托书范文
2014/07/31 职场文书
义诊活动总结
2015/02/04 职场文书
起诉状范本
2015/05/20 职场文书
2015年语文教研组工作总结
2015/05/23 职场文书
2015年暑期社会实践报告
2015/07/13 职场文书
小学四年级班务总结该怎么写?
2019/08/16 职场文书