使用jQuery将data属性设置为div

Question

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

<div></div>

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

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

http://jsfiddle.net/5bT8p/

我是否错误地使用了数据功能？

Answer 1

确实有效！

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

请参阅此演示--> http://jsfiddle.net/5bT8p/1/

Answer 2

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

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

顺便说一句，使用文档就绪函数来确保它在正确的时间执行：

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

Answer 3

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

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

以下是jsfiddle上使用的相同例子：http://jsfiddle.net/yrshaikh/293nk/1/

Answer 4

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

  

存储与匹配元素关联的任意数据或返回   指定数据存储区中第一个元素的值   匹配的元素。

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

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

演示：http://jsfiddle.net/5bT8p/3/