定义和用法
1.$.data() 函数用于在指定的元素上存取数据,返回设置值。
提示: 1.这是一个底层方法,.data() 方法更方便使用。
2.通过 data() 函数存取的数据都是临时数据,一旦页面刷新,之前存放的数据都将被移除。
用法一:
假设我的页面有一个id为dom1的div元素,我想给这个dom元素缓存一个数据,名字叫number,值为999,方便我在下次为这个div写一些事件的时候直接从这个div的缓存中取到number。我之前也有疑问,这需要缓存么,给这个div设置一个属性叫number,赋值为999不得了么,可是代码越写到后面越发明白缓存的重要性,就这么说,假如我们设置属性,那么在我们获取的时候,用户是由可能通过浏览器修改页面的(不少用户也知道F12打开调试改html的,比如说我自己*---*),这样我们再去获取时,可能就已经是用户修改的脏数据了,很不安全。通过缓存,就可以很好的解决问题,用户是还是很难去修改内存数据的,而且数据也对其不可见。
见代码:
var a=document.getElementById('dom1');
$.data(a,'number',999);
a是我获取到的dom元素,下面一行就是为这个dom缓存number=999的这个数据。
如果要取缓存的值,很简单var value=$('div#dom1').data('number'),这样就可以取到缓存在这个div上的number值了
这里强调一下获取到的a对象,这是个dom对象,现在我们普遍都用jquery了,再取id为dom1是可能都会这么写var a=$('div#dom1'),这样写也是取到了元素,但是这里的a就是一个jquery对象,并不是dom对象,如果不转换的话,
$.data(a,'number',999);这一句是无法添加缓存的
我们如果使用jquery获取的对象,可以这么写
$.data(a.get(0),'number',999);
a是jquery对象,a.get(0)就把jquery对象转换成了dom对象,之后就可以缓存数据啦!
用法二:
var a=$('div#dom1');
a.data('number',999);
取值还是一样的,不过就是把方法一的第一个目标对象提取出来,再调用.data()进行缓存。
两种方法,推荐使用第一种方法!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
原因:
根据测试,前一种写法要后前一种写法,快了将近10倍。因为elem.data()方法是定义在jQuery函数的prototype对象上面的,而$.data()方法是
定义jQuery函数上面的,调用的时候不从复杂的jQuery对象上调用,所以速度快得多。