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 键盘事件的使用方法详解
Sep 13 jQuery
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
详解jQuery中的easyui
Sep 02 jQuery
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
jQuery 选择方法及$(this)用法实例分析
May 19 jQuery
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
jQuery列表动态增加和删除的实现方法
Nov 05 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
使ecshop模板中可引用常量的实现方法
2011/06/02 PHP
thinkphp实现面包屑导航(当前位置)例子分享
2014/05/10 PHP
php面向对象编程self和static的区别
2016/05/08 PHP
彻底搞懂PHP 变量结构体
2017/10/11 PHP
THINKPHP5.1 Config的配置与获取详解
2020/06/08 PHP
javascript 数组排序函数
2009/08/20 Javascript
JavaScript对象链式操作代码(jquery)
2010/07/04 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
js设置function参数默认值(适合没有传参情况)
2014/02/24 Javascript
jquery实现鼠标滑过显示提示框的方法
2015/02/05 Javascript
javascript制作游戏开发碰撞检测的封装代码
2015/03/31 Javascript
JavaScript学习笔记之数组随机排序
2016/03/23 Javascript
使用JSON作为函数的参数的优缺点
2016/10/27 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
2017/03/24 Javascript
Vue2.0权限树组件实现代码
2017/08/29 Javascript
js Date()日期函数浏览器兼容问题解决方法
2017/09/12 Javascript
基于twbsPagination.js分页插件使用心得(分享)
2017/10/21 Javascript
JavaScript引用类型Function实例详解
2018/08/09 Javascript
React项目动态设置title标题的方法示例
2018/09/26 Javascript
基于Vue实现图片在指定区域内移动的思路详解
2018/11/11 Javascript
Vue Router history模式的配置方法及其原理
2019/05/30 Javascript
Webpack按需加载打包chunk命名的方法
2019/09/22 Javascript
VUE+elementui面包屑实现动态路由详解
2019/11/04 Javascript
基于PHP pthreads实现多线程代码实例
2020/06/24 Javascript
Python 调用DLL操作抄表机
2009/01/12 Python
Python遍历目录的4种方法实例介绍
2015/04/13 Python
利用python程序帮大家清理windows垃圾
2017/01/15 Python
Python实现的对本地host127.0.0.1主机进行扫描端口功能示例
2019/02/15 Python
django rest framework 实现用户登录认证详解
2019/07/29 Python
python3的url编码和解码,自定义gbk、utf-8的例子
2019/08/22 Python
Python中zip()函数的简单用法举例
2019/09/02 Python
Python基于Tensor FLow的图像处理操作详解
2020/01/15 Python
python3中sys.argv的实例用法
2020/04/24 Python
scrapy利用selenium爬取豆瓣阅读的全步骤
2020/09/20 Python
Marlies Dekkers内衣法国官方网上商店:国际知名的荷兰内衣品牌
2019/03/18 全球购物
安全检查与奖惩制度
2014/01/23 职场文书