理解JQuery中的data()使用方法

在前端我们经常会做的操作就是做数据状态的判断和数据处理、提交，经常会操作dom，也会保存一个全局的数据处理。这样做是可以实现很多功能，但是缺点就是过多操作dom会浪费性能，全局数据保存多了有时候真的会搞混淆。所以jq提供了一个data()缓存机制，有两种使用方式，一种是绑定在元素上面的data()，一种是存储在一个链式的对象上面。下面我们就来介绍这两种使用方式。

第一种：绑定在dom上

var dom = document.body;
$.data(dom, 'name', '张三');

然后，我们使用它并且打印到浏览器的控制台

console.log($('body').data('name'))

这里，我们就想，它们存储在哪里呢？我们用找到body发现没有存储在标签里面，输出这个body也找不到。

其实啊，这个data绑定在它的一个缓存里面，我们使用jQuery.cache，发现输出了一个对象出来，里面就有保存我们刚刚设置的数据，这个对象我们可以看作一个缓存池或者是缓存链表。我们还发现它这个输出的对象都是数字开头的，所以我们得想办法找到他的这个节点

从jq的文档中得知这个data不会直接保存在元素上面，而是保存在这个cache全局对象上面，先给这个元素添加一个jQuery.expando的属性，这里面有一个uuid或者是uid（这里是根据不同的jq版本来的），这个uuid是一个连续的数字，跟我们开始看到的cache对象对应的一模一样。

所以我们这里把jQuery.expando输出，得到了一个串"jQuery110200914271316066011"这样类似的，得到它以后怎么找到cache对象的对应数字呢，我们用刚刚定义的dom来操作，可以得到一个数字，那么这个数字就对应cache里面的，代码如下：

jQuery.expando;
dom[jQuery.expando]

接下来我们去jq里面找到这个expando

expando: "jQuery" + ( jQuery.fn.jquery + Math.random() ).replace( /\D/g, "" ),

下面我们尝试一下用这个cache获取一下我们刚刚存储的数据

jQuery.cache[dom[jQuery.expando]].data.name

第二种：不绑定在元素上面，绑定在对象上面

var obj = {};
jQuery.data(obj, 'name', '王麻子');

这里的obj直接返回的是一个expando对象，所以我们调用的时候可以：

obj.jQuery110208157397060133658.data.name;
obj[jQuery.expando].data.name;

理解JQuery中的data()使用方法相关推荐

深入理解jQuery中的Deferred
深入理解jQuery中的Deferred 引入 1 在开发的过程中,我们经常遇到某些耗时很长的javascript操作,并且伴随着大量的异步. 2 比如我们有一个ajax的操作,这个ajax从发出 ...
jquery ajax实例get,jQuery中ajax的get()方法用法实例
本文实例讲述了jQuery中ajax的get()方法用法.分享给大家供大家参考.具体分析如下: $.get()通过 HTTP GET请求从服务器上请求数据. 语法结构: $.get(url, [dat ...
网页加载的不同的方式、点击按钮显示一句话、jQuery中获取元素的方法
网页加载的不同的方式 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
深入解析JQuery中的isPlainObject()使用方法
本篇文章给大家详细分析了jQuery中的isPlainObject()使用方法,非常不错,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. 说明 j ...
jQuery学习（十二）—jQuery中对象的查找方法总结
jQuery学习(十二)-jQuery中对象的查找方法总结一.find方法作用:在元素1中查找元素2,类似于选择器中的后代选择器格式:元素1.find(元素2),元素2为CSS选择器或者jQue ...
html5 toggle,jQuery中如何实现toggle方法
这次给大家带来jquery中如何实现toggle方法,使用jQuery中的toggle方法注意事项有哪些,下面就是实战案例,一起来看一下. 我们知道使用 jQuery 来实现上下移入移除,可以直接使用 ...
Jquery中find与each方法使用详解
本文实例讲述了jQuery中find与each方法用法.分享给大家供大家参考.具体如下: 一.find()方法 jquery选择器非常强大,利用css的命名规约,可以更快更方便的找出想要的元素. 图解 ...
深入jQuery中的data()
引入 data函数在jQuery中看起来很不起眼, 就像沙滩上一颗平凡的沙子, 但仔细一瞅, 却惊讶的发现data是jQuery中无比重要的一环, 甚至jQuery中各种事件都基于此. data有什么 ...
jQuery中常用的函数方法总结
jQuery中为我们提供了很多有用的方法和属性,自己总结的一些常用的函数,方法.个人认为在www.21kaiyun.com的紫微斗数星座在线排盘开发中会比较常用的,仅供大家学习和参考. 事件处理 re ...

理解JQuery中的data()使用方法

理解JQuery中的data()使用方法相关推荐

最新文章

热门文章