本文链接：https://blog.csdn.net/weixin_44392418/article/details/88093923

自定义属性: data-*(属性名称)
作用: 进行数据的储存.
获取自定义属性的名称 jQuery的方式对象.data(‘自定义属性的名称’)
对象.dataset 获取的属性的集合 h5
自定义属性的写法规则 : data-name —>对象.name data-user-name —> 对象.userName
用驼峰命名方式来获取

<div class="aa" data-name="zhangsan"  data-age-id="18">this is zhouLiu</div>

<script src="js/jquery-1.8.3.min.js"></script>
<script>
    var box = document.querySelector("div");
    //1.获取
    console.log(box.dataset.ageId);
    console.log(box.dataset["name"]);
    //2.设置单个属性
    box.dataset.age = "40";
    console.log(box.dataset.age);

    //用jQuery的方式
    console.log($("div").attr("data-name"));// 对的
    console.log($("div").data("data-name"));// 错的
    console.log($("div").data("name"));// 对的

案例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul:first-child {
            list-style: none;
        }

        ul:first-child li {
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: #fff;
            background: cyan;
            float: left;
            cursor: pointer;
        }

        ul:first-child li.active {
            background: red;
        }

        .box li{
            width: 400px;
            height: 400px;
            background: pink;
            display: none;
        }
        .box li.show{
            display: block;
        }
    </style>
</head>
<body>
<ul class="nav">
    <!--在渲染的时候  大小的属性会转换成小写 -->
    <li data-content-id="content01">菜单1</li>
    <li data-content-id="content02" class="active">菜单2</li>
    <li data-content-id="content03">菜单3</li>
    <li data-content-id="content04">菜单4</li>
</ul>
<!--怎么关联下面的内容--通过自定义属性也可以进行关联 -->
<ul class="box">
    <li id="content01">内容1</li>
    <li id="content02" class="show">内容2</li>
    <li id="content03">内容3</li>
    <li id="content04">内容4</li>

</ul>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
    $(".nav")[0].onclick = function (e) {
        if(e.target == $(".nav")[0]){
            return;
        }
        console.log(e)
        //1.找到点击之后的li
        var nowLi = e.target;
        //2.找到有active的li
        var oldLi = $("li.active")[0];
        //先移出, 再添加
        oldLi.classList.remove("active");
        nowLi.classList.add("active");
        //先找到之前有li对应的内容, 并移出show
        // var content = oldLi.dataset.contentId; //获取自定义属性值
        // console.log(content);
        $('.show')[0].classList.remove('show');
        //根据选中的标签显示对应的内容
        $("#" + nowLi.dataset.contentId)[0].classList.add("show");






    }
</script>

</body>
</html>

自定义属性操作及案例