Question

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

我的Chrome控制台输出：

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

我的问题是它是否保存以假设它在每个浏览器中都能正常工作如果我使用.attr（）。

Answer 1

它会正常工作，但你应该使用data()作为吸气剂和设定者。

原因是因为jQuery将所有data-*属性存储在它在内存中维护的对象中。这意味着每次读取/写入属性时，访问DOM的速度很多。

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

var $filteredElements = $('.lots-of-elements').filter(function() {
    return $(this).data('foo') == 'bar';
});

Answer 2

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

对于jQuery内存中的某个变量，

jQuery.data('element','x','y');与elements['element']['x'] = 'y';类似

而

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

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

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


便利性：它可以直接在jQuery对象上调用并链接   其他jQuery方法。

跨浏览器一致性：某些值   浏览器甚至是不一致地报告属性   跨单个浏览器的版本。 .attr（）方法减少了这种情况   不一致。

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

jquery：.data（'x'，'y'）vs .attr（'data-x'，'y'）

2 个答案: