jQuery data() 函数有什么作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1794951/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
what does jQuery data() function do
提问by Doug Neiner
I have not found what is the use of jquery function data().
Can anyone give me some example of how it can be used?
我还没找到jquery函数有什么用data()。谁能给我一些如何使用它的例子？
回答by Doug Neiner
Its really useful for associating various objects, strings, arrays, etc with a DOM element. Here is a fun hypothetical use:
它对于将各种对象、字符串、数组等与 DOM 元素相关联非常有用。这是一个有趣的假设用途：
$(document).ready(function(){
$("a").each(function(index, el){
if(index % 2 == 0)
$(this).data('coolColor', 'Orange'); // Set the data
else
$(this).data('coolColor', 'Purple'); // Set the data
}).click(function(e){
alert($(this).data('coolColor')); // Retrieve the data
e.preventDefault();
});
});
This would select every atag, and set Orangeif its odd, or Purpleif its even. This is not the most optimal way to write this code if this is what you really wanted to do, but it does illustrate how to use the .data()function.
这将选择每个a标签，并设置Orange是奇数还是Purple偶数。如果这是您真正想做的事情，这不是编写此代码的最佳方式，但它确实说明了如何使用该.data()函数。
You can also use it to store objects:
您还可以使用它来存储对象：
$("#header").data('headerSettings',{
color: "red",
cost: ".00",
time: 1000
});
Now you could access that data anywhere else on the page:
现在您可以在页面上的任何其他位置访问该数据：
$("#header").data('headerSettings').color;
回答by Sunny R Gupta
I think this question needs a bit more attention. jQuery's dataAPI is really powerful for various use-cases.
我认为这个问题需要多加注意。jQuery 的dataAPI 对于各种用例来说非常强大。
jQuery's data function allows you to store and retrieve any associated data with any jQuery object.
jQuery 的数据功能允许您存储和检索与任何 jQuery 对象相关联的数据。
Primarily, it can also be used to read data-attributes set on any node in the html.
首先，它还可用于读取data-html 中任何节点上设置的属性。
Example 1
示例 1
HTML:
<div id="myNode" data-foo="bar"></div>.
HTML:
<div id="myNode" data-foo="bar"></div>.
jQuery Code:
$("#myNode").data("foo") //bar
jQuery代码：
$("#myNode").data("foo") //bar
Example 2
示例 2
Likewise I can store a value w.r.t any node too.
同样，我也可以存储任何节点的值。
jQuery Code:
jQuery代码：
$("#myNode").data("foo","baz")
$("#myNode").data("foo") //baz
$("#myNode").data("foo","baz")
$("#myNode").data("foo") //baz
One important thing to note here is, that when one sets a data on the note using the data API, the html is not updated in the DOM. If you want to update the HTML, you might want to stick to the attr("data-foo","baz")method.
这里要注意的一件重要事情是，当使用数据 API 在便笺上设置数据时，html 不会在 DOM 中更新。如果您想更新 HTML，您可能需要坚持使用该attr("data-foo","baz")方法。
While one can read strings stored in HTML data attributes, you can also assign an object while storing a value using the data API.
虽然可以读取存储在 HTML 数据属性中的字符串，但您也可以在使用数据 API 存储值的同时分配一个对象。
There are various use-cases where developers link an object with a node.
开发人员将对象与节点链接的用例有很多种。
e.g.
例如
var obj = {
name : "test"
}
$("#myNode").data("foo",obj);
$("#myNode").data("foo") === obj //true
Go ahead, explore the API here.
继续，在这里探索 API。
回答by Marek Karbarz
回答by Andrew Hare
The jQuery documentationsums it up pretty well:
在jQuery文档概括起来相当不错：
Returns a unique ID for the element.
Typically this function will only be used internally. You will likely not use the data() method in this way.It is called automatically when necessary when using the other data() functionality.
返回元素的唯一 ID。
通常，此功能仅在内部使用。您可能不会以这种方式使用 data() 方法。在使用其他 data() 功能时，它会在必要时自动调用。
Basically this function exists to support other jQuery functions. It is best to ignore this function as it is not intended to to part of the public interface of the jQuery API.
基本上这个函数的存在是为了支持其他 jQuery 函数。最好忽略此函数，因为它不是 jQuery API 公共接口的一部分。
