1、储存接口
html5 dataset是新的HTML5标准,它可以允许你在普通的元素标签里嵌入类似data-*的属性,然后我们就可以来实现一些简单数据的储存或者读取。它的数量并不受限制,并且也能由JavaScript动态来进行修改,同时也支持CSS选择器进行样式的设置。这使得data属性特别灵活,也非常强大。有了这样的属性我们能够更加有序直观的进行数据预设或存储。我们进行一个假设,假如在不支持HTML5标准的浏览器中,那我们要如何实现数据存取? jQuery就提供了一个.data()的方法来处理这个问题。
通常使用jQuery初学者一般不是很关心data方式,这个方法是jquery内部预用的,可以用来做性能优化,比如sizzle选择中可以用来缓存部分结果集等等。当然这个也是非常重要的一个API了,常常用于我们存放临时的一些数据,因为它是直接跟DOM元素对象绑定在一起的
jQuery提供的存储接口
jQuery.data( element, key, value ) 静态接口,存数据
jQuery.data( element, key ) 静态接口,取数据
.data( key, value ) 实例接口,存数据
.data( key ) //实例接口,取数据
2个方法在使用上存取都是通一个接口,传递元素,键值数据。在jQuery的官方文档中,建议用.data()方法来代替。
我们把DOM可以看作一个对象,那么我们往对象上是可以存在基本类型,引用类型的数据的,但是这里会引发一个问题,可能会存在循环引用的内存泄漏风险
通过jQuery提供的数据接口,就很好的处理了这个问题了,我们不需要关心它底层是如何实现,只需要按照对应的data方法使用就行了
同样的也提供2个对应的删除接口,使用上与data方法其实是一致的,只不过是一个是增加一个是删除罢了
以下的代码进行功能演示:
$(’.left’).click(function () {
var ele =
(
t
h
i
s
)
;
通
过
(this); 通过
(this);通过.data方式设置数据
$.data(ele, “a”, “data test”)
.
d
a
t
a
(
e
l
e
,
"
b
"
,
n
a
m
e
:
"
广
信
软
件
学
院
"
,
a
d
d
:
"
九
王
庙
"
)
通
过
.data(ele, "b", { name: "广信软件学院", add:"九王庙" }) 通过
.data(ele,"b",name:"广信软件学院",add:"九王庙")通过.data方式取出数据
var reset = $.data(ele, “a”) + “” + $.data(ele, “b”).name;
ele.find(‘span’).append(reset);
$.removeData(ele, “a”);
});
$('.right').click(function () {
var ele = $(this);
通过.data方式设置数据
ele.data("a", "data test")//键值对
ele.data("b", {
name: "广信软件学院"
})
通过.data方式取出数据
var reset = ele.data("a") + "</br>" + ele.data("b").name;
ele.find('span').append(reset);