当前位置:Gxlcms > JavaScript > jQuery中数据缓存$.data的用法及源码完全解析_jquery

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

时间:2021-07-01 10:21:17 帮助过:2人阅读

一、实现原理:

对于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, 则设置任意类型的数据

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


$.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)
使用方法:

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


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

人气教程排行