HTML5中 data-*属性的实际用途

最新推荐文章于 2025-07-18 17:10:48 发布

程序员-拖鞋

最新推荐文章于 2025-07-18 17:10:48 发布

阅读量8.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： html/css3 文章标签： html5

本文链接：https://blog.youkuaiyun.com/a1178013314/article/details/78349524

html/css3 专栏收录该内容

2 篇文章

订阅专栏

本文探讨了如何在HTML5中利用data-*属性优化数据传递，特别是在前端分页展示和按钮点击事件中。传统的做法是通过隐藏字段或value属性存储数据，但这种方法可能导致冗余。现在，可以通过在元素上直接设置data-*属性，如data-time，然后使用JQuery的$(this).data('time')方法获取数据，减少代码冗余。然而，要注意的是，data属性名称必须小写，以避免无法正确获取值。对于使用Vue等新框架的开发者来说，这种方法更加便捷。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这篇文章适用于还在使用二代框架(JQ 、zepto)等框架开发的人员~~

有些时候我们在做分页展示的时候后台会给我们一个JSON数组比如这样的数据

[
    {
        "activityId": "ACT_JAN_INVITE",
        "name": "aaa",
        "id": 6679,
        "jul2017Id": 0,
        "status": 0,
        "type": 2,
        "updateTime": {
            "date": 16,
            "day": 6,
            "hours": 0,
            "minutes": 30,
            "month": 11,
            "seconds": 46,
            "time": 1513355446000,
            "timezoneOffset": -480,
            "year": 117
        },
        "userId": 1999113
    },
    {
        "activityId": "ACT_JAN_INVITE",
        "discountMny": 0,
        "id": 6822,
        "name": "bbb",
        "status": 0,
        "type": 1,
        "updateTime": {
            "date": 16,
            "day": 6,
            "hours": 0,
            "minutes": 32,
            "month": 11,
            "seconds": 48,
            "time": 1513355568000,
            "timezoneOffset": -480,
            "year": 117
        },
        "userId": 1999113
    }
]

前端只需要展示 userId和name里面的值我们循环拼接字符串就可以了
现在有个需求，要求在点击每一行中的一个按钮的时候进行数据查找，然后跳转到一个详情页面，
后台查询数据需要两个参数
userId 和updateTime.time(实际可能需要的更多)

之前我们会这样在每行中加入

<input type="hidden" value=""></input>

value会拼入我们需要的值，之后会用JQ取到传给后台
如果hidden的值很多很造成冗余

现在可以这样

<button type="button" data-time=""></button>

把变量拼入button中
之后可以在点击的时候通过
$(this).data(“time”)（JQ的写法，这里有个小坑，我们平时写变量名可能会用到骆驼命名法比如，creatTime，但是都必须是小写用大写是取不到值的）
获得想要的值，可以节省很多冗余代码，

不过如果用vue之类的就更省事，还是来多学习学习新框架吧