$.attr()和$.data()本质上属于DOM属性和Jquery对象属性的区别。

一个简单的例子

<!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操作。

转自：https://segmentfault.com/a/1190000008642200

Jquery中.attr()和.data()的区别的更多相关文章

  1. jquery中attr和prop的区别、 什么时候用 attr 什么时候用 prop (转自 芈老头 )

    jquery中attr和prop的区别. 什么时候用 attr 什么时候用 prop   在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这 ...

  2. jQuery中.attr()和.prop()的区别

    之前学习jQuery的时候,学习到了两种取得标签的属性值的方法:一种是elemJobj.attr(),另一种是elemJobj.prop().而在学习JS的时候,只有一种方法elemObj.getAt ...

  3. jquery中attr和prop的区别（转）

    在网络上看到这样一篇关于jquery中attr和prop的区别文章,觉得不错,所以转载了. 在jQuery 1.6中,.attr()方法查询那些没有设置的属性,则会返回一个undefined.如果你要 ...

  4. jquery中attr和prop的区别分析

    这篇文章主要介绍了jquery中attr和prop的区别分析的相关资料,需要的朋友可以参考下 在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别 ...

  5. Jquery学习笔记（6）--jquery中attr和prop的区别【精辟】

    jquery中attr和prop的区别 在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答案很 ...

  6. jquery中attr与prop的区别

    先从一个老生常谈的问题说起,使用jquery实现全选全不选.楼主先使用的jquery版本是 jquery-1.11.1.min.js 全选<input type="checkbox&q ...

  7. Jquery中attr()与prop()的区别

    在jQuery中,attr()函数和prop()函数都用于设置或获取指定的属性,它们的参数和用法也几乎完全相同.但是,这两个函数的用处却并不相同.下面我们来详细介绍这两个函数之间的区别. 1.操作对象 ...

  8. jQuery中 attr和Prop的区别

    出自这里: http://www.365mini.com/page/jquery_noconflict.htm 在jQuery中,attr()函数和prop()函数都用于设置或获取指定的属性,它们的参 ...

  9. Jquery中attr 和 prop的区别和联系

    昨天在选择借款方类型的时候总是会出现选择要点两次的现象,比如点击公司,第一次点击选择公司,没有选中,必须在次点击才可以选中,总感觉是有点延迟加载的意思,后来审查元素, 发现是redio元素,这样的话就 ...

随机推荐

  1. 搭建 FTP 文件服务

    1.安装并启动 FTP 服务 2.配置 FTP 权限 3.准备域名和证书 4.访问 FTP 安装 VSFTPD 使用 yum 安装 vsftpd: yum install vsftpd -y vsft ...

  2. python循环语句与其他编程语言不同之处

    1.局部变量 for i in range(5): print i, print i, 运行结果: 0 1 2 3 4 4 i是for语句里面的局部变量.但在python里面,在同一方法体内,定义了一 ...

  3. URL helper 逆向破解思路+详细过程 利用messagebox破解

    先了解一下软件的运行: 打开后是这样的,要注册 随便输入假注册码,看他怎么响应: 会弹出一个信息窗(massageBox)提示注册失败.到这里就行了,关掉,然后用OD打开,按F9跑起来: 这里输入假码 ...

  4. ajax 怎么重新加载页面

    $.ajax({ type:"post", url:url, data:{xxx:xx}, dataType: "json", success : functi ...

  5. go 多态

    demo1 // Sample program to show how polymorphic behavior with interfaces. package main import ( &quo ...

  6. 3.git、TortoiseGit的安装、仓库的配置教程

    参考:https://blog.csdn.net/hc_ttxs/article/details/79375788 引言: Git: 就是最原始的分布式版本控制系统,是开源的. GitHub:与Git ...

  7. 设计模式（八）Proxy Parttern 代理模式

    核心作用: 通过代理,控制对对象的访问 可以详细控制某个对象的方法,在调用这个方法做前置处理,调用这个方法后做后置处理(AOP的微观实现) AOP(Aspect Oriented Programmin ...

  8. 使用JDBC从数据库中查询数据的方法

    * ResultSet 结果集:封装了使用JDBC 进行查询的结果 * 1. 调用Statement 对象的 executeQuery(sql) 方法可以得到结果集 * 2. ResultSet 返回 ...

  9. 学习笔记57—归一化 （Normalization）、标准化 （Standardization）和中心化/零均值化 （Zero-centered）

    1 概念   归一化:1)把数据变成(0,1)或者(1,1)之间的小数.主要是为了数据处理方便提出来的,把数据映射到0-1范围之内处理,更加便捷快速.2)把有量纲表达式变成无量纲表达式,便于不同单位或 ...

  10. Codeforces 985 F - Isomorphic Strings

    F - Isomorphic Strings 思路:字符串hash 对于每一个字母单独hash 对于一段区间,求出每个字母的hash值,然后排序,如果能匹配上,就说明在这段区间存在字母间的一一映射 代 ...