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 相关文章推荐
ExtJS PropertyGrid中使用Combobox选择值问题
Jun 13 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
Nov 14 Javascript
JS画5角星方法介绍
Sep 17 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
Dec 01 Javascript
javascript白色简洁计算器
May 04 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
Jan 10 Javascript
jQuery实现的右下角广告窗体跟随效果示例
Sep 16 Javascript
JavaScript中浅讲ajax图文详解
Nov 11 Javascript
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
vue如何实现动态加载脚本
Feb 05 Javascript
Openlayers实现地图的基本操作
Sep 28 Javascript
vue-cli —— 如何局部修改Element样式
Oct 22 Javascript
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 上一篇,下一篇文章实现代码与原理说明
2010/05/09 PHP
PHP+JS+rsa数据加密传输实现代码
2011/03/23 PHP
php将12小时制转换成24小时制的方法
2015/03/31 PHP
laravel 操作数据库常用函数的返回值方法
2019/10/11 PHP
jQuery.extend()的实现方式详解及实例
2013/06/29 Javascript
Js控制弹窗实现在任意分辨率下居中显示
2013/08/01 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
2014/08/22 Javascript
分享一则javascript 调试技巧
2015/01/02 Javascript
javascript实现动态表头及表列的展现方法
2015/07/14 Javascript
JS JSOP跨域请求实例详解
2016/07/04 Javascript
JavaScript页面实时显示当前时间实例代码
2016/10/23 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
2016/11/29 Javascript
jquery做个日期选择适用于手机端示例
2017/01/10 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
2017/06/28 Javascript
vue获取DOM元素并设置属性的两种实现方法
2017/09/30 Javascript
浅谈Vue SSR 的 Cookies 问题
2017/11/20 Javascript
详解vue中的computed的this指向问题
2018/12/05 Javascript
element-ui表格合并span-method的实现方法
2019/05/21 Javascript
python模拟登录百度代码分享(获取百度贴吧等级)
2013/12/27 Python
Python中logging模块的用法实例
2014/09/29 Python
Python scikit-learn 做线性回归的示例代码
2017/11/01 Python
python实现雨滴下落到地面效果
2018/06/21 Python
Python 函数返回值的示例代码
2019/03/11 Python
Python numpy线性代数用法实例解析
2019/11/15 Python
使用OpenCV-python3实现滑动条更新图像的Canny边缘检测功能
2019/12/12 Python
基于CSS3 animation动画属性实现轮播图效果
2017/09/12 HTML / CSS
求职简历中个人的自我评价
2013/12/01 职场文书
《一件运动衫》教学反思
2014/02/19 职场文书
精彩的广告词
2014/03/19 职场文书
施工安全承诺书
2014/05/22 职场文书
标准大学生职业生涯规划书写作指南
2014/09/18 职场文书
2015年综治宣传月活动总结
2015/03/25 职场文书
签字仪式主持词
2015/07/03 职场文书
2016大一新生军训心得体会
2016/01/11 职场文书
2019年销售人员的职业生涯规划书
2019/03/25 职场文书
一篇文章弄清楚Ajax请求的五个步骤
2022/03/17 Javascript