数据缓存作用:在一个元素上存取数据,避免循环引用的风险。
一、定义缓存
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缓存。