# .data()

所属分类：数据操作 | 杂项 > 数据存储 英文文档：.data()
在匹配元素上存储任意相关数据 或 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。

## .data( key, value )返回: jQuery

描述: 在匹配元素上存储任意相关数据.

- #### 添加的版本: 1.2.3.data( key, value )

  - key
    类型: String
    一个字符串，用户存储数据的名称。（译者注：存储的数据名）
  - value
    类型: Object
    新的数据值；它可以是任意的Javascript数据类型，包括Array 或者 Object。

- #### 添加的版本: 1.4.3.data( obj )

  - obj
    类型: Object
    一个用于更新数据的 键/值对

`.data()` 方法允许我们在DOM元素上绑定任意类型的数据,避免了循环引用的内存泄漏风险。

我们可以在一个元素上设置不同的值，之后获取这些值：

1 2 3 4 5 6 |
    $("body").data("foo", 52);$("body").data("bar", { myType: "test", count: 40 });$("body").data({ baz: [ 1, 2, 3 ] }); $("body").data("foo"); // 52$("body").data(); // { foo: 52, bar: { myType: "test", count: 40 }, baz: [ 1, 2, 3 ] }

在 jQuery 1.4.3 用`.data(obj)`设置一个元素的数据对象可以扩充元素上原先存储数据。jQuery 自身也通过`.data()`方法，使用用'events' 和 'handle'名字储存信息，并且存储任意用下划线('_')开头的数据名供内部使用。

在jQuery1.4.3前(从jQuery 1.4开始).data()方法完全取代所有的数据,而不是仅仅扩展原有的数据对象。如果你正在使用第三方插件，完全替代元素的数据对象也许是不可取的，因为插件也有可能设置数据。

由于浏览器用插件和外部代码相互作用,`.data()`方法不能在`<object>`（除非是Flash插件），`<applet>` 或 `<embed>`元素上使用。

### Additional Notes:（其他注意事项：）

- 注意这个方法目前并不提供在XML文档上跨平台设置，作为Internet Explorer不允许通过自定义属性附加数据。

## 例子:

#### 从div元素储存然后找回一个值。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
    <!DOCTYPE html><html><head>  <style>  div { color:blue; }  span { color:red; }  </style>  <script src="https://code.jquery.com/jquery-latest.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>

#### Demo:

## .data( key )返回: Object

描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。 通过.data(name, value)或HTML5 data-* 属性设置

- #### 添加的版本: 1.2.3.data( key )

  - key
    类型: String
    存储的数据名.

- #### 添加的版本: 1.4.data()

  - 这个方法不接受任何参数。

`.data()`方法允许我们在DOM元素上附加任意类型的数据,避免了循环引用的内存泄漏风险。我们可以在一个元素上设置不同的值，并获取这些值：

1 2 |
    alert($('body').data('foo'));alert($('body').data());

上面两行会显示先前设置在 `body`元素上设置的值。若果那个元素上没有设置任何值，那么将返回`undefined`。

1 2 3 |
    alert( $("body").data("foo")); //undefined$("body").data("bar", "foobar");alert( $("body").data("bar")); //foobar

#### HTML5 data-* Attributes（HTML5 data-* 属性）

从jQuery 1.4.3起， HTML 5 data- 属性 将自动被引用到jQuery的数据对象中。嵌入式破折号处理属性（ attributes）的方式在 jQuery 1.6 中已经改变，以使之符合W3C HTML5 规范.

举个例子, 给定下面的HTML:

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

下面所有的 jQuery 代码都能运行。

1 2 3 4 |
    $("div").data("role") === "page";$("div").data("lastValue") === 43;$("div").data("hidden") === true;$("div").data("options").name === "John";

每次尝试将字符串转换为一个JavaScript值（包括布尔值（booleans），数字（numbers），对象（objects），数组（arrays）和空（null））。如果这样做不会改变值的表示，那么该值将转换为一个数字（number）。例如，“1E02”和“100.000”是等同于数字（数字值100），但将转换它们会改变他们的表示，所以他们被保留为字符串。字符串值“100”被转换为数字100。

如果数据(data)属性是一个对象（以“{”开始）或数组（以'['开始），可以用`jQuery.parseJSON` 将其解析成字符串；它必须遵循有效的JSON的语法，包括带双引号的属性名称。如果该值不能解析为一个JavaScript值，它将被保留为字符串。

如果不想将取出的属性值直接当作字符串的话，请使用`attr()`方法。

data-属性是在第一次使用这个数据属性后不再存取或改变（所有的数据值都在jQuery内部存储）。

调用 `.data()` 时如果不带参数，将会以 JavaScript 对象的形式获取所有数据。这个对象可以安全的存放在变量中，因为一旦这个新对象被提取出来，之后对元素进行的 `.data(obj)`操作，将不会再影响这个对象。另外，直接操作这个对象会比每次调用 `.data()` 来设置或获取值要快一些：

1 2 3 4 5 |
    var mydata = $("#mydiv").data();if ( mydata.count < 9 ) {    mydata.count = 43;    mydata.status = "embiggened";}

### Additional Notes:（其他注意事项：）

- 注意这个方法目前并不提供在XML文档上跨平台设置，作为Internet Explorer不允许通过自定义属性附加数据。

## 例子:

#### 获取存放在元素上的名为 "blah" 的数据。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
    <!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="https://code.jquery.com/jquery-latest.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>

#### Demo: