<!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. 使用greenDAO遇到的问题

    前一阵花时间学习了一下greenDAO的使用,这两天已经把项目中之前使用的sqlite数据库操作改用greenDAO,但是在改动的过程中还是出了一些问题,问题主要集中在主键上,下面整理了一下在改动过程 ...

  2. PostgreSQL Replication之第九章 与pgpool一起工作（4）

    9.4 设置复制和负载均衡 要配置pgpool,我们可以简单地使用一个包含一种典型的配置信息的已经存在的样本文件,将它拷贝到我们的配置目录并修改之: $ cp /usr/local/etc/pgpoo ...

  3. <Sicily>Polynomial

    一.题目描述 Given a polynomial and the value of the variable x, you task is to calculate the value of the ...

  4. C++中inline函数

    (一)inline函数(摘自C++ Primer的第三版) 在函数声明或定义中函数返回类型前加上关键字inline即把min()指定为内联. inline int min(int first, int ...

  5. UI Framework-1: Browser Window

    Browser Window The Chromium browser window is represented by several objects, some of which are incl ...

  6. Ubuntu上使用过的命令，Linux常用命令，mount 硬盘挂载， ls 列表list命令，cp 复制copy命令，mkdir 创建文件夹 ，nano 编辑器，cat 文档合并，chmod 文件权限，ssh win10连接ubuntu服务器的步骤

    man 帮助 > man ls # ubuntu的帮助 tar.gz 压缩解压 > tar -zcvf yzn.tar.gz /home/yzn # 压缩 > tar -zxvf y ...

  7. Unity C# 设计模式（五）建造者模式

    定义: 将一个复杂对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示. 组成部分: 1.Builder:给出一个抽象接口,以规范产品对象的各个组成成分的建造.这个接口规定要实现复杂对象的哪 ...

  8. Spring Cloud学习笔记【六】Hystrix 监控数据聚合 Turbine

    上一篇我们介绍了使用 Hystrix Dashboard 来展示 Hystrix 用于熔断的各项度量指标.通过 Hystrix Dashboard,我们可以方便的查看服务实例的综合情况,比如:服务调用 ...

  9. ArcGIS Engine获得要素的中心点坐标

    IPoint centerPoint =new PointClass();//获得要素的中心点 IArea pArea = pFeature.Shape as IArea; pArea.QueryCe ...

  10. ArcGIS api for javascript——显示一个信息窗口

    描述 这个示例展示了在用户单击地图时如何在InfoWindow中显示信息.信息窗口是一个dijit (Dojo widget).信息窗口能够包含文本,字符,图片和任何通过HTML表示的事物.这个例子在 ...