<!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. BZOJ 3130 二分+网络流

    思路: 不被题目忽悠就是思路 二分一下max 判一下等不等于最大流 搞定 7 9 1 1 2 3 1 3 3 2 3 3 3 4 2 3 5 2 3 6 1 4 7 2 5 7 2 6 7 2 这里有 ...

  2. <Sicily>Brackets Matching

    一.题目描述 Let us define a regular brackets sequence in the following way: Empty sequence is a regular s ...

  3. sql中--行处理数据的两种方式

    --创建待使用的表格CREATE TABLE Orders ( OrderID INT , CostValue DECIMAL(18, 2) );WITH cte_temp AS ( SELECT 1 ...

  4. settings.xml配置的镜像

    <localRepository>D:/apache-maven-3.5.4/maven-jar/repository</localRepository> <mirror ...

  5. SQL替换制表、回车、换行符和首尾空格

    SQL替换制表.回车.换行符和首尾空格 最近在批量修复数据的时候,需要利用excel导入大量数据.客户提供的数据是没有规范的,大部分数据行都有制表符.回车符.换货符,以及我需要将数据进行首位去重. 目 ...

  6. Conservative GC （Part two :MostlyCopyingGC ）

    目录 MostlyCopyingGC 概要 堆结构 分配 new_obj()函数 add_pages()函数 GC执行过程 mostly_copying()函数 promote_page()函数 pa ...

  7. git error: object file .git/objects/b9/e269f50db2a3415cc8ad5ba40b82b9b6a13d45 is empty

    错误现象: 解决方法: 1.  find .git/objects/ -type f -empty | xargs rm 2. git fetch -p 3. git fsck --full

  8. Dynamic Rankings（分块）

    P2617 Dynamic Rankings 题目描述 给定一个含有n个数的序列a[1],a[2],a[3]--a[n],程序必须回答这样的询问:对于给定的i,j,k,在a[i],a[i+1],a[i ...

  9. 利用NSProxy解决NSTimer内存泄漏问题

    之前写过一篇利用RunTime解决由NSTimer导致的内存泄漏的文章,最近和同事讨论觉得这样写有点复杂,然后发现有NSProxy这么好用的根类,根类,根类,没错NSProxy与NSObject一样是 ...

  10. C++11之decltype

    使用场景 在C++中常常要用到非常长的变量名.假设已经有变量和你将使用的变量是一个类型.就可以使用decltypekeyword 来申明一样的类型变量. decltype原理      返回现有变量类 ...