你可能经常会想需要通过元素来存储一些数据。在JavaScript中你可能需要给元素添加属性来实现这样的功能,但是在某些浏览器中,你可能还需要处理因此造成的内存泄露问题。JQuery提供了一个简单的方法来存储数据到元素中和检索元素中存储的数据,并且为你解决相关的内存泄露问题。
// 通过元素来存储和检索数据
$( "#myDiv" ).data( "keyName", { foo: "bar" } );
$( "#myDiv" ).data( "keyName" ); // 返回 { foo: "bar" }

任何类型的数据都可以被存储在元素中,例如.data()可以用来存储其他元素的引用。

    你可能想建立一个列表项和其内部Div之间的关系,这样的关系可能会在每一次列表项变动的时候被建立,当然最好还是能够一次建立这样的关系,因此我们可以使用.data()方法将指向Div的引用存储在列表项中。
// 使用.data()来存储和检索2个元素之间的关系
$( "#myList li" ).each(function() {
var $li = $( this );
var $div = $li.find( "div.content" );
$li.data( "contentDiv", $div );
 
});
// 以后我们不需要重新去寻找Div
// 我们可以从列表项的data中读取到它
var $firstLi = $( "#myList li:first" );
$firstLi.data( "contentDiv" ).html( "new content" );

除了使用单一的键值对存储数据外,还可以传递一个对象来存储,这个对象可以包含一个或多个键值对。

JQuery官方学习资料(译):Data方法的更多相关文章

  1. JQuery官方学习资料(译):类型

    类型     JavaScript提供了多个内置数据类型.除了这些,这份文档还将介绍一些虚拟类型,例如选择器.伪类.事件等. String 在JavaScript中字符串是一个不可变的对象,它包含无. ...

  2. JQuery官方学习资料(译):使用JQuery的.index()方法

        .index()是一个JQuery对象方法,一般用于搜索JQuery对象上一个给定的元素.该方法有四种不同的函数签名,接下来将讲解这四种函数签名的具体用法. 无参数的.index() < ...

  3. JQuery官方学习资料(译):Utility方法

        JQuery提供了一些utility方法在$命名空间里,这些方法对完成常规的编程任务非常有帮助. $.trim()     删除前后部的空白内容. // 返回 "lots of ex ...

  4. JQuery官方学习资料(译):遍历JQuery对象和非JQuery对象

        JQuery提供了一个对象遍历的Utility方法$.each()和一个JQuery集合遍历方法.each(). $.each()     $.each()是一个通用的方法用来遍历对象和数组, ...

  5. JQuery官方学习资料(译):CSS

        JQuery提供了一个处理方法,可以获取或设置元素的CSS属性. // 获取 CSS 属性 $( "h1" ).css( "fontSize" ); / ...

  6. JQuery官方学习资料(译):遍历

        一旦你通过JQuery创建了选择器,你就可以对此进行更为深入的遍历.遍历可以分为三个基本组成部分,父节点.子节点和兄弟节点.JQuery为这些部分提供了许多丰富易用的方法. <div c ...

  7. JQuery官方学习资料(译):JQuery对象

        每当创建一个新的元素(或者选择一个已经存在的元素)时,JQuery将返回一个元素的集合.大部分的开发人员新接触JQuery的时候,都把这个集合当做数组.这个集合中的DOM元素有从零开始的索引, ...

  8. JQuery官方学习资料(译):操作元素

      获取和设置元素的信息     有很多种方式可以改变现有的元素,最常见的是改变HTML内容或者元素的属性.JQuery提供了简单的夸浏览器的方法来帮助你实现元素信息的获取和设置. .html():获 ...

  9. JQuery官方学习资料(译):选择器的运作

    Getters 和 Setters     JQuery的方法重载,方法设置和获取值一般使用相同名称的方法,当一个方法用来设置一个值的时候称之为Setter,当一个方法用来获取一个值的时候称之为Get ...

随机推荐

  1. ElasticSearch(6.2.2)的java API官方文档的总结 (三)

    一 : SearchRequest用于任何与搜索文档,聚合和建议有关的操作,并且还提供了对生成的文档进行高亮显示的方法. 在最基本的形式中,我们可以向请求添加一个查询:    1:添加一个Search ...

  2. H5音乐自动播放ios//禁止安卓手机图片点击

    定义音乐按钮 <div id="music-btn" class="o-play" style="width: 24px; height: 24 ...

  3. 逆天的 GRUB

    参考资料 GRUB 的文档在这里:https://www.gnu.org/software/grub/manual/grub/ Linux 的启动过程和 GRUB 的地位 Linux 系统启动的过程是 ...

  4. [Swift]LeetCode167. 两数之和 II - 输入有序数组 | Two Sum II - Input array is sorted

    Given an array of integers that is already sorted in ascending order, find two numbers such that the ...

  5. [Swift]LeetCode576. 出界的路径数 | Out of Boundary Paths

    There is an m by n grid with a ball. Given the start coordinate (i,j) of the ball, you can move the ...

  6. [Swift]LeetCode668. 乘法表中第k小的数 | Kth Smallest Number in Multiplication Table

    Nearly every one have used the Multiplication Table. But could you find out the k-th smallest number ...

  7. [Swift]LeetCode805. 数组的均值分割 | Split Array With Same Average

    In a given integer array A, we must move every element of A to either list B or list C. (B and C ini ...

  8. PHP实现用户注册并保存数据到文件

    首先我们实现功能时,分析实现的步骤是什么,就这个而言,我们应该接收用户提交的数据并进行校验,然后保存在文件,最后给用户反馈. 这里需要注意的是为了避免嵌套过深,这里使用自定义函数来实现,其代码如下: ...

  9. 调用链Cat介绍

    1. 调用链Cat 1.1. 调用链演进 1.2. 开源产品比较 1.3. 监控场景 1.4. cat的增值作用 1.5. cat典型报表 1.5.1. 应用报错大盘 1.5.2. 业务大盘 1.5. ...

  10. JavaWeb过滤器.监听器.拦截器-原理&区别-个人总结

    对比项 拦截器 过滤器 机制 反射机制 函数回调 是否依赖servlet容器 是 否 请求处理 只能对action请求起作用 几乎所有的请求起作用 对action处理 可以访问action上下文.值栈 ...