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>

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。