<!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() : 数据缓存的更多相关文章

  1. jQuery源码04 data() : 数据缓存

    /* Implementation Summary 1. Enforce API surface and semantic compatibility with 1.9.x branch 2. Imp ...

  2. jQuery数据缓存方案详解：$.data()的使用

    我们经常使用隐藏控件或者是js全局变量来临时存储数据,全局变量容易导致命名污染,隐藏控件导致经常读写dom浪费性能.jQuery提供了自己的数据缓存方案,能够达到和隐藏控件.全局变量相同的效果,但是j ...

  3. 【菜鸟学习jquery源码】数据缓存与data()

    前言 最近比较烦,深圳的工作还没着落,论文不想弄,烦.....今天看了下jquery的数据缓存的代码,参考着Aaron的源码分析,自己有点理解了,和大家分享下.以后也打算把自己的jquery的学习心得 ...

  4. jQuery源码解读 - 数据缓存系统：jQuery.data

    jQuery在1.2后引入jQuery.data(数据缓存系统),主要的作用是让一组自定义的数据可以DOM元素相关联——浅显的说:就是让一个对象和一组数据一对一的关联. 一组和Element相关的数据 ...

  5. jQuery1.9.1源码分析--数据缓存Data模块

    jQuery1.9.1源码分析--数据缓存Data模块 阅读目录 jQuery API中Data的基本使用方法介绍 jQuery.acceptData(elem)源码分析 jQuery.data(el ...

  6. jQuery源代码学习之六——jQuery数据缓存Data

    一.jQuery数据缓存基本原理 jQuery数据缓存就两个全局Data对象,data_user以及data_priv; 这两个对象分别用于缓存用户自定义数据和内部数据: 以data_user为例,所 ...

  7. jQuery.data的是jQuery的数据缓存系统

    jQuery.Data源码 jQuery.data的是jQuery的数据缓存系统 jQuery.data的是jQuery的数据缓存系统.它的主要作用就是为普通对象或者DOM元素添加数据. 1 内部存储 ...

  8. jQuery数据缓存data(name, value)详解及实现

    一. jQuery数据缓存的作用 jQuery数据缓存的作用在中文API中是这样描述的:“用于在一个元素上存取数据而避免了循环引用的风险”.如何理解这句话呢,看看我下面的举例,不知道合不合适,如果你有 ...

  9. SQL Server 查看数据库在数据缓存（data cache）中占用的空间大小

    use master go select * from sys.dm_os_buffer_descriptors go --查看数据库在数据缓存(data cache)中占用的空间大小 --由于每个数 ...

随机推荐

  1. 2.安装 CLI和CLI的工作原理

    转自:https://www.gruntjs.net/getting-started 还在使用 Grunt 0.3 版本吗?请查看 Grunt 0.3 注意事项 在继续学习前,你需要先将Grunt命令 ...

  2. 数据库表的连接(Left join , Right Join, Inner Join)用法详解

    转自:http://blog.csdn.net/jetjetlinuxsystem/article/details/6663218 Left Join, Inner Join 的相关内容,非常实用,对 ...

  3. 每位 Ubuntu 18.04 用户都应该知道的快捷键

    作者: Abhishek Prakash 译者: LCTT XiatianSummer 了解快捷键能够提升您的生产力.这里有一些实用的 Ubuntu 快捷键助您像专业人士一样使用 Ubuntu. 您可 ...

  4. 【Git 一】Linux安装Git

    一.Git 的优势 #简单说一下 Git 的优势. 1.版本库本地化,支持离线提交,相对独立不影响协同开发. 2.支持快速切换分支方便合并,比较合并性能好. 3.分布式管理,适应不同的业务场景. 4. ...

  5. ConEmu windows上的终端工具

    ConEmu Windows terminal   官网: http://conemu.github.io/        

  6. sed命令的介绍

    命令格式 sed [options] 'command' file(s) sed [options] -f scriptfile file(s) 选项 -e<script>或--expre ...

  7. Java基础学习总结（19）——Java环境变量配置

    前言 学习java的第一步就要搭建java的学习环境,首先是要安装JDK,JDK安装好之后,还需要在电脑上配置"JAVA_HOME"."path"." ...

  8. OpenGl 坐标转换

    1. OpenGL 渲染管线 OpenGL渲染管线分为两大部分,模型观測变换(ModelView Transformation)和投影变换(Projection Transformation). 做个 ...

  9. (hdu step 7.2.1)The Euler function(欧拉函数模板题——求phi[a]到phi[b]的和)

    题目: The Euler function Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Othe ...

  10. cocos2d-x 3.1.1学习笔记［23］寻找主循环 mainloop

    文章出自于  http://blog.csdn.net/zhouyunxuan cocos2d到底是怎样把场景展示给我们的,我一直非常好奇. 凭个人猜想,引擎内部的结构类似于这样 while(true ...