JQuery中元素的数据存储
来源:互联网 发布:中国人工智能协会 编辑:程序博客网 时间:2024/06/06 03:06
html5 dataset是新的HTML5标准,允许你在普通的元素标签里嵌入类似data-*的属性,来实现一些简单数据的存取。它的数量不受限制,并且也能由JavaScript动态修改,也支持CSS选择器进行样式设置。这使得data属性特别灵活,也非常强大。有了这样的属性我们能够更加有序直观的进行数据预设或存储。那么在不支持HTML5标准的浏览器中,我们如何实现数据存取呢?
jQuery就提供了一个.data()的方法来处理这个问题
使用jQuery初学者一般不是很关心data方式,这个方法是jquery内部预用的,可以用来做性能优化,比如sizzle选择中可以用来缓存部分结果集等等。当然这个也是非常重要的一个API了,常常用于我们存放临时的一些数据,因为它是直接跟DOM元素对象绑定在一起的
jQuery提供的存储接口
jQuery.data( element, key, value ) //静态接口,存数据
jQuery.data( element, key ) //静态接口,取数据
.data( key, value ) //实例接口,存数据
.data( key ) //实例接口,存数据
2个方法在使用上存取都是通一个接口,传递元素,键值数据。在jQuery的官方文档中,建议用.data()方法来代替。
我们把DOM可以看作一个对象,那么我们往对象上是可以存在基本类型,引用类型的数据的,但是这里会引发一个问题,可能会存在循环引用的内存泄漏风险。
通过jQuery提供的数据接口,就很好的处理了这个问题了,我们不需要关心它底层是如何实现,只需要按照对应的data方法使用就行了。
同样的也提供2个对应的删除接口,使用上与data方法其实是一致的,只不过是一个是增加一个是删除罢了
jQuery.removeData( element [, name ] )
.removeData( [name ] )
参考下面边代码区域,2个代码段分别描述了静态与实例data的使用
<!DOCTYPE html><html><head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <style> .left, .right { width: 300px; height: 120px; } .left div, .right div { width: 100px; height: 90px; padding: 5px; margin: 5px; float: left; border: 1px solid #ccc; } .left div { background: #bbffaa; } .right div { background: yellow; } </style> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script></head><body> <h2>jQuery.data()静态方法</h2> <div class="left"> <div class="aaron"> <p>点击看结果</p> <p>jQuery.data</p> </div> <div><span></span></div> </div> <h2>.data()实例方法</h2> <div class="right"> <div class="aaron"> <p>点击看结果</p> <p>.data</p> </div> <div><span></span></div> </div> <script type="text/javascript"> $('.left').click(function() { var ele = $(this); //通过$.data方式设置数据 $.data(ele, "a", "data test") $.data(ele, "b", { name : "旅游网" }) //通过$.data方式取出数据 var reset = $.data(ele, "a") + "</br>" + $.data(ele, "b").name ele.find('span').append(reset) }) </script> <script type="text/javascript"> $('.right').click(function() { var ele = $(this); //通过.data方式设置数据 ele.data("a", "data test") ele.data("b", { name: "旅游网" }) //通过.data方式取出数据 var reset = ele.data("a") + "</br>" + ele.data("b").name ele.find('span').append(reset) }) </script></body></html>
0 0
- JQuery中元素的数据存储
- jQuery的属性与样式之元素的数据存储
- jQuery的属性与样式之元素的数据存储
- jQuery的date数据存储
- 数组中存储不定个数的元素
- jQuery数据存储的相关方法
- jQuery中移动元素的一些理解
- jquery中元素属性的操作
- jquery匹配属性中有“.”的元素
- jquery中获取兄弟元素的方法
- jQuery一行中元素的分类选择
- jquery中后代元素和子元素的区别
- abiWord中数据的存储
- java中数据的存储
- Android 中数据的存储
- android中数据的存储
- jQuery 数据存储函数
- jQuery 数据存储函数
- 【算法笔记】回溯法——n皇后问题
- C++的重载、覆盖和隐藏(转载)
- Middle-题目94:322. Coin Change
- JAVA 语言的发展简史
- Middle-题目95:222. Count Complete Tree Nodes
- JQuery中元素的数据存储
- springmvc+spring配置
- highcharts中从后台获取数据并添加
- 动态数组类
- 突破限制爬取网页数据 googlesholar为例【转】
- SmbFile 类实现局域网文件共享读写
- 深复制体验
- 1079. Total Sales of Supply Chain (25)
- 二进制中有多少个1