你可能经常会想需要通过元素来存储一些数据。在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. 【CSS 第五天】背景,边框

    总结一下今天所学习的内容,如下: 背景 属性 例子或作用 background background: #00FF00 url(bgimage.gif) no-repeat fixed top; ba ...

  2. Winsock编程基础1

    1.加载和释放Winsoke库 //所有Winsock函数都是从WS2_32.DLL导出,包含相应库文件#include <winsock2.h>#pragma comment(lib, ...

  3. 回顾4180天在腾讯使用C#的历程,开启新的征途

    今天是2018年8月8日,已经和腾讯解除劳动关系,我的公司正式开始运营,虽然还有很多事情需要理清,公司官网也没有做,接下来什么事情都需要自己去完成了,需要一步一个脚印去完善,开启一个新的征途,我将在博 ...

  4. 一次 HTTP 请求响应过程的完整解析

    因特网无疑是人类有史以来最伟大的设计,它互联了全球数亿台计算机.通讯设备,即便位于地球两端的用户也可在顷刻间完成通讯. 可以说『协议』是支撑这么一个庞大而复杂的系统有条不紊运作的核心,而所谓『协议』就 ...

  5. Java 延迟队列使用

    延时队列,第一他是个队列,所以具有对列功能第二就是延时,这就是延时对列,功能也就是将任务放在该延时对列中,只有到了延时时刻才能从该延时对列中获取任务否则获取不到…… 应用场景比较多,比如延时1分钟发短 ...

  6. Python 爬虫入门(一)——爬取糗百

    爬取糗百内容 GitHub 代码地址https://github.com/injetlee/Python/blob/master/qiubai_crawer.py 微信公众号:[智能制造专栏],欢迎关 ...

  7. [Swift]LeetCode653. 两数之和 IV - 输入 BST | Two Sum IV - Input is a BST

    Given a Binary Search Tree and a target number, return true if there exist two elements in the BST s ...

  8. 写给需要的Javaer-大数据学习路线篇

    已经更新100+篇~ 关注公众号,BAT大神带你飞~ 听说你还在写Java,看Spring,看Dubbo,今天SpringCloud, 明天Dubbo3.X新版本... 10个开发9个半在写Java后 ...

  9. 心路历程(一)-自学java两个月心得

    这是我的第一条博文,在敲这些文字的时候我已经是一名大四的"老者".说自己"老者"确实如此,因为以前每当这个时候大一新学妹有上架了,哈哈,每当这个时候我们就想了很 ...

  10. spark对elasticsearch增删查改

    增 新建一个 dataframe ,插入到索引 _index/_type ,直接调用 saveToEs ,让 _id 为自己设定的 id: import org.elasticsearch.spark ...