jQuery.data(ele) 与 $(ele).data()
这两个函数都是用来在元素上存放数据,也就平时所说的数据缓存,都返回jQuery对象,初学时很容易让人混淆,尤其是给dom元素添加缓存数据时。
简单的来说:
1.jQuery.data()可以实现为dom元素或js对象添加缓存 2.$("ele").data()实是对前者的扩展,其目的是可以方便的通过选择器为多个dom元素添加缓存数据
虽然大体的意思一样,但是2个接口在处理上却有差别,也是我们容易忽视的
我们看右边的代码块
为什么通过.$("ele").data()原型方法会覆盖前面key相同的值呢?
留着这个疑问,我们在之后的源码会分析。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="http://code.jquery.com/jquery-latest.js"></script> <title></title> </head> <body> <div id="aaron">缓存接口测试</div></br> <script type="text/javascript"> var ele1 = $("#aaron"); var ele2 = $("#aaron"); ele1.data('a',1111); ele2.data('a',2222); show('第一组,通过$().data()的方式,只取到最后一个a值,之前的被覆盖') show(ele1.data('a')) show(ele2.data('a')) show() //=======第二组========= show('第二组,通过$.data的方式,取到2组b值,未覆盖') $.data(ele1,"b","1111") $.data(ele2,"b","2222") show($.data(ele1,"b")) show($.data(ele2,"b") ) function show(data) { if (arguments.length == 2) { var info = arguments[0] var data = arguments[1]; for (var key in data) { $("body").append('<li>' + info +'key->' + key + '; value->' + data[key] + '</li>') } return } if (!data) { return $("body").append('</br>') } if (typeof data === 'object') { for (var key in data) { $("body").append('<li>key->' + key + '; value->' + data[key] + '</li>') } } else { $("body").append('<li>' + data + '</li>') } } </script> </body> </html>