在本文中，我们将讨论如何使用 javascript 获取 html5 数据属性。我们将通过几个实际示例来演示如何通过普通 javascript 和 jquery 使用这些数据属性。
javascript 是网络的核心技术之一。大多数网站都使用它，并且所有现代网络浏览器都支持它，而不需要插件。在本系列中，我们将讨论有助于您进行日常 javascript 开发的提示和技巧。
通常，您需要在 web 应用程序或网站上存储一些额外信息以及不同的 html 元素。它可能对用户没有任何意义，但如果您希望根据该信息执行操作，它可能会对您有所帮助。
例如，如果您有一个 html 表，其中包含数据库中的行，那么您可能希望为每一行存储相应的数据库 id。这将使编辑和其他事务变得更加容易。这是自定义数据属性的一个很好的用途。
在引入这些自定义数据属性之前，开发人员通常会使用类属性来存储此类信息，但类属性实际上并不是用于此目的，这种做法可能会使理解代码和站点标记。
随着 html5 自定义数据属性的引入，在 html 中存储和检索自定义数据变得非常容易。
使用 vanilla javascript 访问数据属性在本节中，我们将讨论使用普通 javascript 获取 html5 数据属性的不同方法。
htmlelement.dataset 属性dataset 属性允许您轻松访问元素的数据属性。
让我们考虑以下示例。
首先，我们在每个 元素上定义了 data-employee-id 自定义数据属性，用于存储员工 id。如果需要的话，稍后可以使用它来获取员工的更多详细信息。接下来，我们在每个 元素上定义了 onclick 事件处理程序，因此当您单击任何行时，它将调用 getempid 函数，该函数最终获取 employee 的值 - id 与相应 元素关联的数据属性。
在 getempid 函数中，我们使用了 元素的 dataset 属性，该属性作为第一个参数传递。 dataset 属性返回 domstringmap 对象，您可以使用该对象获取各个属性。
当您使用 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 库配合使用。
以上就是javascript：利用 html5 数据属性实现最大效率的详细内容。