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

这篇具有很好参考价值的文章主要介绍了【前端】jquery获取data-*的属性值。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

<div id="getId" data-id="122" >获取id</div>

方法一:dataset()方法

//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()方法

// 取值
var id = $("#getId").data("id"); //122

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

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

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

方法三:jquery attr()方法文章来源地址https://www.toymoban.com/news/detail-724264.html

// 取值
var id = $("#getId").attr("data-id"); //122

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

到了这里,关于【前端】jquery获取data-*的属性值的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • [HTML]Web前端开发技术8(HTML5、CSS3、JavaScript )CSS样式属性,withborder,italic | oblique,indent,padding,——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 CSS属性值中的单位 CSS字体样式 font-size设置字号 字体样式font-style属性 字体系列font-family属性 字体变体

    2024年02月04日
    浏览(69)
  • 简述data-属性的用法(如何设置,如何获取),有何优势?

    (1)data-定义 data- 属性是全局属性,是一类被称为 自定义数据属性 的属性,它能让我们在所有html元素上嵌入自定义数据属性的能 力,并且通过脚本在HTML和DOM之间实现专有数据交换。 (2)data-用法: 属性名不应该包含任何大写字母,并且在前缀 \\\"data-\\\" 之后必须有至少一个字符

    2024年02月16日
    浏览(40)
  • BCSP-玄子前端开发之JavaScript+jQuery入门CH07_ECMAScript 6基础

    4.7.1 ECMAScript 6 简介 ECMAScript 6.0(简称 ES6) 是JavaScript语言的下一代标准 正式发布于2015年6月 目标 使JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言 版本升级 ECMAScript 2015 ECMAScript 2016 ECMAScript 2017 ECMAScript和JavaScript 的关系 前者是后者的规格,后者是前者的

    2023年04月27日
    浏览(51)
  • python_web1(前端开发之HTML、CSS、Bootstap、Javascript、JQuery)

    知识总结: Python_web前端开发 python 安装Flask web框架 pip install flask 简介:templates用来返回html的页面,而非文本。 创建文件index.html 结构如下 index.xml内容如下: web1.py内容如下: 重新运行后: 固定格式:h/div/span/a/img/ul/li/table/input/form 通用的字符编码 meta charset=“UTF-8” div:一个

    2024年04月14日
    浏览(66)
  • 安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作

    1、布置前端页面 2、JS获取提交数据 3、JS对上传格式判断 4、后端对上传数据处理 前端JS进行后缀过滤,后端PHP进行上传处理 架构:html js php - upload.php 安全问题: 1、过滤代码能看到分析绕过 2、禁用JS或删除过滤代码绕过 前端白名单很轻易就能绕过 0、布置前端页面 1、获取

    2024年02月12日
    浏览(53)
  • javaScript 如何获取对象中非空的属性

    要获取JavaScript对象中所有具有值的属性,您可以使用 Object.entries()方法结合Array.prototype.filter()方法。以下是一个示例代码: 在上述示例中,我们定义了一个带有多个属性的对象 obj 。其中, city 属性的值为空字符串。 使用 Object.entries(obj) 可以将一个对象转换为包含  键值对

    2024年02月15日
    浏览(42)
  • JavaScript string对象(属性,方法)获取图片后缀案例 输入和输出结果转换形式案例

    一、创建string对象 var strOb = new String(\\\"abcefg\\\"); var strOb = String(\\\"abcefg\\\"); var strOb = \\\"abcefg\\\"; 二、属性 length    (字符串长度) 三、方法 1、子字符串位置 indexOf(string, [ index]) string : 查找的字符串的内容,必填项 index:开始查找位置,可有可无 返回值:返回值是查找到的子字符串的位

    2024年02月05日
    浏览(53)
  • 【b站咸虾米】jQuery的ajax异步操作 web前端后端分离技术的原理

    课程地址:【jQuery的ajax异步操作 web前端后端分离技术的原理】 https://www.bilibili.com/video/BV1u5411M7ny/?share_source=copy_webvd_source=b1cb921b73fe3808550eaf2224d1c155 通过案例学习ajax异步操作。 介绍 php,前后端不分离的技术。 ajax,实现前后端分离技术。 在之前,要做动态网站,要懂php,ja

    2024年04月15日
    浏览(47)
  • 前端:常用的获取元素位置与元素尺寸的属性与方法

    属性/方法 描述 clientWidth 返回元素内容区的宽度(不包括滚动条、边框和外边距)。对于 box-sizing: border-box 的元素,包含内边距。 clientHeight 返回元素内容区的高度(不包括滚动条、边框和外边距)。对于 box-sizing: border-box 的元素,包含内边距。 offsetWidth 返回元素的总宽度,

    2024年04月13日
    浏览(73)
  • 谷粒商城第十天-获取分类属性分组(前端组件抽取&父子组件交互)

    目录 一、总述 1.1 前端思路 1.2 后端思路 二、前端部分 2.1 将分类树前端代码抽取成一个组件 2.2 使用elementUI的组件实现左右组件功能 2.3 使用事件机制进行组件通信 三、后端部分 四、总结 说一下今天需要实现一个什么样子的功能: 很简单,就是在属性分组的那个页面,左

    2024年02月14日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包