HTML5中自定义数据属性data-*属性(3)jq如何操作data-*

  1. HTML5中自定义数据属性(1)data-*属性(1)data-*属性的使用
  2. HTML5中自定义数据属性(2):data-*的使用
  3. HTML5中自定义数据属性data-属性(3)jq如何操作data-

在 jQuery 中,可以使用 data() 方法来获取 data-* 属性的值。这个方法可以读取或设置 HTML 元素上的 data-* 属性。

如果想获取 data-* 属性的值,你可以这样做:

javascript 复制代码
var value = $(selector).data('your-data-attribute-name');

在上面的代码中,需要将 selector 替换为你要获取 data-* 属性的 HTML 元素的选择器,而 'your-data-attribute-name' 应该被替换为你想要获取的 data-* 属性的名称。

例如,如果有一个像这样的 HTML 元素:

html 复制代码
<div id="myDiv" data-my-attribute="123">Hello, world!</div>

可以使用以下 jQuery 代码来获取 data-my-attribute 的值:

获取值

javascript 复制代码
var value = $('#myDiv').data('my-attribute'); // value now equals '123'

设置值

要设置 data-my-attribute 的值,使用 data() 方法,像这样:

javascript 复制代码
$('#myDiv').data('my-attribute', 'new value');

在这段代码中,'my-attribute' 是想要设置的 data-* 属性的名称,'new value' 是想要设置的新值。


@漏刻有时

相关推荐
雪碧聊技术6 分钟前
Vue + Element Plus 实现文本溢出显示省略号及悬浮提示
前端·javascript·css·vue.js·文本溢出省略
eric-sjq8 分钟前
0.6B 前端生成模型本地部署实战:消费级显卡跑通 WanlyFrontend 全流程
前端·本地部署
小妖6661 小时前
设置了 box-sizing: border-box; 不管用,下边框还是被挤压没了
前端·css·html
雪隐2 小时前
个人电脑玩AI-16让5060 Ti给你打工——5060Ti 16G 跑 MiniMax-Music-3:从下载到 60s 出歌的全流程
前端·人工智能·后端
CAD老兵3 小时前
让 AI Coding Agent 直接访问 CAD 文档:GitMCP 实战指南
前端·人工智能·github
程序员鱼皮3 小时前
DeepSeek Harness 最新邪修曝光!被吹成核弹的极简模式,真的夯吗?
前端·后端·ai编程
无己心3 小时前
面向多平台 AI 搜索引擎的适配层架构设计
前端·人工智能·搜索引擎·ai·1024程序员节
袅沫3 小时前
Nginx中部署多个前端项目——区分路径
服务器·前端
Asize3 小时前
为什么写代码前要先规划组件树?Next.js + Redis 笔记系统实战
前端·javascript·next.js
用户921080262863 小时前
6. 数据大屏 WebSocket 稳定性优化:心跳检测、断点续传和消息去重
前端