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 EasyUI之验证框validatebox实例详解
Apr 10 jQuery
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
jquery实现动态添加附件功能
Oct 23 jQuery
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
使vue实现jQuery调用的两种方法
May 12 jQuery
jQuery实现滑动星星评分效果(每日分享)
Nov 13 jQuery
jquery实现上传文件进度条
Mar 26 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
基于文本的留言簿
2006/10/09 PHP
Yii框架中memcache用法实例
2014/12/03 PHP
php实现字符串翻转的方法
2015/03/27 PHP
PHP静态成员变量
2017/02/14 PHP
基于jQuery的自动完成插件
2011/02/03 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
2013/12/05 Javascript
jQuery中queue()方法用法实例
2014/12/29 Javascript
Javascript核心读书有感之表达式和运算符
2015/02/11 Javascript
js闭包所用的场合以及优缺点分析
2015/06/22 Javascript
JS实现文档加载完成后执行代码
2015/07/09 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
2016/08/06 Javascript
利用jquery禁止外层滚动条的滚动
2017/01/05 Javascript
jQuery EasyUI之验证框validatebox实例详解
2017/04/10 jQuery
Egg.js 中 AJax 上传文件获取参数的方法
2018/10/10 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
2019/02/08 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
2020/05/10 Javascript
mac下pycharm设置python版本的图文教程
2018/06/13 Python
python使用__slots__让你的代码更加节省内存
2018/09/05 Python
Python图像处理之gif动态图的解析与合成操作详解
2018/12/30 Python
为什么你还不懂得怎么使用Python协程
2019/05/13 Python
python 矢量数据转栅格数据代码实例
2019/09/30 Python
Python3 使用selenium插件爬取苏宁商家联系电话
2019/12/23 Python
python GUI库图形界面开发之PyQt5 UI主线程与耗时线程分离详细方法实例
2020/02/26 Python
python使用Thread的setDaemon启动后台线程教程
2020/04/25 Python
python_matplotlib改变横坐标和纵坐标上的刻度(ticks)方式
2020/05/16 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
解决HTML5手机端页面缩放的问题
2017/10/27 HTML / CSS
日本土著品牌,综合型购物网站:Cecile
2016/08/23 全球购物
美国在线旅行社:Crystal Travel
2018/09/11 全球购物
综合实践教学反思
2014/01/31 职场文书
批评与自我批评发言稿
2014/10/15 职场文书
个人欠款协议书范本2014
2014/11/02 职场文书
五年级学生期末评语
2014/12/26 职场文书
大学运动会通讯稿
2015/07/18 职场文书
毕业生入职感言
2015/07/31 职场文书
口袋妖怪冰系十大最强精灵,几何雪花排第七,第六类似北极熊
2022/03/18 日漫