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