Javascript 在jQuery选择器中使用HTML5数据属性

关于数据属性的Noob问题

我想知道在jQuery选择器中使用数据属性将来会不会带来麻烦

我试图减少.class和id作为jQuery选择器的使用，因为我处理的大多数数据都是从数据属性生成的

代码示例

$(document).ready(function(){

  var mydata = $(document).data('my-data-attribute');

});

上面的代码会减慢加载时间吗

或

或

---

这会带来麻烦吗？

本机查询选择器支持属性选择器，因此可以。就未来而言，我认为在不久的将来这不会是一个问题

但是如果您可以使用附加到属性选择器的元素选择器，例如$'div[data suffix attribute=delete]，则效果会更好

如果您非常担心性能，那么最好将class属性添加到所需的元素中，然后使用class选择器

在选择器中使用id，这显然很快， 如果您有多个数据属性，则最好使用$'[data suffix attribute=delete]'。单击；。 您可以对数据属性元素使用父选择器，例如

parentId包含所有数据属性元素

上面的代码不起作用。如果要使用jQuery.data方法读取元素的HTML5数据属性，首先需要使用jQuery选择器选择相关元素，然后使用如下所示的方法：

var mydata = $('.example').data('suffix');

这将通过一个示例类读取元素的数据后缀属性的值

使用.data方法时需要注意的另一件重要事情是，您必须从选择器中省略data-prefix以读取存储在该属性中的值

选择属性之前的方式。每个方法都将起作用：

$('[data-suffix-attribute="some_value"]');

但是，如果您可以将其缩小到一个特定的元素，例如：

$('div[data-suffix-attribute="some_value"]');

---

这是因为第一个选择器将遍历文档中的每个节点，这将花费更多的时间，而第二个选择器将只遍历文档中的div标记。

不会有问题，但选择ID是最快、最可靠的选择。另外，不要混合使用data属性和jquery的.data函数。因此，jquery中的.data函数使用一个内部系统来存储变量，它也会读取数据属性来填充变量，因此如果要执行此操作，$'hello'。data'hello'，world'；然后尝试访问数据属性data hello没有定义值，或者如果您定义了值，该值不会更改，jQuery在初始化后将始终使用其内部值。抱歉，我是javascript的noob，但我在google上搜索，获取数据属性的方法是使用.data函数，我错了吗？谢谢你的详细解释：D，看起来最好的方法是使用缩小的选择器：D

$(document).ready(function(){

  var mydata = $(document).data('my-data-attribute');

});

var mydata = $('.example').data('suffix');

$('[data-suffix-attribute="some_value"]');

$('div[data-suffix-attribute="some_value"]');