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实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
jQuery查找dom的几种方法效率详解
May 17 jQuery
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
webpack写jquery插件的环境配置
Dec 21 jQuery
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 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
Terran兵种对照表
2020/03/14 星际争霸
PHP冒泡排序算法代码详细解读
2011/07/17 PHP
关于PHP语言构造器介绍
2013/07/08 PHP
Thinkphp中数据按分类嵌套循环实现方法
2014/10/30 PHP
YII2.0之Activeform表单组件用法实例
2016/01/09 PHP
redis查看连接数及php模拟并发创建redis连接的方法
2016/12/15 PHP
PHP生成唯一ID之SnowFlake算法
2016/12/17 PHP
微信小程序图片宽100%显示并且不变形
2017/06/21 Javascript
js中less常用的方法小结
2017/08/09 Javascript
微信小程序开发背景图显示功能
2018/08/08 Javascript
JavaScript原型链与继承操作实例总结
2018/08/24 Javascript
es6中使用map简化复杂条件判断操作实例详解
2020/02/19 Javascript
原生js实现轮播图特效
2020/05/04 Javascript
Vue触发input选取文件点击事件操作
2020/08/07 Javascript
Python入门篇之列表和元组
2014/10/17 Python
Python捕捉和模拟鼠标事件的方法
2015/06/03 Python
简单理解Python中的装饰器
2015/07/31 Python
python中pandas.DataFrame对行与列求和及添加新行与列示例
2017/03/12 Python
pytorch之Resize()函数具体使用详解
2020/02/27 Python
python 实现 hive中类似 lateral view explode的功能示例
2020/05/18 Python
使用Keras预训练模型ResNet50进行图像分类方式
2020/05/23 Python
浅谈keras中自定义二分类任务评价指标metrics的方法以及代码
2020/06/11 Python
解决Keras 自定义层时遇到版本的问题
2020/06/16 Python
keras K.function获取某层的输出操作
2020/06/29 Python
如何使用PyCharm引入需要使用的包的方法
2020/09/22 Python
CSS3实现复选框动画特效示例代码
2016/09/27 HTML / CSS
优质飞蝇钓和渔具:RiverBum
2020/05/10 全球购物
高级Java程序员面试题
2016/06/23 面试题
会计专业毕业生自我评价
2013/09/25 职场文书
财务科科长岗位职责
2014/03/10 职场文书
林肯就职演讲稿
2014/05/19 职场文书
教师考察材料范文
2014/06/03 职场文书
2014大学生批评与自我批评思想汇报
2014/09/21 职场文书
文体活动总结
2015/02/04 职场文书
大客户经理岗位职责
2015/04/09 职场文书
《世界多美呀》教学反思
2016/02/22 职场文书