html5的自定义data属性相信大家都不会陌生，有了它你可以绑定所需的数据到指定元素上。然后通过jquery设置、获取数据，简直开心的不行啊。
想到设置、获取元素属性值，大家一定首先想到了jquery的.attr()方法，但是你一定知道jquery还有个.data()的方法。本人以前一直萌(傻)萌(傻)哒(的)以为这两个方法在处理data属性过程中实现的效果是一样的，只不过.data()方法官方更推荐使用(看名字就感觉人家是正规军)。但后来本人在做项目的过程中发现，这两种方法处理data属性并不相同(想想也是，要是一样，还搞个data干毛)。废话少说，下面来点干的：

 <html>

 <head>

 <meta charset="UTF-8">

 <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

 <script>

 $(function(){

 　　$("#btn1").click(function(){

 　　　　$("div").attr("data-my-value", "使用attr改变的数据");

 　　　　$("p").text("使用attr设置数据成功");

 　　});

 　　$("#btn2").click(function(){

 　　　　$("div").data("myValue", "使用data改变的数据");

 　　　　$("p").text("使用data设置数据成功");

 　　});

 　　$("#btn3").click(function(){

 　　　　var v = $("div").attr("data-my-value");

 　　　　$("p").text("使用attr获取数据："+v);

 　　});

 　　$("#btn4").click(function(){

 　　　　var v = $("div").data("myValue");

 　　　　$("p").text("使用data获取数据："+v);

 　　});

 　　$("#btn5").click(function(){

 　　　　$("div").data("person", {age:12, name:"wang"});

 　　　　$("p").text("使用data增加属性person成功");

 　　});

 　　$("#btn6").click(function(){

 　　　　console.log($("div").data());

 　　});

 });

 </script>

 </head>

 <body>

 <button id="btn1">1.使用attr设置</button>

 <button id="btn2">2.使用data设置</button>

 <button id="btn3">3.使用attr获取</button>

 <button id="btn4">4.使用data获取</button>

 <button id="btn5">5.使用data增加person属性</button>

 <button id="btn6">6.控制台打印data</button>

 <div data-my-value="服务器渲染数据"></div>

 <p></p>

 </body>

 </html>

这段代码是不是简单的不行了，下面我们用这段代码说明一下.attr()和.data()在处理data属性时的不同之处：
这里我们给div增加了“data-my-value”属性，很多时候data属性的数据会在页面加载时由服务器获取，这里我们通过构建DOM时将“data-my-value”赋值为“服务器渲染数据”的方法模拟服务器数据渲染。

  1. 首先我们点击3、4按钮，发现获取的数据均为“服务器渲染数据”。好像没什么不同，别着急，继续看。
  2. 接下来我们打开浏览器调试工具，注意div元素，点击1按钮，div的“data-my-value”变为“使用attr改变的数据”，然后点击3按钮，获取的数据为“使用attr改变的数据”，点击4按钮，获取的数据为“服务器渲染数据”。通过调试器我们发现元素的“data-my-value”属性为“使用attr改变的数据”，为什么通过.data()方法获取的数据依旧是“服务器渲染数据”？我们再来看看下面的操作。
  3. 点击2按钮，通过调试器我们发现div的“data-my-value”属性数据没有发生变化，然后我们点击3按钮，获取的数据为“使用attr改变的数据”，点击4按钮，获取的数据为“使用data改变的数据”。what？

遇到问题，肯定要首先查官方手册了，通过查询手册和在Stack Overflow查资料我总结了如下几点(有不对的地方欢迎大家指正)：

  1. jquery通过attr直观的设置、获取data属性值，data虽然为自定义属性，但是attr处理它与处理标准元素相同。
  2. jquery的data方法是将数据存储在与元素关联的对象中，并不是改变元素的属性值，通过.data()（不加任何参数）可以获得该对象。点击上面demo中的按钮6可以在控制台查看该对象。
  3. 有一点需要注意，当页面加载时，jquery会默认将data属性的数据加入到这个关联的对象中，后面可以通过data(key,value)方法修改数据，也可以添加新的数据或对象，当然添加的新data属性不会在DOM有所体现（通过点击按钮5增加新属性，点击6查看）。

总之，.attr()方法处理data属性与标准属性相同；使用.data()方法的整个过程中，jquery一直操作的是这个与元素关联的对象，和DOM中元素本身的属性无关。

文中有不对的地方欢迎大家多多指正。

参考：
http://api.jquery.com/attr/
https://api.jquery.com/data/
https://stackoverflow.com/questions/5309926/how-to-get-the-data-id-attribute
https://stackoverflow.com/questions/7261619/jquery-data-vs-attr

