使用jQuery将数据属性设置为div答案

【问题标题】：Set data attribute to div with jQuery使用jQuery将数据属性设置为div
【发布时间】：2014-03-21 09:44:20
【问题描述】：

我正在尝试将数据属性设置为以前没有任何值的 div。

<div></div>

使用 jQuery，第一个方法（数据）不做任何事情，但是 attr 方法可以正常工作。

var div = $('div');
div.data('superhero_one','batman');
div.attr('data-superhero_two','spiderman');

我是不是用错了数据函数？

【问题讨论】：

【解决方案1】：

确实有效！

这背后的实际情况是，当您使用.data() 时，您看不到实际属性，因为 jquery 在内部设置了该属性。但是.attr() 为元素添加了一个属性，您可以检查它。

【讨论】：

【解决方案2】：

$("div").data("superhero_two","spiderman");

是正确的语法。但是在检查时，我只看到data-superhero_two="spiderman"（如预期的那样）。 .attr 的属性在 DOM 中设置，.data 仅在 JQuery 对象中设置。

顺便说一下，使用文档就绪功能确保其在正确的时间执行：

$(document).ready(function() {
    $("div").data("superhero_two","spiderman");
});

【讨论】：

【解决方案3】：

$("div").data("superhero_two","spiderman");

我建议您阅读.data() | jQuery API Documentation。您会在那里找到很多设置和获取数据属性的示例。

这是 jsfiddle 上的一个使用示例：http://jsfiddle.net/yrshaikh/293nk/1/

【讨论】：

【解决方案4】：

工作正常，因为他们有不同的行为，jQuery.data：

存储与匹配元素关联的任意数据或返回集合中第一个元素在命名数据存储中的值匹配的元素。

因此您的元素不会设置任何 html 属性，但键值对存储在 jQuery 对象引用中。

简而言之，$.data 用于存储信息而不对 DOM 元素进行任何更改，attr 用于操作元素的属性。

【讨论】：