JavaScript：利用 HTML5 数据属性实现最大效率

在本文中，我们将讨论如何使用 JavaScript 获取 HTML5 数据属性。我们将通过几个实际示例来演示如何通过普通 JavaScript 和 jQuery 使用这些数据属性。

JavaScript 是网络的核心技术之一。大多数网站都使用它，并且所有现代网络浏览器都支持它，而不需要插件。在本系列中，我们将讨论有助于您进行日常 JavaScript 开发的提示和技巧。

通常，您需要在 Web 应用程序或网站上存储一些额外信息以及不同的 HTML 元素。它可能对用户没有任何意义，但如果您希望根据该信息执行操作，它可能会对您有所帮助。

例如，如果您有一个 HTML 表，其中包含数据库中的行，那么您可能希望为每一行存储相应的数据库 ID。这将使编辑和其他事务变得更加容易。这是自定义数据属性的一个很好的用途。

立即学习“Java免费学习笔记（深入）”；

在引入这些自定义数据属性之前，开发人员通常会使用类属性来存储此类信息，但类属性实际上并不是用于此目的，这种做法可能会使理解代码和站点标记。

随着 HTML5 自定义数据属性的引入，在 HTML 中存储和检索自定义数据变得非常容易。

使用 Vanilla JavaScript 访问数据属性

在本节中，我们将讨论使用普通 JavaScript 获取 HTML5 数据属性的不同方法。

HTMLElement.dataset 属性

dataset 属性允许您轻松访问元素的数据属性。

让我们考虑以下示例。

首先，我们在每个 <li> 元素上定义了 data-employee-id 自定义数据属性，用于存储员工 ID。如果需要的话，稍后可以使用它来获取员工的更多详细信息。接下来，我们在每个 <li> 元素上定义了 onclick 事件处理程序，因此当您单击任何行时，它将调用 getEmpId 函数，该函数最终获取 employee 的值 - id 与相应 <li> 元素关联的数据属性。

在 getEmpId 函数中，我们使用了 <li> 元素的 dataset 属性，该属性作为第一个参数传递。 dataset 属性返回 DOMStringMap 对象，您可以使用该对象获取各个属性。

当您使用 dataset 属性获取各个属性时，有一些重要的事情。 data- 前缀已从属性名称中删除。任何后跟连字符的小写字符都会转换为大写字符，并删除连字符。换句话说， dash-style 属性名称将转换为 camelCase 对象键。其他角色保持不变。

在我们的示例中，使用这些规则，data-employee-id 属性将转换为 employeeId。因此，您可以使用 element.dataset.employeeId 来获取 data-employee-id 属性的值。

这就是 dataset 在 vanilla JavaScript 中正确工作的方式。

腾讯智影-AI数字人

基于AI数字人能力，实现7*24小时AI数字人直播带货，低成本实现直播业务快速增增，全天智能在线直播

73

查看详情

getAttribute() 方法

在本节中，我们将讨论如何使用 getAttribute 方法获取数据属性的值。

我们将修改上一节中讨论的示例。

如您所见，使用 HTML 元素的 getAttribute 方法获取自定义数据属性非常简单。您只需传递整个属性名称以及 data- 前缀即可获取属性的值。

使用 jQuery 库访问数据属性

在本节中，我们将讨论如何使用 jQuery 库获取 HTML5 数据属性。

data() 方法

jQuery data 方法允许您轻松获取元素的数据属性。

让我们通过以下示例来了解 jQuery 数据方法的工作原理。

如您所见，我们只需要传递数据属性名称的驼峰式版本即可获取其值。

attr() 方法

在 jQuery 中，还可以使用 attr 方法来获取元素的特定属性的值。

让我们快速了解如何在 jQuery 中使用 attr 方法。

…
…
var empId = $(element).attr('data-employee-id');
…
…

如您所见，attr 方法的工作方式与普通 JavaScript 中的 getAttribute 方法相同。

在 jQuery 中，data 和 attr 方法的区别在于 data 方法内部将从 data 属性获取的字符串转换为相应的类型，如数字、布尔值等。

这就是如何使用 jQuery 轻松获取数据属性。

结论

今天，我们讨论了如何使用 JavaScript 获取 HTML5 数据属性。在几个实际示例的帮助下，您了解了 HTML5 数据属性如何与普通 JavaScript 和 jQuery 库配合使用。

以上就是JavaScript：利用 HTML5 数据属性实现最大效率的详细内容，更多请关注php中文网其它相关文章！