在前端开发中，经常需要从 HTML 元素中获取数据属性（data-* attributes），以便为元素设置样式、添加事件等。本文将比较使用 jQuery 和纯 JavaScript 分别如何获取数据属性，并介绍它们的优缺点及适用场景。
jQuery
jQuery 是一个广泛使用的 JavaScript 库，它封装了很多常见的操作，包括获取数据属性。可以使用 data() 方法获取元素的数据属性值，该方法返回一个对象，其中包含所有的数据属性。例如：
// HTML: <div data-id="123" data-name="John"></div>
var $div = $("div");
var data = $div.data(); // {id: "123", name: "John"}
var id = $div.data("id"); // "123"
var name = $div.data("name"); // "John"使用 jQuery 获取数据属性的优点是简单方便，代码量少，并且可以一次性获取所有数据属性。但是，缺点是如果你只是需要获取单个数据属性，那么 jQuery 会执行额外的工作来返回一个对象，这可能会降低性能。
纯 JavaScript
除了 jQuery，纯 JavaScript 也提供了一种获取数据属性的方法。可以使用 getAttribute() 方法获取元素的数据属性值。例如：
// HTML: <div data-id="123" data-name="John"></div>
var div = document.querySelector("div");
var id = div.getAttribute("data-id"); // "123"
var name = div.getAttribute("data-name"); // "John"使用纯 JavaScript 获取数据属性的优点是更快的性能，特别是当你只需要获取单个数据属性时。但是，缺点是代码量比使用 jQuery 更多，需要手动处理数据属性的名称，不方便同时获取所有数据属性。
深度和学习
在实际项目中，我们可以根据具体情况选择使用 jQuery 或者纯 JavaScript 来获取数据属性。如果你需要一次性获取所有数据属性，或者希望代码更简洁，那么可以使用 jQuery。如果你只需要获取单个数据属性，或者希望更快的性能，那么可以使用纯 JavaScript。
此外，还可以使用 HTML5 的 dataset 属性来访问元素的数据属性，它返回一个对象，其中包含所有不以“data-”开头的属性名和对应的值。例如：
// HTML: <div data-id="123" data-name="John" age="20"></div>
var div = document.querySelector("div");
var id = div.dataset.id; // "123"
var name = div.dataset.name; // "John"
var age = div.dataset.age; // "20"示例代码
以下是一个使用 jQuery 和纯 JavaScript 分别获取数据属性的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------- -- ------------------
-------
------
---- ------------- -----------------------
------- -----------------------------------------------------------
--------
-- -- ------ ------
--- ---- - ---------
--- ---- - ------------ -- ---- ------ ----- -------
--- -- - ---------------- -- -----
--- ---- - ------------------ -- ------
----------------- --- ------
---------
--------
-- --- ---------- ------
--- --- - ------------------------------
--- -- - ---------------------------- -- -----
--- ---- - ------------------------------ -- ------
--------------- ------
---------
-------
-------结论
本文介绍了使用 jQuery 和纯 JavaScript 分别获取数据属性的方法，以及它们的优缺点和适用场景。在实际项目中，可以根据具体情况选择合适的方法来获取
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/14703