4-3 静态与实例方法的区别
本节编程练习不计算学习进度,请电脑登录imooc.com操作

静态与实例方法的区别

jQuery.data(ele) 与 $(ele).data()

这两个函数都是用来在元素上存放数据,也就平时所说的数据缓存,都返回jQuery对象,初学时很容易让人混淆,尤其是给dom元素添加缓存数据时。

简单的来说:

1.jQuery.data()可以实现为dom元素或js对象添加缓存
2.$("ele").data()实是对前者的扩展,其目的是可以方便的通过选择器为多个dom元素添加缓存数据

虽然大体的意思一样,但是2个接口在处理上却有差别,也是我们容易忽视的

我们看右边的代码块

为什么通过.$("ele").data()原型方法会覆盖前面key相同的值呢?

留着这个疑问,我们在之后的源码会分析。

任务

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <script src="http://code.jquery.com/jquery-latest.js"></script>
  6. <title></title>
  7. </head>
  8. <body>
  9.  
  10. <div id="aaron">缓存接口测试</div></br>
  11.  
  12. <script type="text/javascript">
  13.  
  14. var ele1 = $("#aaron");
  15. var ele2 = $("#aaron");
  16.  
  17. ele1.data('a',1111);
  18. ele2.data('a',2222);
  19.  
  20. show('第一组,通过$().data()的方式,只取到最后一个a值,之前的被覆盖')
  21. show(ele1.data('a'))
  22. show(ele2.data('a'))
  23.  
  24.  
  25. show()
  26. //=======第二组=========
  27. show('第二组,通过$.data的方式,取到2组b值,未覆盖')
  28. $.data(ele1,"b","1111")
  29. $.data(ele2,"b","2222")
  30.  
  31. show($.data(ele1,"b"))
  32. show($.data(ele2,"b") )
  33.  
  34.  
  35.  
  36. function show(data) {
  37. if (arguments.length == 2) {
  38. var info = arguments[0]
  39. var data = arguments[1];
  40. for (var key in data) {
  41. $("body").append('<li>' + info +'key->' + key + '; value->' + data[key] + '</li>')
  42. }
  43. return
  44. }
  45.  
  46. if (!data) {
  47. return $("body").append('</br>')
  48. }
  49. if (typeof data === 'object') {
  50. for (var key in data) {
  51. $("body").append('<li>key->' + key + '; value->' + data[key] + '</li>')
  52. }
  53. } else {
  54. $("body").append('<li>' + data + '</li>')
  55. }
  56. }
  57.  
  58.  
  59. </script>
  60.  
  61. </body>
  62. </html>
下一节