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插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
jQuery实现按比例缩放图片的方法
Apr 29 jQuery
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 jQuery
jQuery封装animate.css的实例
Jan 04 jQuery
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
jquery html添加元素/删除元素操作实例详解
May 20 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
oracle资料库函式库
2006/10/09 PHP
深入了解 register_globals (附register_globals=off 网站打不开的解决方法)
2012/06/27 PHP
PHP实现对数组分页处理实例详解
2017/02/07 PHP
微信公众平台开发教程③ PHP实现微信公众号支付功能图文详解
2019/04/10 PHP
通过PHP设置BugFree获取邮箱通知
2019/04/25 PHP
如何让您的中波更粗更长 - 中波框形天线制作
2021/03/10 无线电
Javascript入门学习资料收集整理篇
2008/07/06 Javascript
js实现在页面上弹出蒙板技巧简单实用
2013/04/16 Javascript
php析构函数的具体用法小结
2014/03/11 Javascript
JS实现动态移动层及拖动浮层关闭的方法
2015/04/30 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
2015/12/02 Javascript
javascript每日必学之继承
2016/02/23 Javascript
AngularJs  Using $location详解及示例代码
2016/09/02 Javascript
原生JS实现首页进度加载动画
2016/09/14 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
2016/11/09 Javascript
jQuery实现一个简单的轮播图
2017/02/19 Javascript
jQuery选择器之表单元素选择器详解
2017/09/19 jQuery
JS抛物线动画实例制作
2018/02/24 Javascript
4 种滚动吸顶实现方式的比较
2019/04/09 Javascript
python黑魔法之编码转换
2016/01/25 Python
python 常用的基础函数
2018/07/10 Python
Python OS模块实例详解
2019/04/15 Python
python3 assert 断言的使用详解 (区别于python2)
2019/11/27 Python
python 实现Harris角点检测算法
2020/12/11 Python
html5自动播放mov格式视频的实例代码
2020/01/14 HTML / CSS
加拿大女装网上购物:Reitmans
2016/10/20 全球购物
FitFlop美国官网:英国符合人体工学的鞋类品牌
2018/10/05 全球购物
学校食堂采购员岗位职责
2013/12/05 职场文书
小学后勤管理制度
2014/01/14 职场文书
年度考核评语
2014/01/19 职场文书
高中教师评语大全
2014/04/25 职场文书
大学英语专业求职信
2014/06/21 职场文书
2014年党员个人工作总结
2014/12/02 职场文书
小学教师读书笔记
2015/07/01 职场文书
商务信函英语问候语
2015/11/10 职场文书
Python实现排序方法常见的四种
2021/07/15 Python