jQuery中的$.fn.data数据缓存

$.fn.data、$.fn.attr、$.fn.prop区别

$.fn.data、$.fn.attr、$.fn.prop的使用方法都差不多，但是他们的用法不一样。

 1 <script src="jQuery.js"></script>
 2 <div id="div"></div>
 3 <script>
 4     $(function(){
 5         var $div = $(‘#div‘),
 6                 oDiv = document.getElementById(‘div‘);
 7
 8         // attr 给元素添加页面属性 <div id="div" attr="attr"></div>  一般应用于设置和获取标准html属性
 9         $div.attr(‘attr‘, ‘attr‘);
10         console.log($div.attr(‘attr‘)); // attr
11         // 原理
12         oDiv.setAttribute(‘attr‘, ‘attr‘);
13         console.log(oDiv.getAttribute(‘attr‘)); // attr
14
15         // prop 给元素对象添加属性
16         $div.prop(‘prop‘, ‘prop‘);
17         console.log($div.prop(‘prop‘)); // prop
18         // 原理
19         oDiv[‘prop‘] =  ‘prop‘;
20         console.log(oDiv[‘prop‘]); // prop
21
22
23         // data 存储大数据(DOM元素和对象之间相互引用，导致大部分浏览器内存泄漏)
24         $div.data(‘data‘, ‘data‘);
25         console.log($div.data(‘data‘)); // data
26         // 原理
27         // 通过cache中介对象来做元素和对象的映射
28     });
29 </script>

$.data相关方法介绍

1、$.data(oDom/$.fn, key, value)：设置数据

2、$.data(oDom/$.fn, key)：获取数据

3、$.removeData(oDom/$.fn, key)：删除数据

4、$.hasData(oDom/$.fn, key)：判断数据是否存在

 1 <script src="jQuery.js"></script>
 2 <div id="div"></div>
 3 <script>
 4     $(function(){
 5         var $div = $(‘#div‘);
 6
 7         // 添加数据
 8         $.data($div, ‘name‘, ‘hum‘);
 9
10         // 获取数据
11         console.log($.data($div, ‘name‘)); // hum
12
13         // 判断数据
14         console.log($.hasData($div, ‘name‘)); // true
15
16         // 删除数据
17         $.removeData($div, ‘name‘);
18
19         // 获取数据
20         console.log($.data($div, ‘name‘)); // undefined
21         console.log($.hasData($div, ‘name‘)); // false
22     });
23 </script>

$.fn.data相关方法介绍

1、$.fn.data(key, value)：添加数据

2、$.fn.data(key)：获取数据

3、$.fn.removeData(key)：删除数据

 1 <script src="jQuery.js"></script>
 2 <div id="div"></div>
 3 <script>
 4     $(function(){
 5         var $div = $(‘#div‘);
 6
 7         // 添加数据
 8         $div.data(‘name‘, ‘hum‘);
 9
10         // 获取数据
11         console.log($div.data(‘name‘)); // hum
12
13         // 删除数据
14         $div.removeData(‘name‘);
15
16         // 获取数据
17         console.log($div.data(‘name‘)); // undefined
18     });
19 </script>