$.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. C#深入多线程

    主线程: th = Thread.CurrentThread; //现在的线程为主线程 th.Name = "MainThread"; //set线程名字:主线程本身没有名字 th ...

  2. Spring boot2.0 设置文件上传大小限制

    今天把Spring boot版本升级到了2.0后,发现原来的文件上传大小限制设置不起作用了,原来的application.properties设置如下: spring.http.multipart.m ...

  3. vuex里mapState,mapGetters使用详解

    这次给大家带来vuex里mapState,mapGetters使用详解,vuex里mapState,mapGetters使用的注意事项有哪些,下面就是实战案例,一起来看一下. 一.介绍 vuex里面的 ...

  4. 如何看待Arcsoft虹软，推出的人脸认知引擎免费SDK？

    虹软公司是一家具有硅谷背景的图像处理公司,除了人脸技术以外,还有多项图像及视频处理技术.他们的双摄像头处理算法和人脸美化算法囊括了包括OPPO VIVO,SUMAMNG一系列手机厂商. 整个人脸识别运 ...

  5. JAVA基础知识总结：十三

    测试用一个字符串常量创建一个字符串对象 1.获取这个字符串的长度 2.获取任意长度的子串 3.判断这个字符串是否为空 4.将这个字符串中的小写字母转化为大写字母 5.获取某个字符在字符串中第一次出现的 ...

  6. css sticker footer

    .detail position: fixed z-index: 100 top: 0 left: 0 width: 100% height: 100% overflow: auto .detail- ...

  7. Unity Shader入门精要之 screen post-processing effect

    本篇记录了学习Unity Shader入门精要的屏幕后处理的一些知识点. OnRenderImage(RenderTexture src, RenderTexture dest) 以上函数是Unity ...

  8. sql server 学习笔记 ( backup 备份方案 )

    做个记入就好 USE [master] SELECT bs.database_name AS 'Database Name', bs.backup_start_date AS 'Backup Star ...

  9. 2d游戏和 3d游戏的区别

    2D游戏和3D游戏的主要区别 一.总结 一句话总结:2D中的单位就是贴图,3D中的单位还有高 1. 3D 和 2D 游戏的区别主要体现在呈现画面和文件体积上: 2. 借助 3D 引擎可以提升 2D 游 ...

  10. Spring Boot入门第五天：使用JSP

    原文链接 1.在pom.xml文件中添加依赖: <!-- Servlet依赖 --> <dependency> <groupId>javax.servlet< ...