HTML5的data-*属性

最新推荐文章于 2023-01-10 23:26:46 发布

lanying100

最新推荐文章于 2023-01-10 23:26:46 发布

阅读量173

点赞数

分类专栏：技术文章标签： html javascript jquery

本文链接：https://blog.csdn.net/lanying100/article/details/112461632

版权

技术专栏收录该内容

32 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 学习网址：https://www.w3school.com.cn/tags/att_global_data.asp -->
    <meta charset="UTF-8">
    <title>测试HTML5的新特性:data-*属性</title>
    <script>
        // JS取数据
        function showInfo(stu) {
            var stuId = stu.getAttribute("data-student-id");
            alert(stu.innerHTML + "的学号：" + stuId);
        }

        // JQ取数据
        function showInfo2(stu) {
            var stuId = $(stu).data("student-id");
            alert($(stu).text() + "的学号：" + stuId);
        }
    </script>
    <script src="jquery-1.11.1.js"></script>
</head>
<body>

    <p>点击学生姓名查看学号信息：</p>

    <!--
        data-* 属性包括两部分：
            1) 属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符
            2) 属性值可以是任意字符串
        注释：用户代理会完全忽略前缀为 "data-" 的自定义属性。
        作用：有了data-*，我们就可以给任意HTML元素上设置自定义的字符串数据了！
    -->
    <ul>
        <li onclick="showInfo2(this)" data-student-id="1">张三</li>
        <li onclick="showInfo2(this)" data-student-id="2">李四</li>
        <li onclick="showInfo2(this)" data-student-id="3">王五</li>
    </ul>

</body>
</html>

补充（发现了一篇更好的文章）：https://blog.csdn.net/qq_25821067/article/details/73921068

lanying100

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
HTML5的data-*属性

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8"> <title>测试HTML5的新特性:data-*属性</title> <script> // JS取数据.
复制链接

扫一扫