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插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
jQuery实现动态删除LI的方法
May 30 jQuery
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
jQuery中DOM常见操作实例小结
Aug 01 jQuery
jquery实现直播弹幕效果
Nov 28 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 彩色文字实现代码
2009/06/29 PHP
解析PHP工厂模式的好处
2013/06/18 PHP
Twig模板引擎用法入门教程
2016/01/20 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
JavaScript 大数据相加的问题
2011/08/03 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
2012/08/14 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
2013/11/26 Javascript
js中window.open()的所有参数详细解析
2014/01/09 Javascript
JavaScript实现网页对象拖放功能的方法
2015/04/15 Javascript
JS打字效果的动态菜单代码分享
2015/08/21 Javascript
JavaScript获取键盘按键的键码(参照表)
2017/01/10 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
2017/03/24 jQuery
详解angularjs 关于ui-router分层使用
2017/06/12 Javascript
js图片放大镜实例讲解(必看篇)
2017/07/17 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
2018/04/10 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
2018/08/14 jQuery
详解小程序rich-text对富文本支持方案
2018/11/28 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
2018/12/05 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
2019/11/26 Javascript
JS常见内存泄漏及解决方案解析
2020/05/30 Javascript
vue.js实现照片放大功能
2020/06/23 Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
2020/08/21 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
2021/03/01 Vue.js
python实现的一只从百度开始不断搜索的小爬虫
2013/08/13 Python
详解Django+Uwsgi+Nginx的生产环境部署
2018/06/25 Python
基于Python词云分析政府工作报告关键词
2020/06/02 Python
使用CSS3制作倾斜导航条和毛玻璃效果
2017/09/12 HTML / CSS
html5 worker 实例(二) 图片变换效果
2013/06/24 HTML / CSS
欧洲顶级体育电子商务网站:SportsShoes.com
2018/03/27 全球购物
2014年情人节活动方案
2014/02/16 职场文书
年检委托书
2014/08/30 职场文书
离婚协议书范本(2014版)
2014/09/28 职场文书
校园运动会广播稿
2014/10/06 职场文书
病危通知书样本
2015/04/17 职场文书
运动会通讯稿100字
2015/07/20 职场文书
开网店计划分析
2019/07/30 职场文书