jQuery 杂项 data() 方法

jQuery 杂项方法

data()方法将任意数据存储到选定元素或从中获取数据。

当使用data()方法获取数据时,它将返回第一个选定元素的数据。

当data()方法用于存储数据时,它将数据存储到所有选定的元素

要删除数据,请使用removeData()方法。

语法:

返回所选元素的存储数据:

$(selector).data(key)

将数据存储到选定的元素:

$(selector).data(key, value)

使用对象将数据存储到选定的元素:

$(selector).data(key, object)

实例

从第一个列表项中检索数据:

$("#btn1").click(function(){
  alert($("li").data("price"));
});
测试看看‹/›

将数据存储到DIV元素,然后检索数据:

// 存储数据
$("#btn1").click(function(){
  $("div").data("msg", "Hello World");
});

// 获取数据
$("#btn2").click(function(){
  $("div").text($("div").data("msg"));
});
测试看看‹/›

使用对象将数据存储到DIV元素,然后检索数据:

$("button").click(function(){
  $("div").data("test", {first: 16, last: "pizza!"});
  $("span:first").text($("div").data("test").first);
  $("span:last").text($("div").data("test").last);
});
测试看看‹/›

通过按钮检索“数据视频”属性:

$("#videoModal").on("show.bs.modal", function(event) {
  let button = $(event.relatedTarget); // 触发模态的按钮
  let url = button.data("video");  // 从数据-视频属性中提取url

  $(this).find("iframe").attr({
    src : url,
    allow : "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
  });
});
测试看看‹/›

参数值

参数描述
key指定要设置的数据的键(名称)
value指定要设置的数据值
object键值对数据对象要更新

jQuery 杂项方法