【jQuery】data-id和id的区别

DomCode

已于 2022-07-12 17:25:51 修改

阅读量3k

点赞数 1

分类专栏： # JavaScript 文章标签：前端 javascript es6

于 2021-11-03 10:17:57 首次发布

本文链接：https://blog.csdn.net/weixin_43094619/article/details/121115218

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

data-id和id的区别

id是选择器；data-id只是行内存放数据的一个标签，跟input里面的value作用是一样的，同时在HTML5 中增加了一项新功能是自定义数据属性，也就是 data-* 自定义属性。在HTML5中我们可以使用以 data- 为前缀来设置我们需要的自定义属性，来进行一些数据的存放。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/jquery.min.js"></script>
</head>

<body>
    <button id="first">first</button>
    <button data-id="second">second</button>

    <script>
        // 原生JS
        const btn1 = document.querySelector('button:nth-child(1)')
        const btn2 = document.querySelector('button:nth-child(2)')
        console.log('btn1.id:', btn1.id); // 打印：first
        console.log('btn2.id:', btn2.id); // 打印：空     打印btn2.data-id时会报错   
        console.log('btn1.getAttribute("id"):', btn1.getAttribute("id")); // 打印：first
        console.log('btn2.getAttribute("data-id"):', btn2.getAttribute("data-id")); // 打印：second
        console.log('获取自定义属性值：dataset');
        console.log(btn2.dataset.id); // 打印：second

        console.log('---------------------------------');

        // jQuery
        const $btn1 = $('button').eq(0)
        const $btn2 = $('button').eq(1)
        console.log('prop:', $btn1.prop('id')); // 打印：first
        console.log('prop:', $btn2.prop('data-id')); // 打印：undefined
        console.log('attr:', $btn1.attr('id')); // 打印：first
        console.log('attr:', $btn2.attr('data-id')); // 打印：second
    </script>
</body>
</html>