jQuery11 data() : 数据缓存

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="jquery-2.0.3.js"></script>
<script>$(function(){$('#div1').attr('name','hello');alert( $('#div1').attr('name') );document.getElementById('div1').setAttribute('name','hello');alert( document.getElementById('div1').getAttribute('name') );$('#div1').prop('name','hello');alert( $('#div1').prop('name') );document.getElementById('div1')['name'] = 'hello';alert( document.getElementById('div1')['name'] );$('#div1').data('name','hello');alert( $('#div1').data('name') );
});//DOM元素与对象之间互相引用，大部分浏览器就会出现内存泄漏
var oDiv = document.getElementById('div1');
var obj = {};
oDiv.name = obj;
obj.age = oDiv;//会出现内存泄漏
$('#div1').attr('name',obj);
//换成，就不用担心内存泄漏
$('#div1').data('name',obj);
$('body').data('age',obj);//data就是通过cache把dom元素和对象间接的联系到一起。这就防止了内存泄漏。如下图。
var cache = {//
    1 : {name : obj},2 : {age : obj}
};</script>
</head><body>
<div id="div1" xxx=" "></div>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="jquery-2.0.3.js"></script>
<script>
//对外提供的接口
jQuery.extend({acceptDatahasDatadataremoveData_data_removeData
});
//对外提供的接口
jQuery.fn.extend({dataremoveData
});
//原型的方法
Data.prototype = {keysetgetaccessremovehasDatadiscard
};$(function(){$('#div1').data('name','hello');alert( $('#div1').data('name') );$('#div1').removeData('name');alert( $('#div1').data('name') );$.data(document.body , 'age' , 30);alert( $.data(document.body,'age') );$.removeData(document.body , 'age');alert( $.data(document.body,'age') );alert( $.hasData(document.body,'age') );---------------------------------------------------------var obj = { name : "hello" };Object.freeze(obj);obj.name = 'hi';alert( obj.name );//hello,不能被修改。---------------------------------------------------------var obj = { name : "hello" };//第一个参数是禁止修改的对象，后面参数是把obj变成了这个样子obj = { name : "hello"，0：｛｝ },并且这个0属性是不能被修改的。
    Object.defineProperty( obj, 0, {get: function() {return {};}});alert(obj[0]);//object json
    obj[0] = 123;alert(obj[0]);//还是 object json，
    obj[name] = 456;console.log(obj[name]);//456，--------------------------------------------------------$.data(document.body , 'age' , 30);$.data(document.body , 'job' , 'it');var cache = {//
            1 : {age : 30,job : 'it'},2 : {age : obj}
};$.data(document.body ,{ 'age' : 30 , 'job' : 'it' , 'allName' : '课堂'});var cache = {//
            1 : {age : 30,job : 'it','allName' : '课堂'},2 : {age : obj}$.removeData(document.body , ['age','job','all-name']);$.data($('#div1'),'name','hello');
});</script>
</head><body jQuery203089541586732714850.8840931279098725="1">
<div id="div1" jQuery203089541586732714850.8840931279098725="2"></div>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="jquery-2.0.3.js"></script>
<script>
$(function(){alert($('div').html());//默认获取第一个
    $('div').data();//默认获取第一个-------------------------------------------------------------$('#div1').data('name','hello');$('#div1').data('age','30');alert($('#div1').get(0).dataset.miaovAll);//h5特性，data-miaov-all="妙味"
    console.log( $('#div1').data() );//输出｛name:hello,age：30｝
    $('#div1').data({name:'hello',age:'30'});console.log( $('#div1').data('name-age') );$('#div1').data('nameAge','hi');$('#div1').data('name-age','hello');this.cache = {1 : {'nameAge' : 'hello','name-age' : 'hello' }}});
</script>
</head><body>
<div id="div1" data-miaov-all="妙味" class="box" title="123">aaaa</div>
<div>bbbb</div>
<div>cccc</div>
</body>
</html>

本文转自农夫山泉别墅博客园博客，原文链接：http://www.cnblogs.com/yaowen/p/6925907.html，如需转载请自行联系原作者

jQuery11 data() : 数据缓存相关推荐

使用data()方法缓存数据
使用data()方法缓存数据 1.根据元素中的名称定义或返回存储的数据,其调用格式为: data([name]) 其中,参数name为字符型,表示存储数据的名称. 2.根据元素中的名称在元素上存储或设 ...
CYQ.Data 数据框架系列索引
2019独角兽企业重金招聘Python工程师标准>>> 索引基础导航: 1:下载地址:http://www.cyqdata.com/download/article-detail-4 ...
iOS开发网络——数据缓存
一.关于同一个URL的多次请求有时候,对同一个URL请求多次,返回的数据可能都是一样的,比如服务器上的某张图片,无论下载多少次,返回的数据都是一样的. 上面的情况会造成以下问题 (1)用户流量的浪费 ...
php实现基于shmop扩展的数据缓存
http://eslizn.com/post/php-data-cache-for-shmop.html 今天上课时研究了下PHP的数据缓存,根据网上的资料,一般采用serialize序列化存储,读取 ...
第十七课：js数据缓存系统的原理
这一章主要讲的是jQuery的缓存系统的历史发展,以及他自己的框架的缓存系统的实现.都是源码解析. 我就挑几个重点讲下: (1)jQuery的缓存机制的原理 jQuery的缓存机制实现的原理是在元素中 ...
postgres两条结果集合并无法区分那个表的数据结果集_Hulu在OLAP场景下数据缓存技术实战...
点击hadoop123关注我哟知名的大数据中台技术分享基地,涉及大数据架构(hadoop/spark/flink等),数据平台(数据交换.数据服务.数据治理等)和数据产品(BI.AB测试平台)等,也 ...
thinkphp mysql缓存_ThinkPhp数据缓存技术
1.缓存初始化在 ThinkPHP 中,有一个专门处理缓存的类:Cache.class.php(在Thinkphp/Library/Think/cache.class.php,其他的各种缓存类也在这 ...
jquery源码解析：jQuery数据缓存机制详解2
上一课主要讲了jQuery中的缓存机制Data构造方法的源码解析,这一课主要讲jQuery是如何利用Data对象实现有关缓存机制的静态方法和实例方法的.我们接下来,来看这几个静态方法和实例方法的源码解 ...
Windows phone 应用开发[2]-数据缓存
今天把JDi/Server测试做完.终于有了时间来写写关于这个项目总结.关于我在博客上Post这些文章内容都是从实际项目应用而来.当然有些问题解决方案也是不断被重复设计修改.期间也碰到诸多问题.也曾为 ...

jQuery11 data() : 数据缓存

jQuery11 data() : 数据缓存相关推荐

最新文章

热门文章