將數據添加到使用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"); 

Data-用屬性被拉到在第一時間中的數據屬性被訪問，然後不再訪問或突變的（所有數據值然後被存儲在內部的jQuery）。

你可以看一下連接到一個元素的所有數據使用

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

它會返回對象的所有KVP。