HTML5 自定义 data-* 属性与 JS / jQuery 数据集交互标准

HTML5 规范正式引入了 data-* 自定义数据属性，允许开发者在 HTML DOM 节点上无侵入式地嵌入自定义数据，彻底替代了以往非法的自定义属性。本文介绍 原生 JS dataset 与 jQuery data() 的读取标准。

一、 HTML 定义语法与原生 JS 操作

<!-- 定义属性：小写字母，可用连字符 -->
<button id="user-btn" data-user-id="10086" data-role-name="admin">查看详情</button>

const btn = document.getElementById('user-btn');

// 原生 JS 使用 dataset 访问（自动转换为小驼峰命名）
console.log(btn.dataset.userId);   // 输出: "10086"
console.log(btn.dataset.roleName); // 输出: "admin"

二、 jQuery 操作方式

// jQuery data() 会自动转换数据类型（如字符串 "10086" 转为数字 10086）
const userId = $('#user-btn').data('user-id');