什么是data-id属性
data-id是HTML5中的自定义属性，用于在HTML元素中存储额外的数据。它通常用于菜单栏匹配、元素标识和数据传递等场景。与id属性不同，data-id主要用于存放数据，不会影响CSS选择器。
data-id的用途
data-id常用于以下场景：
- 一级菜单与二级菜单的匹配关联
- 存储元素相关的数据，配合JavaScript进行操作
- 微信小程序中传递数据到事件处理函数
- 替代隐藏域存储值，简化HTML结构
HTML示例
下面是一个使用data-id进行菜单匹配的示例：
<!-- 一级菜单 -->
获取data-id值的两种方法
方法一：使用jQuery的data()方法
data()方法是jQuery提供的用于获取data-*属性的方法，语法简洁：
$(function(){
$('#plant').hover(function(){
// 使用data()方法获取data-fruits属性的值
var f1 = $(this).data('fruit');
console.log(f1); // 输出：12
})
})方法二：使用jQuery的attr()方法
attr()方法可以获取任意HTML属性，包括自定义的data-*属性：
$(function(){
$('#plant').hover(function(){
// 使用attr()方法获取data-fruit属性的值
var f2 = $(this).attr('data-fruit');
console.log(f2); // 输出：12
})
})完整示例代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>获取data属性值示例</title>
[removed][removed]
</head>
<body>
来呀！
[removed]
$(function(){
$('#plant').hover(function(){
var f1 = $(this).data('fruit');
var f2 = $(this).attr('data-fruit');
console.log(f1); // 输出：12
console.log(f2); // 输出：12
})
})
[removed]
</body>
</html>两种方法的区别
| 方法 | 优点 | 缺点 |
|---|---|---|
| data() | 写法简洁，自动转换数字类型 | jQuery内部缓存数据，动态修改后可能获取不到最新值 |
| attr() | 始终读取DOM属性，获取实时值 | 返回值始终为字符串类型 |
原生JavaScript获取data属性
如果不使用jQuery，也可以使用原生JavaScript获取data属性：
使用getAttribute()
var element = document.getElementById('plant');
var value = element.getAttribute('data-fruit');
console.log(value); // 输出：12使用dataset属性（HTML5）
var element = document.getElementById('plant');
var value = element.dataset.fruit;
console.log(value); // 输出：12注意：使用dataset属性时，data-后面的名称需要转换为驼峰命名法。例如data-element-type在dataset中对应elementType。
总结
获取data-id值有多种方法，推荐使用：
- 日常开发：使用
$(this).data('id')写法最简洁 - 需要实时值：使用
$(this).attr('data-id')确保获取最新值 - 原生JavaScript：使用
element.dataset.id符合HTML5标准
发表评论 取消回复