jQuery中数据缓存$.data的用法及源码完全解析_jquery

对于DOM元素，通过分配一个唯一的关联id把DOM元素和该DOM元素的数据缓存对象关联起来，关联id被附加到以jQuery.expando的值命名的属性上，数据存储在全局缓存对象jQuery.cache中。在读取、设置、移除数据时，将通过关联id从全局缓存对象jQuery.cache中找到关联的数据缓存对象，然后在数据缓存对象上执行读取、设置、移除操作。

对于Javascript对象，数据则直接存储在该Javascript对象的属性jQuery.expando上。在读取、设置、移除数据时，实际上是对Javascript对象的数据缓存对象执行读取、设置、移除操作。

为了避免jQuery内部使用的数据和用户自定义的数据发生冲突，数据缓存模块把内部数据存储在数据缓存对象上，把自定义数据存储在数据缓存对象的属性data上。

二、总体结构：

三、$.data(elem, name, data), $.data(elem, name)
$.data(elem, name, data)的使用方法：
如果传入参数name, data, 则设置任意类型的数据

 
 
 
 




 The values stored were
 
 and
 

$.data(elem, name)的使用方法：
如果传入key, 未传入参数data, 则读取并返回指定名称的数据

 
 
 
 



A div
Get "blah" from the div
Set "blah" to "hello"
Set "blah" to 86
Remove "blah" from the div
The "blah" value of this div is ?

$.data(elem, name, data), $.data(elem, name) 源码解析：

四、.data(key, value), .data(key)
使用方法：

HTML5 data attriubutes:

.data(key, value), .data(key) 源码解析

五、$.removeData(elem, name)，.removeData(key)
使用方法：

 
 
 
 



value1 before creation: 
value1 after creation: 
value1 after removal: 
value2 after removal: 

 
 
 
 



value1 before creation: 
value1 after creation: 
value1 after removal: 
value2 after removal: 

$.removeData(elem, name)，.removeData(key) 源码解析：

六、$.hasData(elem)
使用方法：

 
 
 



Results: