我还没有发现jquery函数有什么用data()
。谁能给我一些如何使用它的例子?
4 回答
它对于将各种对象、字符串、数组等与 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;
它允许您将任何类型的数据与 DOM 元素相关联。有关一些示例,请参阅此博客文章。
我认为这个问题需要更多的关注。jQuery 的data
API 对于各种用例来说非常强大。
jQuery 的数据函数允许您存储和检索与任何 jQuery 对象相关的任何数据。
首先,它还可以用于读取data-
html 中任何节点上设置的属性。
示例 1
HTML:
<div id="myNode" data-foo="bar"></div>
.
jQuery代码:
$("#myNode").data("foo") //bar
示例 2
同样,我也可以在任何节点上存储一个值。
jQuery代码:
$("#myNode").data("foo","baz")
$("#myNode").data("foo") //baz
这里要注意的一件重要事情是,当使用数据 API 在便笺上设置数据时,html 不会在 DOM 中更新。如果您想更新 HTML,您可能需要坚持使用该attr("data-foo","baz")
方法。
虽然可以读取存储在 HTML 数据属性中的字符串,但您也可以在使用数据 API 存储值的同时分配对象。
开发人员将对象与节点链接起来的用例有很多种。
例如
var obj = {
name : "test"
}
$("#myNode").data("foo",obj);
$("#myNode").data("foo") === obj //true
来吧,在这里探索 API。
jQuery 文档总结得很好:
返回元素的唯一 ID。
通常这个函数只会在内部使用。您可能不会以这种方式使用 data() 方法。在使用其他 data() 功能时,它会在必要时自动调用。
基本上这个函数的存在是为了支持其他 jQuery 函数。最好忽略这个函数,因为它不是 jQuery API 的公共接口的一部分。