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' 是想要设置的新值。


@漏刻有时

相关推荐
IT_陈寒4 分钟前
Vite打包后的路径问题差点让我改了一天代码
前端·人工智能·后端
禅思院6 分钟前
前端部署“三层漏斗”完全指南:从CI/CD到自动回滚的工程化实战【基石】
前端·架构·前端框架
黄林晴20 分钟前
AI时代终端窗口堆成山?这款工具让我爱不释手
前端
铁皮饭盒21 分钟前
Bun 多线程有多快?postMessage 传输字符串比 Node.js 快 400 倍!
前端·javascript·后端
橙子家10 小时前
浏览器缓存之【身份与会话管理】:Cookies 和 Private state tokens
前端
最新资讯动态11 小时前
HDC 2026 | 对话鲸鸿动能:存量时代,品牌如何夺回营销“主动权”?
前端
最新资讯动态11 小时前
游戏出海,从产品走向体系
前端
最新资讯动态11 小时前
20人团队跑出百万DAU、大厂也来抢量:谁在鸿蒙生态跑出加速度
前端
最新资讯动态11 小时前
千万开发者背后,鸿蒙商业化的B面
前端
爱勇宝13 小时前
AI 时代:智商决定起点,情商决定走多远
前端·ai编程