jQuery数据篇-数据操作

最新推荐文章于 2021-01-27 02:45:01 发布

傲雪kimi

最新推荐文章于 2021-01-27 02:45:01 发布

阅读量1.3k

点赞数

jQuery API翻译专栏收录该内容

35 篇文章 0 订阅

订阅专栏

.data( key, value )

给匹配元素关联存储任意data

.data(key,value)

.data(obj)

key

类型是字符串。

设置数据的名字的字符串。

value

新的数据的值；它会是任何Javascript类型包括数组或对象。

obj

类型是对象。

需要更新的键值对的对象。

.data()方法允许我们在DOM元素上附加任何类型的data数据，在避免循环引用的方式下是安全的，才不会引起内存泄漏。

我们能给简单的元素设置一些不同的值，然后再获取它们：

$('body').data('foo', 52);
$('body').data('bar', { myType: 'test', count: 40 });
$('body').data('foo'); // 52
$('body').data(); // {foo: 52, bar: { myType: 'test', count: 40 }} 返回的是javascript的对象

在jQuery1.4.3中设置一个元素的data对象是使用.data(obj)来扩充该元素以前存储的data。jQuery自身使用.data()方法来保存在”evnets“和”handle“名字下的信息，并且保留任何以下划线"_"开头的名字用来内部使用。

在jQuery1.4.3之前（开始于jQuery1.4）.data()方法完全的替换了所有的data，而不是仅仅扩展了data对象。如果你正在使用第三方插件，不建议完全的替换元素的data对象，因为插件也许也设置了data。

鉴于浏览器与插件和外部代码交互的方式，.data()方法不能够被用在<object>(除非是Flash插件)，<applet>或者<embed>元素上。

Note：这个方法现在还不提供在XML文档上设置data的跨平台支持，因为IE现在不支持通过可设置和获取布尔值（expando）的属性来附加数据。

.data( key )

返回被data(name, value)设置的在jQuery集合中的第一个元素存储的被命名的data的值

.data(key)

.data()

key

类型是字符串。

存储数据的名字。

.data()方法允许我们在DOM元素上附加任何类型的data数据，在避免循环引用的方式下是安全的，才不会引起内存泄漏。

我们可以在简单元素上一次获取一个值，或者一组值：

alert($('body').data('foo'));
alert($('body').data());

上面代码会alert被设置在body元素上的data值。如果元素上没有设置值，会被返回undefined。

alert( $("body").data("foo")); //undefined
$("body").data("bar", "foobar");
alert( $("body").data("bar")); //foobar

HTML5 data-* 属性

jQuery1.4.3中HTML5的data-属性会自动的被放进jQuery的data对象中。对待含有的破折号"-"的属性在jQuery1.6中被修改来符合W3c HTML5的规范。

比如：给出下面的HTML：

<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>

所有下面的jQuery代码都正常工作。

$("div").data("role") === "page";
$("div").data("lastValue") === 43;
$("div").data("hidden") === true;
$("div").data("options").name === "John";

每个尝试都是用来将字符串转换为JavaScript 的值（这个包括booleans,objects,arrays和null），不然当作字符串。要获取字符串形式的属性的值，不尝试转换它，可使用attr()方法。当data属性是一个对象时（以{开头或是一个数组（以[开头）），使用jQuery.parseJSON来转换字符串；他必须遵循的JSON语法包括加引号的属性的名字。在第一次访问data属性的时候，data-属性被放置进去，然后不再访问或者改变（所有的data值然后被存储在jQuery的内部）。

调用无参数的.data()方法获取所有作为Javacript对象的值。这个对象能够被安全的缓存在变量中，只要这个新的对象不被使用.data(obj)方法。直接使用该对象来获取或设置值比单独的调用.data()来获取或设置每一个值来的快。

var mydata = $("#mydiv").data();
if ( mydata.count < 9 ) {
    mydata.count = 43;
    mydata.status = "embiggened";
}

Note：这个方法现在还不提供在XML文档上设置data的跨平台支持，因为IE现在不支持通过可设置和获取布尔值（expando）的属性来附加数据

.removeData( [name] )

移除以前存储的data
.removeData([name])
.removeData([list])
name
类型是字符串。
删除的数据的名字的字符串
list
类型是数组，字符串。
一个数组或者空格隔开的字符串命名的数据用来被删除。

.remvoeData()方法允许我们移除先前使用.data()设置的值。当使用关键字的名字时，.removeData()会删除那个特定的值；当不使用参数调用时，所有的值都会被移除。
从jQuery内部的.data()存储区移除data对在文档中的HTML5 data-属性没有作用；可以使用.removeAttr()移除。

当使用.removeData(“name”)时，如果在内部的data缓存区中没有该名字的属性，jQuery会尝试在该元素上定位一个data-属性。为了避免再次查询data-属性，将该name的值设为null或undefined（如.data("name",undefined)）而不是使用.removeData()方法。

jQuery1.7中，当使用包含关键字的数组或者以空格隔开的关键字字符串，.removeData()会删除每一个在数组或者子串中的关键字对应的值。

jQuery1.4.3中，调用.removeData()会导致该属性的值被删除，并恢复在DOM文档中相同名字的属性的值，而不是被设置成undefined.