0

我刚刚发现，如果我使用设置数据属性，.data()我无法使用 jquery 属性选择器搜索元素，但如果我使用 设置它.attr()，搜索工作。

我的 chrome 控制台的输出：

$('body').append($('<div></div>').data('x', 'y'));
[<body>​…​&lt;/body>​]
$('div[data-x="y"]')
[]
$('body').append($('<div></div>').attr('data-x', 'y'));
[<body>​…​&lt;/body>​]
$('div[data-x="y"]')
[<div data-x=​"y">​&lt;/div>​]

我的问题是，如果我使用 .attr()，它是否可以假设它在每个浏览器中都能正常工作。

4

2 回答 2

2

它会正常工作，但是您应该将其data()用作 getter 和 setter。

这样做的原因是因为 jQuery 将所有data-*属性存储在它在内存中维护的对象中。这意味着它比每次访问 DOM 来读取/写入属性要快得多。

如果您需要通过数据属性选择元素，请使用filter()- 尽管我没有测试过，但它很可能仍然比属性选择器更快。

var $filteredElements = $('.lots-of-elements').filter(function() {
    return $(this).data('foo') == 'bar';
});
于 2013-08-17T15:28:52.900 回答
1

您不能选择/搜索.data()页面上的值，因为它们是由 jQuery 内部存储在内存中的。

jQuery.data('element','x','y');就像elements['element']['x'] = 'y';jQuery 内存中的一些变量

然而

$('element').attr('data-x','y')页面上的产量<element data-x="y">。

至于你的问题，它在 jQuery 文档中得到了回答：

使用 jQuery 的 .attr() 方法获取元素属性的值有两个主要好处：

  • 方便：它可以直接在 jQuery 对象上调用并链接到其他 jQuery 方法。
  • 跨浏览器一致性：某些属性的值在浏览器之间报告不一致，甚至在单个浏览器的版本之间。.attr() 方法减少了这种不一致。

http://api.jquery.com/attr/

于 2013-08-17T15:45:03.627 回答