Question

我想在我的应用程序中使用.data()。 examples很有用，但我不明白这些值的存储位置。

我使用Firebug检查网页，只要.data（）将对象保存到dom元素，我就不会在Firebug中看到任何更改（HTML或Dom标签）。

我试着看一下jQuery的源码，但是我的Javascript知识非常先进，我迷失了自己。

所以问题是：

jQuery.data（）存储的值实际上去了哪里？我可以使用工具检查/定位/列出/调试它们吗？

Answer 1

请查看source。

从快速的一瞥看，它似乎将数据存储在第2行创建的cache变量中。

修改

这是一个快速演示，可以在缓存中找到数据：http://jsfiddle.net/CnET9/

您也可以将$.cache转储到控制台并手动浏览。

Answer 2

你似乎已经得到了答案，但这里有一点如何。在使用之前，您应该注意一些规则。

<强>添加

使用从$（'。selector'）返回的对象添加变量.data（）的工作原理是因为数据对象通过引用传递，所以在添加属性的任何地方都会添加它。如果在另一个元素上调用data（），它就会被更改。这就是它的本质......

var oData = $('#id').data();
oData.num = 0;
oData.num == $('#id').data().num; // true

添加对象会将对象放置在数据对象内部，以及“扩展先前使用该元素存储的数据”。 - http://api.jquery.com/data/#entry-longdesc

这意味着向dataObj添加obj变为

oData.obj = {};    
oData === { /*previous data*/, obj : { } }

添加数组不会扩展先前存储的数据，但不会像简单值那样表现...

是

如果存储了简单值，则可以将它们放入变量中，并在不更改数据对象的情况下使用它们执行所需的操作。

然而

如果您使用对象或数组在元素上存储数据，请注意！

仅仅因为您将其存储到变量并不意味着您不会更改数据值。仅仅因为你将它传递给函数并不意味着你没有改变数据值！

它就是它的本质..除非它很简单..那它只是一个副本。：P

var data = $("#id").data(); // Get a reference to the data object data.r_redirect = "index.php"; // Add a string value data.num = 0; // Add a integer value data.arr = [0,1,2]; // Add an array data.obj = { a : "b" }; // Add an object // but here is where the fun starts! var r_redirectString = data.r_redirect; // returns "index.php", as expected.. cool r_redirectString = "changed" // change the value and the compare : data.r_redirect == r_redirectString // returns false, the values are different var oArr = data.arr; // Now lets copy this array oArr.push(3); // and modify it. data.arr == oArr // should be false? Nope. returns true. // arrays are passed by reference. // but.. var oObj = data.obj // what about objects? oObj["key"] = "value"; // modify the variable and data.obj["key"] == oObj["key"] // it returns true, too!

所以，资源..

What's the best way to store multiple values for jQuery's $.data()? https://stackoverflow.com/a/5759883/1257652

Answer 3

你可以通过调用不带参数的.data()进行检查，如下所示：

$("div").data("thing", "value");
console.log($("div").data());
//or...
console.log($.data($("div").get(0)));

对于“where”，它存储在表示元素的键下的全局jQuery缓存对象中。如果您从中调用了特定值，则调用.data()确实会返回jQuery.data(yourDomElement)，或者键入一个键。

jQuery .data（）如何工作？

3 个答案: