HTML5数据存储方案data与jQuery数据存储方案$.data()的区别
我们先看下$.fn.data()的使用,这个和$.data()是不一样的,前者是和某个jquery对象相关,后者则是全局方法。主要有data()和removeData()这2个实例方法。通过下面的例子和执行结果可以看到:$.fn.data()和$.fn.removeData()跟$.data的使用方式没有什么差别。
// 支持任何数据类型
2. $( "body" ).data( "name", "xx" );
3. $( "body" ).data( "sex", "male" );
4. $( "body" ).data( "foo", 100 );
5. $( "body" ).data( "object", {myType: "test", count: 40 } );
6. $( "body" ).data("array", [ 1, 2, 3 ]);
7. // data()获取单个属性console.log($( "body" ).data( "foo" ));
8. // 获取所有属性console.log($( "body" ).data());
9. // 删除属性$( "body" ).removeData("foo");console.log($( "body" ).data());
10. // 批量修改属性$( "body" ).data({"new" : 123, "name":"yy", "sex" : "female"});console.log($( "body" ).data());

接着我们看下:jquery数据缓存方案与HTML5中data-的关系。如果html元素有自定义属性data-,那么调用$.fn.data()的时候会获取这些属性的值。
1. <div id="one" data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>
2. <script> console.log($("#one").data("role" ) === "page");
3. console.log($("#one").data("lastValue" ) === 43);
4. console.log($("#one").data("hidden" ) === true);
5. console.log($("#one").data("options" ).name === "John");
6. </script>

7. 可以看到:jQuery获取data-*属性的时候,会自动进行数据类型转换,支持数字、对象和数组等类型。如果我们不想做这种自动类型转换,那么可以使用attr()函数获取原始值。
8.
<div id="one" data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>
<script> var domOne = $("#one")[0]; console.log($.data(domOne));
console.log($("#one").data("role" ) === "page"); console.log($.data(domOne));
console.log($("#one").data("lastValue" ) === 43); console.log($.data(domOne)); console.log($("#one").data("hidden" ) === true); console.log($.data(domOne)); console.log($("#one").data("options" ).name === "John"); console.log($.data(domOne));
</script>

通过代码1的执行结果,可以得出2点结论:
1.HTML5中的data-*属性,会被jQuery附加到HTMLElement对象上,这就是为什么我们可以通过$.data()获取HTML5自定义属性值的原因。
2.jQuery获取data-*是懒惰的、按需的。如果代码中没有使用这些HTML5自定义属性,那么jQuery是不会附加这些属性到HTMLElement对象上的。
代码2:
view plaincopy to clipboardprint?
1. <div id="one" data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>
2. <script> var domOne = $("#one")[0];
3. console.log($("#one").data("role" ) === "page");
4. console.log($.data(domOne));
5. console.log($.data($("#one")[0]));
6. console.log($.data($("#one")));</script>

更加可以证实:data-*是被绑定到HTMLElement对象上的,而不是jQuery封装后的对象上。
代码3:
view plaincopy to clipboardprint?
1. <div id="b" data-name="b" data-hobby="swim"></div>
2. <script>
3. // 试图使用jQuery修改name属性
4. $("#b").data("name","newb");
5. // 使用DOM修改
6. $("#b")[0].dataset.hobby = "run";
7. console.log(document.getElementById("b").dataset.name);
8. console.log(document.getElementById("b").dataset.hobby);</script>

可以看到:使用jQuery修改属性只是在内存中的操作,并不会刷新dom。但是通过js中的dataset修改时候,会刷新DOM,这是两者最大的不同。
代码4:
view plaincopy to clipboardprint?
1. <div id="a" data-name="a" data-hobby="books"></div>
2. <script>
3. var domA = document.getElementById("a");
4. console.log(domA.dataset.name);//a
5. console.log($("#a").data("name"));//a
6. // 修改name
7. domA.dataset.name = "aty";
8. console.log(domA.dataset.name);//aty
9. console.log($("#a").data("name"));//结果是a,不是我们期望的aty
10. // 修改hobby
11. domA.dataset.hobby = "run";
12. console.log(domA.dataset.hobby);//run
13. console.log($("#a").data("hobby"));//run
14. </script>

