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({

    acceptData

    hasData

    data

    removeData

    _data

    _removeData

});

//对外提供的接口

jQuery.fn.extend({

    data

    removeData

});

//原型的方法

Data.prototype = {

    key

    set

    get

    access

    remove

    hasData

    discard

};

$(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>

jQuery11 data() : 数据缓存的更多相关文章

jQuery源码04 data() : 数据缓存
/* Implementation Summary 1. Enforce API surface and semantic compatibility with 1.9.x branch 2. Imp ...
jQuery数据缓存方案详解：$.data()的使用
我们经常使用隐藏控件或者是js全局变量来临时存储数据,全局变量容易导致命名污染,隐藏控件导致经常读写dom浪费性能.jQuery提供了自己的数据缓存方案,能够达到和隐藏控件.全局变量相同的效果,但是j ...
【菜鸟学习jquery源码】数据缓存与data()
前言最近比较烦,深圳的工作还没着落,论文不想弄,烦.....今天看了下jquery的数据缓存的代码,参考着Aaron的源码分析,自己有点理解了,和大家分享下.以后也打算把自己的jquery的学习心得 ...
jQuery源码解读 - 数据缓存系统：jQuery.data
jQuery在1.2后引入jQuery.data(数据缓存系统),主要的作用是让一组自定义的数据可以DOM元素相关联——浅显的说:就是让一个对象和一组数据一对一的关联. 一组和Element相关的数据 ...
jQuery1.9.1源码分析--数据缓存Data模块
jQuery1.9.1源码分析--数据缓存Data模块阅读目录 jQuery API中Data的基本使用方法介绍 jQuery.acceptData(elem)源码分析 jQuery.data(el ...
jQuery源代码学习之六——jQuery数据缓存Data
一.jQuery数据缓存基本原理 jQuery数据缓存就两个全局Data对象,data_user以及data_priv; 这两个对象分别用于缓存用户自定义数据和内部数据: 以data_user为例,所 ...
jQuery.data的是jQuery的数据缓存系统
jQuery.Data源码 jQuery.data的是jQuery的数据缓存系统 jQuery.data的是jQuery的数据缓存系统.它的主要作用就是为普通对象或者DOM元素添加数据. 1 内部存储 ...
jQuery数据缓存data(name, value)详解及实现
一. jQuery数据缓存的作用 jQuery数据缓存的作用在中文API中是这样描述的:“用于在一个元素上存取数据而避免了循环引用的风险”.如何理解这句话呢,看看我下面的举例,不知道合不合适,如果你有 ...
SQL Server 查看数据库在数据缓存（data cache）中占用的空间大小
use master go select * from sys.dm_os_buffer_descriptors go --查看数据库在数据缓存(data cache)中占用的空间大小 --由于每个数 ...

随机推荐

Vue Syntax Highlight
Vue Syntax Highlight https://github.com/vuejs/vue-syntax-highlight
BZOJ 1336&1337最小圆覆盖
思路: http://blog.csdn.net/commonc/article/details/52291822 (照着算法步骤写--) 已知三点共圆求圆心的时候就设一下圆心坐标(x,y) 解个 ...
BZOJ 1711 网络流
思路: 神建图源->饮料边权为1 牛拆点两个点之间的边权为1 饮料->左牛边权为1 右牛->食品边权为1 食品->汇边权为1 //By SiriusRen #incl ...
Debian9.5 系统配置NFS配置说明
NFS是Network File System的缩写,即网络文件系统.它的主要功能是通过网络(一般是局域网)让不同的主机系统之间可以共享文件或目录.NFS客户端可以通过挂载(mount)的方式将NFS ...
uwsgi erro
Installing collected packages: uwsgi Running setup.py install for uwsgi: started Running setup.py in ...
numpy中list array matrix比较
用python中的numpy包的时候不小心踩了array和matrix的大坑,又引申一下比较list array matrix之间的异同.数据结构(Data Structures)基本上人如其名——它 ...
Unity 获得视频的某一帧，生成缩略图
Unity 并无直接获取视频某一帧图像的API,所以想要生成缩略图就要自己写方法了, 图片和视频都可以用这种方式生成缩略图,另,转载请标明出处,谢谢. using System.Collections ...
HDOJ 4009 Transfer water 最小树形图
Transfer water Time Limit: 5000/3000 MS (Java/Others) Memory Limit: 65768/65768 K (Java/Others) T ...
matlab 常用机器学习算法的实现
1. KNN 分类 load fisheriris X = meas; Y = species; % 3 分类问题 % 通过训练集进行训练 Mdl = fitcknn(X, Y, 'NumNeighb ...
powerpoint（ppt）的制作
1. 幻灯片母版所谓母版,是共享的部分,也即想在全部幻灯片重复出现的元素. 首先,幻灯片母版在菜单栏的[视图]选择[幻灯片母版]显示和查看. 通过幻灯片母版的编辑和设计,可进一步: 在幻灯片的相关位 ...

jQuery11 data() : 数据缓存

jQuery11 data() : 数据缓存的更多相关文章

随机推荐

热门专题