jquery操作HTML5 的data-*的用法

作者: 你是我的21646098
来源: 51数据库
2022-09-21

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jquery操作HTML5 的data-*的用法</title>
</head>
<script src="http://www.51sjk.com/Upload/Articles/1/0/330/330209_20220921170734017.js"></script>
<script>
$(function(){
	//读取data-*的值
	$("li").each(function(v) {
        console.log($(this).data('name'));
    });
	
	//设置data-*的值
	$("li").eq(0).data('name','bryant');
	$("li").each(function(v) {
        console.log($(this).data('name'));
    });
	
	//删除data-*的值   这里使用的是removeAttr，测试官方的removeData是不起作用的
	$("li").eq(0).removeAttr('data-name');
	$("li").each(function(v) {
        console.log($(this).data('name'));
    });
})
</script>
<body>
<ul>
	<li data-name="kobe">科比</li>
    <li data-name="gasol">加索尔</li>
    <li data-name="nash">纳什</li>
    <li data-name="fisher">费舍尔</li>
</ul>
</body>
</html>

推荐阅读