• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • jQuery.data()

    存储任意数据到指定的元素并且返回设置的值。

    jQuery.data(element, key, value)
    • jQuery.data(element, key, value)
    jQuery.data(element, key)
    • jQuery.data(element, key)
    • jQuery.data(element)

    jQuery.data(element, key, value)

    存储任意数据到指定的元素,返回设置的值。

    jQuery.data(element, key, value)
    • element类型: Element。要存储数据的DOM对象
    • key类型: String。存储的数据名
    • value类型: Object。新数据值

    注意:这是一个底层的方法,你应该用.data()代替。

    jQuery.data()方法允许我们在DOM元素上附加任意类型的数据,避免了循环引用的内存泄漏风险。如果 DOM 元素是通过 jQuery 方法删除的或者当用户离开页面时,jQuery 同时也会移除添加在上面的数据。我们可以在一个元素上设置不同的值,并获取这些值:

    jQuery.data(document.body, 'foo', 52);
    jQuery.data(document.body, 'bar', 'test');
    

    Additional Notes(其他注意事项):

    • 注意:这个方法目前并不提供在XML文档上跨平台设置,作为Internet Explorer不允许在XML文档中通过自定义属性附加数据。
    • undefined是一个没有被识别数据值。调用如jQuery.data(el,"name", undefined)将返回对应的"name"数据,等价于jQuery.data(el,"name")
    • .unload()方法只是作为.on("unload", handler)的一个速记写法,移除该事件可以使用.off("unload")

    例子

    在 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>var div = $("div")[0];
        jQuery.data(div, "test", { first: 16, last: "pizza!" });
        $("span:first").text(jQuery.data(div, "test").first);
        $("span:last").text(jQuery.data(div, "test").last);</script>
     
    </body>
    </html>
    
    The values stored were and

    jQuery.data(element, key)

    返回用jQuery.data(element, name, value)储存在元素上的相应名字的数据,或者元素上完整的数据存储

    jQuery.data(element, key)
    • element类型: Element。T要关联数据的DOM对象
    • key类型: String。存储的数据名

    注意这是一个底层的方法,你也可用更方便的.data()方法。

    关于 HTML5 data-*属性:这个低层次的方法不检索的data-*属性,除非.data()方法已经返回了它们。

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

    alert(jQuery.data( document.body, 'foo' ));
    alert(jQuery.data( document.body ));
    

    上面几行代码alert body元素上设置的值。若果先前没有设置任何值,那么将返回一个空字符串。

    调用jQuery.data(element)时将获取一个JavaScript对象,它包含了元素上所有存储的数据。jQuery内部自身使用这个方法来绑定数据,如事件处理器,所以不要以为这对象只包含你的代码中储存的数据。

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

    例子

    获取存放在元素上名叫"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, div = $("div")[0];
     
      switch ($("button").index(this)) {
        case 0 :
          value = jQuery.data(div, "blah");
          break;
        case 1 :
          jQuery.data(div, "blah", "hello");
          value = "Stored!";
          break;
        case 2 :
          jQuery.data(div, "blah", 86);
          value = "Stored!";
          break;
        case 3 :
          jQuery.removeData(div, "blah");
          value = "Removed!";
          break;
      }
     
      $("span").text("" + value);
    });
     
    </script>
     
    </body>
    </html>
    
    A div

    The "blah" value of this div is ?

    上篇:removeData()

    下篇:jQuery.hasData()