使用jQuery将数据添加到DOM元素并在浏览器中查看

Question

假设我有简单的代码：

$(".myclass").data("key", "value");

我最初希望在我的Chrome浏览器中找到类似

的内容

<div class="myclass" data-key="value">

但我没有。此外，不会应用以下css：

[data-key='value'] { background-color: red; }

在更多的反思中，它是不合适的，因为它在html文件中写入是一种将数据传递给javascript而不是相反的方式。

但是，出于测试目的，我想知道是否可以使用我的浏览器查看数据中存储的内容。我正在使用Chrome，但我希望它对所有浏览器都应该类似。感谢。

Answer 1

Jquery data api不会向DOM元素添加属性。它只是将值与数据缓存中的值一起存储在DOM元素中作为data-*存在的其他数据属性值。你需要做什么来添加属性。

$(".myclass").attr("data-key", "value");

  

数据属性在第一次访问数据属性时被拉出，然后不再被访问或变异（所有数据值都在内部存储在jQuery中）。

您可以使用

查看附加到元素的所有数据

 $(".myclass").data();

它将返回具有所有kvp的对象。