使用HTML5的自定义数据属性上的jQuery选择器

随着 HTML5 规范的发展，开发者们可以在标签中加入自定义数据属性来存储额外的信息。这些数据属性可以通过 jQuery 的选择器来快速获取和操作，在前端开发中具有很大的实用价值。本文将介绍如何使用 HTML5 自定义数据属性上的 jQuery 选择器，并提供一些示例代码。

什么是 HTML5 自定义数据属性？

HTML5 自定义数据属性允许开发者在页面元素中添加非标准的属性，以便于存储私有的定制化数据。这些属性必须以 data- 开头。例如，我们可以为一个按钮添加以下自定义数据属性：

<button id="myButton" data-color="red" data-size="large">Click me!</button>

在这个例子中，我们给按钮添加了两个自定义数据属性：data-color 和 data-size。这些属性不会对浏览器默认行为造成任何影响，但可以通过 JavaScript 或 jQuery 来获取和修改它们。

如何使用 HTML5 自定义数据属性的 jQuery 选择器？

在 jQuery 中，我们可以使用 data() 方法来获取或修改 HTML 元素的自定义数据属性。该方法接受一个字符串参数，表示要获取或设置的自定义数据属性名。

例如，我们可以使用以下代码获取上面示例中按钮的 data-color 属性：

var color = $('#myButton').data('color');

这个代码将返回字符串 "red"，代表按钮的背景色。我们也可以使用同样的方式来修改一个元素的自定义数据属性：

$('#myButton').data('size', 'small');

在这个例子中，我们将按钮的 data-size 属性从 "large" 修改为 "small"。

除了 data() 方法之外，jQuery 还提供了一些特殊的选择器来利用 HTML5 自定义数据属性。其中最常见的是 [data-attribute] 选择器，它允许我们根据一个自定义数据属性进行元素选择。例如，以下代码将选中所有具有 data-color="red" 的元素：

var redElements = $('[data-color="red"]');

这个代码将返回一个包含所有符合条件的元素的 jQuery 对象。我们也可以使用其他 CSS 选择器与 [data-attribute] 选择器结合使用，例如 #、. 或 :not() 等。

示例代码

下面是一些示例代码，展示如何在实际开发中使用 HTML5 自定义数据属性上的 jQuery 选择器。

根据自定义数据属性进行列表过滤

假设我们有一个包含多个商品的列表，每个商品都有一个 data-category 自定义数据属性，表示该商品所属的类别。我们希望用户能够通过点击不同的类别按钮来只显示特定类别的商品。

首先，在 HTML 中，我们为每个类别按钮添加一个相应的 data-category 属性：

<button class="category-button" data-category="electronics">Electronics</button>
<button class="category-button" data-category="books">Books</button>
<button class="category-button" data-category="clothing">Clothing</button>

然后，在 JavaScript 中，我们可以使用以下代码来根据用户点击的类别按钮来过滤商品列表：

$('.category-button').click(function() {
  var category = $(this).data('category');
  $('.item').hide();
  $('[data-category="' + category + '"]').show();
});

这个代码将为每个类别按钮添加一个点击事件处理程序。当用户点击按钮时，它将获取该按钮的 data-category 自定义数据属性，并显示所有具有相同 data-category 值的商品。

根据自定义数据属性进行表格排序

假设我们有一个包含多个学生信息的表格，每个学生都有一个 data-grade 自定义数据

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8145