这里需要特别注意:jQuery只会在第一次访问data-的时候,将属性值加载到内存中;之后就和data-无关了。The data-attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated (all data values are then stored internally in jQuery)。也就是说:data-*属性只是起初始化的作用。
至此:jQuery数据缓存和HTML5 data-属性介绍完毕,简单总结下比较关键的几点:
1.jQuery读取data-会自动做数据类型转换,如果不想要这种转换只能使用attr()去获取原始的属性值。
2.jQuery读取data-属性是懒惰的、按需的,只有真正使用这些属性的时候,jQuery才会将其加载到内存。
3.jQuery修改属性值,都是在内存中进行的,并不会修改 DOM。
4.data-会被jQuery绑定到HTMLElement对象上,而不是jQuery封装后的对象上。
5.最重要的一点:jQuery只会在data-*第一次被访问的时候将其加载到内存,之后再也不会重新读取了。
HTML5数据存储方案data与jQuery数据存储方案$.data()的区别的更多相关文章
- jQuery源代码学习之六——jQuery数据缓存Data
一.jQuery数据缓存基本原理 jQuery数据缓存就两个全局Data对象,data_user以及data_priv; 这两个对象分别用于缓存用户自定义数据和内部数据: 以data_user为例,所 ...
- jQuery数据缓存方案详解:$.data()的使用
我们经常使用隐藏控件或者是js全局变量来临时存储数据,全局变量容易导致命名污染,隐藏控件导致经常读写dom浪费性能.jQuery提供了自己的数据缓存方案,能够达到和隐藏控件.全局变量相同的效果,但是j ...
- 利用jQuery内置的data()方法存储数据
jQuery提供了内置的data()方法,与DOM元素不同的是,它可以用来存储key/value类型的数据.数据的存储是很容易的: $('#myDiv').data('currentState', ' ...
- jQuery数据缓存$.data 的使用以及源码解析
一.实现原理: 对于DOM元素,通过分配一个唯一的关联id把DOM元素和该DOM元素的数据缓存对象关联起来,关联id被附加到以jQuery.expando的值命名的属性上,数据存储在全局缓存对象jQu ...
- Android Learning:数据存储方案归纳与总结
前言 最近在学习<第一行android代码>和<疯狂android讲义>,我的感触是Android应用的本质其实就是数据的处理,包括数据的接收,存储,处理以及显示,我想针对这几 ...
- 前端数据存储方案集合(cookie localStorage等)以及详解 (二)
前端数据存储方案集合(cookie localStorage等)以及详解 (二) 在之前的文章中已经介绍到了 前端存储方案中的 cookie . 但是 cookie 的存储上限是 4KB. 如果超过了 ...
- jQuery对象数据缓存Cache原理及jQuery.data详解
网上有很多教你怎么使用jQuery.data(..)来实现数据缓存,但有两个用户经常使用的data([key],[value])和jQuery.data(element,[key],[value])几 ...
- jQuery数据缓存data(name, value)详解及实现
一. jQuery数据缓存的作用 jQuery数据缓存的作用在中文API中是这样描述的:“用于在一个元素上存取数据而避免了循环引用的风险”.如何理解这句话呢,看看我下面的举例,不知道合不合适,如果你有 ...
- 日均数据量千万级,MySQL、TiDB两种存储方案的落地对比
http://mp.weixin.qq.com/s?__biz=MzIzNjUxMzk2NQ==&mid=2247484743&idx=1&sn=04337e020d268a9 ...
随机推荐
- UIEvent笔记
UIEvent是什么 代表iOS系统中的一个事件. UIEvent分为三类,touch events, motion events, and remote-control events touch e ...
- js 自定义获得类class和获得id
使用js获取类名,但是低版本浏览器不支持getElementsByClassName,所以我们就需要自定义getClassName,方便跨浏览器使用. 当然,如果采用jquery就不需要. //获取类 ...
- Shell基本知识
Shell是什么 Shell是一个命令行解释器,它为用户提供了一个向Linux内核发送请求以便运行程序的界面系统级程序,用户可以使用Shell来启动.挂起.停止甚至编写一些程序. Shell还是一个功 ...
- 获取dataGridView双击时判断双击的是下面的行,还是列头
private void dataGridView1_DoubleClick(object sender, EventArgs e) { Point hit = this.dataGridView1. ...
- np.random.normal()
高斯分布(Gaussian Distribution)的概率密度函数(probability density function): \[ f(x)=\frac1{\sqrt{2\pi}\sigma}\ ...
- 数组模拟单向链表例题(UVa11988)
指针的链表实现方式是,当前节点的next指向下一个节点,用数组模拟就是 for(int i=next[0];i!=0;i=next[i]) i=next[i]:就是一条链. 例题: 你有一个破损的键盘 ...
- GTID 笔记
1.生成事务 root@(none)>use pxc01 Database changed root@pxc01>create table tbx(id int); Query OK, 0 ...
- Flexbox(弹性盒子)
CSS3属性:这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. 属性介绍: 创建Flex容器 .container ...
- Windows USB 编程
GUID #include <initguid.h> // For DEFINE_GUID // Device Interface GUID.DEFINE_GUID(GUID_DEVINT ...
- Linux 远程登录ssh服务器
1.安装ssh服务器 sudo apt-get install openssh-server 2.在另一端输入ssh IP及密码(或ssh 用户名@IP)就可以远程登录到IP所在计算机