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

在 getEmpId 函数中，我们使用了

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

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

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

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 库配合使用。