jQuery data(key, value)函数 在匹配的元素上随心所欲的存放数据
2013-09-29 12:30
337 查看
data(key, value) 返回值:jQuery
在匹配的元素上随心所欲的存放数据。1.2.3 新增data(key, value)
key (String) 将要设置的数据片段名。value (Object) 新的数据值;可以是任何 Javascript 数据类型,包括数组和对象。
1.4.3 新增data(obj)
obj (Object) 用于设置的键值对。.data()方法允许我们安全地将任何类型的数据附加到DOM元素上而不用担心循环引用和内存泄露之类的问题。
在单个元素上设置几个独立的数据,并且以后还可以分别检索到:
$('body').data('foo', 52); $('body').data('bar', { myType: 'test', count: 40 }); $('body').data('foo'); // 52 $('body').data(); // {foo: 52, bar: { myType: 'test', count: 40 }}
从 jQuery 1.4.3 起,通过
.data(obj)给元素设置数据时,会在元素原先存放的数据上扩展。jQuery 本身也通过
.data()方法存放信息,名为 'events' 和 'handle' ,并且保留的任何以下划线开头的数据名称,以供内部使用。
特别注意:从 jQuery 1.4 起到 jQuery 1.4.2 的几个版本中, .data(obj) 方法会完全替换掉元素上的所有数据,而不是扩展数据对象。如果你使用了第三方插件,那就不建议完全替换掉元素上的数据对象,因为插件也有可能在上面存放数据。
由于浏览器与插件和内部代码的交互方式,导致
.data()方法无法在
<object>(除非他是一个Flash插件),
<applet>或者
<embed>元素上存放数据。
HTML 5 data- 属性
从 jQuery 1.4.3 起,HTML 5 data- 属性 中的数据会自动放入 jQuery 的数据对象中。
举例来说,如果提供如下的 HTML:
<div data-role="page" data-hidden="true" data-options='{"name":"John"}'></div>
那么就可以通过下面的 jQuery 代码获得数据。下面的每个语句都是 true。
$("div").data("role") === "page"; $("div").data("hidden") === true; $("div").data("options").name === "John";
注意,这些字符串在用 .data() 获取时会自动转换成他们对应数据类型(包括布尔值、数字、对象、数组和 null ),而 HTML 代码中的字符串不会有任何的改变。另外,data- 属性只会在第一次用 .data() 方法获取数据的时候,从 HTML 代码中获取,并保存到 jQuery 内部对象中。在此之后,.data() 再也不会访问或修改 data- 属性里的东西了。
示例:
往div元素上存放再获取数据<!DOCTYPE html> <html> <head> <style> div { color:blue; } span { color:red; } </style> <script src="jquery.min.js"></script> </head> <body> <div> The values stored were <span></span> and <span></span> </div> <script> $("div").data("test", { first: 16, last: "pizza!" }); $("span:first").text($("div").data("test").first); $("span:last").text($("div").data("test").last); </script> </body> </html>[/code]
返回值:Objectdata(key)
返回jQuery对象集合中第一个元素上储存的数据,这个数据是先前用data(name, value)设定的。1.2.3 新增data(key)
key (String) 先前存放的数据名1.4 新增data()
.data()方法允许我们安全地将任何类型的数据附加到DOM元素上而不用担心循环引用和内存泄露之类的问题。我们可以同时获取单一元素上几个独立的数据,或者整个一组:
alert($('body').data('foo')); alert($('body').data());
上面两行会显示先前设置在
body元素上的数据。如果元素上没有设置过任何东西,则会返回 null 。
调用
.data()时如果不带参数,将会以 JavaScript 对象的形式获取所有数据。这个对象可以安全的存放在变量中,因为一旦这个新对象被提取出来,之后对元素进行的
.data(obj)操作,将无法再影响到这个对象了。另外,直接操作对象会比通过调用
.data()来设置或获取值要快一些:
var mydata = $("#mydiv").data(); if ( mydata.count < 9 ) { mydata.count = 43; mydata.status = "embiggened"; }
示例:
获取存放在元素上,名为 "blah" 的数据。<!DOCTYPE html> <html> <head> <style> div { margin:5px; background:yellow; } button { margin:5px; font-size:14px; } p { margin:5px; color:blue; } span { color:red; } </style> <script src="jquery.min.js"></script> </head> <body> <div>A div</div> <button>Get "blah" from the div</button> <button>Set "blah" to "hello"</button> <button>Set "blah" to 86</button> <button>Remove "blah" from the div</button> <p>The "blah" value of this div is <span>?</span></p> <script> $("button").click(function(e) { var value; switch ($("button").index(this)) { case 0 : value = $("div").data("blah"); break; case 1 : $("div").data("blah", "hello"); value = "Stored!"; break; case 2 : $("div").data("blah", 86); value = "Stored!"; break; case 3 : $("div").removeData("blah"); value = "Removed!"; break; } $("span").text("" + value); }); </script> </body> </html>[/code]
---------------------------------[/code]
相关文章推荐
- jQuery data(key, value)函数 在匹配的元素上随心所欲的存放数据 (2
- 淘宝开源Key/Value结构数据存储系统Tair技术剖析
- 串口协议匹配函数,避免串口数据接收时顺序换乱错误
- 如何对memcache的数据(key-value)进行遍历操作
- Json 解析数据 只有key,没有value的解析
- 随机获取一个集合(List, Set)中的元素,随机获取一个Map中的key或value
- MySql插入数据重复,Duplicate entry 'value' for key 'user_id'
- 根据存放位置数据的链表P打印链表L的元素
- 设计一个函数:将一维整型数组中的元素逆序存放
- C语言 写一个函数,将一维数组中的元素逆序存放
- Map接口容器存放的是key-value
- jedis调用redis之String数据Key-Value
- 如何使用set::key_comp 和 set::value_comp 标准模板库 (STL) 函数
- 实验9(1)程序填空:下列程序在数组中同时查找最大元素和最小元素的下标,分别存放在 main()函数的max 和 min 变量中。要求:根据运行结果分析程序和填空,并注释说明填充依据。
- 习题 8.10 将一个5*5的矩阵中最大的元素放在中心,4个角分别放4个最小的元素(顺序为从左到右,从上到下依次从小到大存放),写一函数实现之。用main函数调用。
- 如何对memcache的数据(key-value)进行遍历操作
- 用RegNotifyChangeKeyValue函数监视注册表
- 淘宝开源Key/Value结构数据存储系统Tair技术剖析
- jquery手册学习--数据缓存--data([key],[value])--removeData([name|list])--jQuery.data(element,[key],[value])
- 函数调用输出一个一维数组中的最大值、最小值、全部元素的和,并将此数组中的值按逆序重新存放。