Question

我还没有找到jquery函数data()的用法。谁能给我一些如何使用它的例子？

Answer 1

它非常适用于将各种对象，字符串，数组等与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();
   });
});

这会选择每个a标记，如果奇数则设置Orange，如果是偶数则设置Purple。如果这是您真正想要的，那么这不是编写此代码的最佳方式，但它确实说明了如何使用.data()函数。

您还可以使用它来存储对象：

$("#header").data('headerSettings',{
   color: "red",
   cost:  "$25.00",
   time:  1000
});

现在您可以在页面上的任何其他位置访问该数据：

$("#header").data('headerSettings').color;

Answer 2

我认为这个问题需要更多的关注。 jQuery的data API对于各种用例非常强大。

jQuery的数据功能允许您使用任何jQuery对象存储和检索任何相关数据。

主要是，它还可以用于读取html中任何节点上设置的data-属性。

示例1

HTML： <div id="myNode" data-foo="bar"></div>。

jQuery代码： $("#myNode").data("foo") //bar

示例2

同样，我也可以在任何节点上存储w.r.t值。

jQuery代码：

$("#myNode").data("foo","baz") $("#myNode").data("foo") //baz

这里要注意的一件重要事情是，当使用数据API在笔记上设置数据时，不会在DOM中更新html。如果要更新HTML，可能需要坚持使用attr("data-foo","baz")方法。

虽然可以读取存储在HTML数据属性中的字符串，但您也可以在使用数据API存储值时分配对象。

开发人员将对象与节点链接在一起的各种用例。

e.g。

var obj = {
  name : "test"
}
$("#myNode").data("foo",obj);

$("#myNode").data("foo") === obj //true

继续，explore the API here.

Answer 3

它允许您将任何类型的数据与DOM元素相关联。有关示例，请参阅this博文。

Answer 4

jQuery documentation总结得很好：

返回元素的唯一ID。

通常此功能仅为   内部使用。你可能不会   以这种方式使用data（）方法。 它   必要时自动调用   使用其他数据时（）   功能。

基本上，此函数用于支持其他jQuery函数。最好忽略此函数，因为它不打算成为jQuery API的公共接口的一部分。

jQuery data（）函数做了什么

4 个答案: