【前端】jquery获取data-*的属性值

通过jquery获取下面data-id的值

html 复制代码
<div id="getId" data-id="122" >获取id</div>

方法一:dataset()方法

javascript 复制代码
//data-前缀属性可以在JS中通过dataset取值,更加方便
console.log(getId.dataset.id);//112

//赋值
getId.dataset.id = "113";//113

//新增data属性
getId.dataset.id2 = "100";//100

//删除,设置成null,或者delete
getId.dataset.id2 = null;//null
delete getId.dataset.id2;//undefind

方法二:jquery data()方法

javascript 复制代码
// 取值
var id = $("#getId").data("id"); //122

//赋值
$("#getId").data("id","100");//100

通过点击事件,获取当前被点击的属性值

javascript 复制代码
// 获取当前点击的属性值
$("#getId).click(function(){
    var id= $(this).data('id')
})

方法三:jquery attr()方法

javascript 复制代码
// 取值
var id = $("#getId").attr("data-id"); //122

//赋值
$("#getId").attr("data-id","100");//100
相关推荐
PedroQue992 分钟前
uni-router:uni-app路由管理新选择
前端·uni-app
Cerrda6 分钟前
一行指令搞定复制:Vue 3 vCopy 实现解析
前端·代码规范
ZengLiangYi9 分钟前
本地向量数据库选型:vectra vs chroma vs hnswlib
javascript·数据库·后端
英勇无比的消炎药10 分钟前
前端提效神器TinyRobot
前端·vue.js
CDwenhuohuo22 分钟前
uni 背景色渐变 全屏
前端·javascript·vue.js
爱怪笑的小杰杰24 分钟前
Vue 项目交付第三方开发,如何隐藏核心 JS 源码?
前端·javascript·vue.js
之歆27 分钟前
Node.js 与 NPM 包管理完全指南
前端·npm·node.js
小二·36 分钟前
Vue 3 组合式 API 进阶实战
前端·javascript·vue.js
12点一刻38 分钟前
npx 使用入门教程:是什么、怎么用、和 npm 有什么区别
前端·npm·node.js
console.log('npc')39 分钟前
将 Figma 接入 Codex MCP:从 `/plugins` 到本地插件配置的完整教程
前端·人工智能·python·figma·code·codex·mcp