jQuery数据缓存用法分析


Posted in Javascript onFebruary 20, 2015

本文分析了jQuery数据缓存用法。分享给大家供大家参考。具体如下:

在jQuery的API帮助文档中,jQuery这样描述数据缓存的作用:用于在一个元素上存取数据而避免了循环引用的风险。

一、定义缓存数据

使用$(selector).data(name,value)方法可以为jQuery对象定义缓存数据。这些缓存数据被存放在匹配的DOM元素集合中所有DOM元素中。

var $link = $('a');
$link.data('linkType', 'home');

说明:$(selector).data(name,value)可以在匹配的DOM元素上存放任何格式的数据,而不仅仅是字符串。

二、获取缓存数据

此时,只需要一个参数即可,该参数指定缓存数据的名称。

var linkType = $link.data('linkType'); //'home'

说明:如果读取的缓存数据不存在,则返回值为undefined;如果jQuery集合指向多个元素,则将只返回第一个元素的对应缓存数据。

三、删除缓存数据

removeData()函数能够删除指定名称的缓存数据,并返回对应的jQuery对象。

//删除缓存数据的同时,返回对应的jQuery对象。
var $a = $link.removeData('linkType');

四、jQuery数据缓存的使用规范

随着调用data()函数次数增多,或者因使用不当,会使得cache对象急剧膨胀,最终影响程序的性能。
所以在使用jQuery数据缓存功能时,应及时清理缓存对象。jQuery提供了removeData()函数手动清除缓存数据。根据jQuery框架的运行机制,下面几种情况不需要手动清除数据缓存。

* 对elem执行remove()操作,jQuery会自动清除对象可能存在的缓存。
* 对elem执行empty()操作,如果当前elem子元素存在数据缓存,jQuery也会清楚子对象可能存在的数据缓存。
* jQuery复制节点的clone()方法不会复制data缓存。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
自用js开发框架小成 学习js的朋友可以看看
Nov 16 Javascript
js中Math之random,round,ceil,floor的用法总结
Dec 26 Javascript
jquery实现显示已选用户
Jul 21 Javascript
js实现select组件的选择输入过滤代码
Oct 14 Javascript
JS实现双击屏幕滚动效果代码
Oct 28 Javascript
JavaScript中对JSON对象的基本操作示例
May 21 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
Jul 21 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
Jan 08 Javascript
详解node.js 下载图片的 2 种方式
Mar 02 Javascript
JS实现的获取银行卡号归属地及银行卡类型操作示例
Jan 08 Javascript
详解Vue中CSS样式穿透问题
Sep 12 Javascript
Vue全局事件总线你了解吗
Feb 24 Vue.js
jQuery性能优化技巧分析
Feb 20 #Javascript
jQuery源码解读之removeClass()方法分析
Feb 20 #Javascript
jQuery源码解读之addClass()方法分析
Feb 20 #Javascript
jQuery源码解读之hasClass()方法分析
Feb 20 #Javascript
jQuery源码解读之removeAttr()方法分析
Feb 20 #Javascript
JS实现5秒钟自动封锁div层的方法
Feb 20 #Javascript
js实现感应鼠标图片透明度变化的方法
Feb 20 #Javascript
You might like
PHP 500报错的快速解决方法
2016/12/14 PHP
Laravel5.4简单实现app接口Api Token认证方法
2019/08/29 PHP
键盘控制事件应用教程大全
2006/11/24 Javascript
JScript内置对象Array中元素的删除方法
2007/03/08 Javascript
jQuery使用andSelf()来包含之前的选择集
2014/05/19 Javascript
js实现类似菜单风格的TAB选项卡效果代码
2015/08/28 Javascript
JavaScript实现下拉菜单的显示和隐藏
2016/01/05 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
2016/09/02 Javascript
jQuery鼠标事件总结
2016/10/13 Javascript
vue2组件实现懒加载浅析
2017/03/29 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
2017/09/14 Javascript
Vue项目分环境打包的实现步骤
2018/04/02 Javascript
webpack 代码分离优化快速指北
2019/05/18 Javascript
jqGrid表格底部汇总、合计行footerrow处理
2019/08/21 Javascript
微信小程序和H5页面间相互跳转代码实例
2019/09/19 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
2019/10/14 Javascript
浅谈Three.js截图并下载的大坑
2019/11/01 Javascript
JS三级联动代码格式实例详解
2019/12/30 Javascript
JavaScript闭包原理与用法学习笔记
2020/05/29 Javascript
python使用多线程不断刷新网页的方法
2015/03/31 Python
Python实现基于二叉树存储结构的堆排序算法示例
2017/12/08 Python
Python操作MySQL数据库的两种方式实例分析【pymysql和pandas】
2019/03/18 Python
在tensorflow中实现去除不足一个batch的数据
2020/01/20 Python
python requests库的使用
2021/01/06 Python
白色公司:The White Company
2017/10/11 全球购物
Larsson & Jennings官网:现代瑞士钟表匠
2018/03/20 全球购物
JAVA语言如何进行异常处理,关键字:throws,throw,try,catch,finally分别代表什么意义?在try块中可以抛出异常吗?
2013/07/02 面试题
网吧消防安全制度
2014/01/28 职场文书
公司股东合作协议书
2014/09/14 职场文书
2014个人四风对照检查材料思想汇报
2014/09/18 职场文书
南湾猴岛导游词
2015/02/09 职场文书
大班下学期个人总结
2015/02/13 职场文书
团委副书记工作总结
2015/08/14 职场文书
2016年暑期社会实践活动总结报告
2016/04/06 职场文书
CSS3点击按钮圆形进度打钩效果的实现代码
2021/03/30 HTML / CSS
在vue中import()语法不能传入变量的问题及解决
2022/04/01 Vue.js