jQuery笔记——工具函数——缓存

数据缓存作用：在一个元素上存取数据，避免循环引用的风险。

一、定义缓存

data（）函数：为jQuery对象定义缓存数据

jQuery.data（element，key，value）

参数解释：

element：要关联数据的DOM对象

key：存储的数据名

value：新数据值

允许在DOM元素上附加任意类型的数据，避免了循环引用的内存泄漏风险。

注意：该工具目前不提供在XML文档上跨平台设置，且IE浏览器不允许通过自定义属性附加数据

应用：

    
    
    
    



    
1
    
2
    
3


    
1
    
2
    
3

如果jQuery集合指向多个元素，则将为所有元素定义缓存数据。

该函数在DOM元素上存放任何形式的数据。

为方便jQuery对象操作，jQuery有把全局函数data（）绑定到jQuery.fn原型对象中，从而实现在jQuery对象上直接调用data（）方法。

二、读取缓存

jQuery.data（element，key）       返回具体数据

jQuery.data（element）                返回Object

参数解释：

element：要关联数据的DOM对象

key：存储的数据名

如果没有设置任何值，返回null

如果jQuery指向多个元素，则将只返回第一个元素的对应缓存数据

调用没有参数的jQuery.data（element）时将获取一个作为JavaScript对象的所有值。jQuery内部自身使用这个方法来绑定数据，如事件处理器，所以不要以为它只包含数据存储的代码。

应用：

            $("li").each(function (index) {
                if($(this).data("type") == "menu"){
                    $(this).text("导航" + (index + 1))
                }
                else if($(this).data("type") == "news"){
                    $(this).text("新闻" + (index + 1))
                }
            });

三、删除缓存

jQuery缓存对象是全局对象，因此在Ajax应用中，由于页面很少被刷新，缓存对象将会一直存在。随着调用data（）函数操作次数增多，或因使用不当，舍得擦车对象急剧膨胀，最终影响程序性能。所以在使用jQuery数据缓存功能时，应及时清理缓存对象。

removeData（）：删除指定名称的缓存数据，并返回对应的jQuery对象

jQuery.removeData（element，[ name ]）

参数解释：

element：要移除数据的DOM对象

name：要移除的存储数据名

有name时：删除特有的值

无：所有值将被移除

以下情况不需要手动清除数据缓存：

1）对elem执行remove ）操作，jQuery会自动清除对象可能存在的缓存

2）对elem执行empty（）操作，如果当elem子元素存在数据缓存，jQuery也会自动清除子对象可能存在的数据缓存。

3）jQuery复制节点clone（）方法不会复制data缓存。