javascript - 使用jQuery将数据属性设置为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"（按预期）。属性 from.attr在 DOM 中.data 设置，并且仅在JQuery 对象中设置。

顺便说一句，使用文档准备功能确保其在正确的时间执行：

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

Answer 3

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

我建议你给.data() | jQuery API 文档一读。您会在那里找到大量用于设置和获取数据属性的示例。

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

Answer 4

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

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

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

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

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