• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
    •
    位置： jQuery 中文手册 -> jQuery 对属性的操作 -> jQuery 数据

    data()

    在匹配元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。

    .data(key, value)
    • data(key, value)
    • data(obj)
    .data(key)
    • data(key)
    • data()

    data(key, value)

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

    .data(key, value)
    • obj类型: Object。一个用于更新数据的键/值对

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

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

    $("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()方法完全取代所有的数据，而不是仅仅扩展原有的数据对象。如果你正在使用第三方插件，完全替代元素的数据对象也许是不可取的，因为插件也有可能设置数据。

    jQuery 3改变了此方法的行为，将其调整为Dataset API specifications（数据集 API 规范）。具体来说，jQuery 3 根据 the algorithm of the Dataset API(数据集API的算法)将使用连字符"-"(U+002D)连接的两个小写ASCII码字符转化为驼峰命名规则。例如$("body").data({"my-name":"aValue"}).data();，这些写将返回{myName:"aValue"}。

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

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

    • 注意这个方法目前并不提供在XML文档上跨平台设置数据，作为Internet Explorer不允许通过自定义属性附加数据。
    • undefined不是认可的数据值。比如这样调用.data("name", undefined)，将返回"name"对应的数据，也就是等同于调用.data("name")。

    例子

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

    <!DOCTYPE html>
<html>
<head>
  <style>
  div { color:blue; }
  span { color:red; }
  </style>
  <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.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>
    The values stored were and

    data(key)

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

    .data(key)
    • key类型: String。存储的数据名.

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

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

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

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

    jQuery 3改变了此方法的行为，将其调整为Dataset API specifications（数据集 API 规范）。具体来说，jQuery 3 根据 the algorithm of the Dataset API(数据集API的算法)将使用连字符"-"(U+002D)连接的两个小写ASCII码字符转化为驼峰命名规则。例如$("body").data({"my-name":"aValue"}).data();，这些写将返回{myName:"aValue"}。

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

    从jQuery 1.4.3起， HTML 5 data-属性将自动被引用到jQuery的数据对象中。嵌入式破折号处理属性（ attributes）的方式在 jQuery 1.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";

    以上代码的第二条语句正确是表述了该元素的data-last-value属性。如果没有传递key参数的数据存储， jQuery将在元素的属性中搜索，将驼峰式字符串转化为中横线字符串，然后在结果前面加上data-。所以，该字符串lastValue将被转换为data-last-value。
    每次尝试将字符串转换为一个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()来设置或获取值要快一些：
    var mydata = $("#mydiv").data();
if ( mydata.count < 9 ) {
    mydata.count = 43;
    mydata.status = "embiggened";
}

    Additional Notes:（其他注意事项：）
    • 注意这个方法目前并不提供在XML文档上跨平台设置数据，作为Internet Explorer不允许通过自定义属性附加数据。
    例子
    获取存放在元素上的名为"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="https://www.lanmper.cn/static/js/jquery-3.5.0.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>

    A div
    The "blah" value of this div is ?

    下篇：removeData()