jquery data属性 attr vs data的更多相关文章

  1. 关于jQuery中的attr和data问题

    今天在使用data获取属性并且赋值时遇到一个小问题,写下来防止以后再跳坑. 在使用jQuery获取自定义属性值时,我们习惯用 $(selector).attr('data-value'); jQuer ...

  2. jQuery元素属性attr设置多个键值或函数 删除属性removeAttr

    $("Element").attr(name) '取得第一个匹配的属性值,比如$("img").attr("src") $("El ...

  3. jquery操作属性 attr()和 prop()兼容性问题

    jquery1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值. 大家都知道有的浏览器只要写disabled,checked就可以了,而有的 ...

  4. 【七】jquery之属性attr、 removeAttr、prop[全选全不选及反选]

    全选全不选 界面: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  5. HTML 5：你必须知道的data属性

    原文:All You Need to Know About the HTML5 Data Attribute 译文:你必须知道HTML 5 的Data属性 译者:dwqs HTML 5的Data属性可 ...

  6. html 5实用特性之data属性

    HTML 5之前,我们必须依赖于class和rel属性来存储需要在网站中使用的数据片段,这种做法有时会在网站的外观和实用性之间产生冲突.而HTML 5 Data属性的存在就能很好满足需要. HTML5 ...

  7. HTML data属性简介以及低版本浏览器兼容算法

    实例 使用 data-* 属性来嵌入自定义数据: <ul> <li data-animal-type="bird">Owl</li> <l ...

  8. data属性

    本框架内置组件以及部分插件可以通过data属性来初始化并使用,通常通过data-toggle来调用API(toggle是触发器的意思,例如我们创建一个navtab标签可以通过为a的data-toggl ...

  9. 对比jquery获取属性的方法props、attr、data

    1.attr,prop 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法.对于自定义的属性是取不到的: 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. 2.a ...

随机推荐

  1. 无线 WIFI 的13个信道频率范围（转载）

    转自:http://cnzhx.net/blog/13-channels-of-wifi/ 目前主流的无线WIFI网络设备不管是802.11b/g还是802.11b/g/n 一般都支持13个信道.它们 ...

  2. strcpy（转载）

    转自:http://www.kuqin.com/clib/string/strcpy.html 原型:extern char *strcpy(char *dest,char *src); 用法:#in ...

  3. RedHat/CentOS安装五笔输入法(转载)

    转自:http://www.zhukun.net/archives/5939 使用centos 仓库里的 ibus,我的 CenOS6.3 自带了 ibus 包.打开 System – prefere ...

  4. bzoj 1179: [Apio2009]Atm【tarjan+spfa】

    明明优化了spfa还是好慢-- 因为只能取一次值,所以先tarjan缩点,把一个scc的点权和加起来作为新点的点权,然后建立新图.在新图上跑spfa最长路,最后把酒吧点的dis取个max就是答案. # ...

  5. NOIp 2014 寻找道路【图的遍历/最短路】By cellur925

    题目传送门 比较裸的图论,结果自己还是没做出来,我真菜. 我们根据题意,只要把不能通向终点的点求出,然后再分别以这些点为起点,求出它们能到达的点,这些点也不能在路径上. 之后跑一个最短路即可. 注意以 ...

  6. Luogu P2921 在农场万圣节 【tarjan in 有向图】 By cellur925

    题目传送门 上来就想到既直接又简单的暴力方法,顺着每个房间的下一个走下去就好了,但是没想到最坏情况会达到1e5,100000的数据铁定超时. #include<cstdio> #inclu ...

  7. Windows API函数大全

    WindowsAPI函数大全(精心总结) 目录 1. API之网络函数... 1 2. API之消息函数... 1 3. API之文件处理函数... 2 4. API之打印函数... 5 5. API ...

  8. Windows下安装Ubuntu16.04双系统

    ROS需要在Ubuntu系统上开发,虚拟机跑Ubuntu开发ROS容易出现各种各样的问题,所以需要安装Ubuntu16.04双系统.笔者也是一步步按着网上的帖子来,由于网上的教程都不是最新的而且有的也 ...

  9. LightOj 1236 Pairs Forming LCM (素数筛选&&唯一分解定理)

    题目大意: 有一个数n,满足lcm(i,j)==n并且i<=j时,(i,j)有多少种情况? 解题思路: n可以表示为:n=p1^x1*p2^x1.....pk^xk. 假设lcm(a,b) == ...

  10. Codeforces Beta Round #98 (Div. 2)(A-E)

    A #include <iostream> #include<cstdio> #include<cstring> #include<algorithm> ...