jQuery提供的存储接口

jQuery.data( element, key, value )   //静态接口,存数据

jQuery.data( element, key )  //静态接口,取数据

.data( key, value ) //实例接口,存数据

.data( key ) //实例接口,存数据
 <!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 test1")

         $.data(ele, "b", {

             name : "data test2"

         })

         //通过$.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 test1")

         ele.data("b", {

             name: "data test2"

         })

         //通过.data方式取出数据

         var reset = ele.data("a") + "</br>" + ele.data("b").name

         ele.find('span').append(reset)

     })

     </script>

 </body>

 </html>

同样的,jQuery也提供2个对应的删除接口，使用上与data方法其实是一致的，只不过是一个是增加一个是删除罢了

jQuery.removeData( element [, name ] )

.removeData( [name ] )

元素的数据存储-jQuery.data()与.data()的更多相关文章

  1. 数据存储－－ Core Data的使用（二）

    一.基础概念深入 1.NSManagedObjectContext 被管理数据上下文就像便笺簿 当从数据持久层获取数据时,相当于把这些临时的数据拷贝写在便笺簿上,然后就可以随心所欲的修改这些值. 通过 ...

  2. 数据存储－－ Core Data的使用（一）

    一.概念 1.Core Data 是数据持久化存储的最佳方式 2.数据最终的存储类型可以是:SQLite数据库,XML,二进制,内存里,或自定义数据类型 在Mac OS X 10.5Leopard及以 ...

  3. centos 7.1系统更改Mariadb数据存储位置步骤分享

    一.首先确保你要更改Mariadb数据存储的位置的空间够大 现在已将Mariadb存储位置更改到/opt/目录下 1.然后将Mariadb服务stop:systemctl stop mariadb 2 ...

  4. Ubuntu 安装mysql & 自定义数据存储目录

    一.安装 apt-get install mysql-server 执行过程如下: root@duke:~# apt-get install mysql-server 正在读取软件包列表... 完成 ...

  5. HTML5数据存储方案data与jQuery数据存储方案$.data()的区别

    我们先看下$.fn.data()的使用,这个和$.data()是不一样的,前者是和某个jquery对象相关,后者则是全局方法.主要有data()和removeData()这2个实例方法.通过下面的例子 ...

  6. 数据存储常用5种方式plist、Preference、NSCoding、SQLite3、Core Data

    数据存储 iOS应用数据存储的常用方式 XML属性列表(plist)归档 Preference(偏好设置) NSKeyedArchiver归档(NSCoding) SQLite3 Core Data ...

  7. iphone数据存储之－－ Core Data的使用（一）

    http://www.cnblogs.com/xiaodao/archive/2012/10/08/2715477.html 一.概念 1.Core Data 是数据持久化存储的最佳方式 2.数据最终 ...

  8. (转)iphone数据存储之－－ Core Data的使用

    原文:http://www.cnblogs.com/xiaodao/archive/2012/10/08/2715477.html iphone数据存储之-- Core Data的使用(一)   一. ...

  9. iphone数据存储之－－ Core Data的使用

    一.概念 1.Core Data 是数据持久化存储的最佳方式 2.数据最终的存储类型可以是:SQLite数据库,XML,二进制,内存里,或自定义数据类型 在Mac OS X 10.5Leopard及以 ...

随机推荐

  1. LoadRunner运行中的mmdrv和mdrv

    在LoadRunner运行脚本过程中,在任务管理器中我们可以看到有一个或多个名为“mmdrv”的进程在运行,与此同时当我们查看LoadRunner\bin目录下的文件时还会看到一个“mdrv.exe” ...

  2. 【剑指offer】面试题 5. 替换空格

    面试题 5. 替换空格 题目:请实现一个函数,将一个字符串中的空格替换成"%20".例如,当字符串为We Are Happy. 则经过替换之后的字符串为We%20Are%20Hap ...

  3. getAllResponseHeaders() 必须放到onload里面

    <html><head> <meta charset="utf-8"> <title>test</title> < ...

  4. python访问web的利器：urllib2

    使用Python访问网页主要有三种方式: urllib, urllib2, httpliburllib比较简单,功能相对也比较弱,httplib简单强大,但好像不支持session1. 最简单的页面访 ...

  5. SSH项目中遇到的问题

    1. Struts has detected an unhandled exception: Messages: antlr.collections.AST.getLine()I File: org/ ...

  6. CodeVS1169 传纸条 [DP补完计划]

    题目传送门 题目描述 Description 小渊和小轩是好朋友也是同班同学,他们在一起总有谈不完的话题.一次素质拓展活动中,班上同学安排做成一个m行n列的矩阵,而小渊和小轩被安排在矩阵对角线的两端, ...

  7. Ajax使用进阶

    关于Ajax的概念不再做解释了,我想通过三个小例子来让大家对Ajax有个清晰的认识.要学习它,必须从最基础最原始的方式开始认识,然后通过使用框架来提升效率,逐步认识它. 一.原生js版(注册的用户名是 ...

  8. 2017腾讯OMG实习生面试总结

    2017腾讯OMG实习生面试总结 一面 一面有两个面试官,轮着来的,一共是一个半小时,中间等了10分钟左右.结合简历问了问项目,也考察了基础,手写了两道简单的算法题.问题包括: 第一个面试官 1.自我 ...

  9. 【UOJ #179】线性规划 单纯形模板

    http://uoj.ac/problem/179 终于写出来了单纯性算法的板子,抄的网上大爷的qwq 辅助线性规划找非基变量时要加个随机化才能A,我也不知道为什么,卡精度吗? 2017-3-6UPD ...

  10. 小H的硬币游戏

    题目大意: 有n个物品排成一排,每个物品都有自己的价值,你每次可以从中挑选两个距离为k的物品取走,问最大的收益. (如果原来两个物品中间有物品被取走,距离不变) 思路: 贪心. 先按照每个物品的位置m ...