【前端】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
相关推荐
真的想不出名儿1 分钟前
Vue 中 props 传递数据的坑
前端·javascript·vue.js
FIN66682 分钟前
昂瑞微:深耕射频“芯”赛道以硬核实力冲刺科创板大门
前端·人工智能·科技·前端框架·信息与通信·智能
阳光阴郁大boy3 分钟前
星座运势网站技术解析:从零打造现代化Web应用
前端·javascript
烛阴16 分钟前
武装你的Python“工具箱”:盘点10个你必须熟练掌握的核心方法
前端·python
sorryhc32 分钟前
如何设计一个架构良好的前端请求库?
前端·javascript·架构
Queen_sy38 分钟前
vue3 el-date-picker 日期选择器校验规则-选择日期范围不能超过七天
javascript·vue.js·elementui
lvchaoq1 小时前
react 修复403页面无法在首页跳转问题
前端·javascript·react.js
郝开1 小时前
6. React useState基础使用:useState修改状态的规则;useState修改对象状态的规则
前端·javascript·react.js
Codigger官方2 小时前
Linux 基金会牵头成立 React 基金会:前端开源生态迎来里程碑式变革
linux·前端·react.js
90后的晨仔2 小时前
🌟 Vue3 + Element Plus 表格开发实战:从数据映射到 UI 优化的五大技巧
前端