JS JQuery获取data-*属性值方法解析


Posted in jQuery onSeptember 01, 2020

下面就详细介绍四种方法获取data-*属性的值

<li id="getId" data-id="122" data-vice-id="11">获取id</li>

需要获取的就是data-id 和 dtat-vice-id的值

一:getAttribute()方法

const getId = document.getElementById('getId');
// //getAttribute()取值属性
console.log(getId.getAttribute("data-id"));//122
console.log(getId.getAttribute("data-vice-id"));//11
// //setAttribute()赋值属性
getId.setAttribute("data-id","48");
console.log(getId.getAttribute("data-id"));//48

二:dataset()方法

//data-前缀属性可以在JS中通过dataset取值,更加方便
console.log(getId.dataset.id);//112
//data-vice-id连接取值使用驼峰命名法取值 
console.log(getId.dataset.viceId);//11

//赋值
getId.dataset.id = "113";//113
getId.dataset.viceId--;//10

//新增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
var viceId = $("#getId").data("vice-id"); //11
//赋值
$("#getId").data("id","100");//100

jquery data 是一种缓存机制

用法如下:

data()方法

//HTML代码 <div id="myDiv" data-appid="123" data-myname="lsxj" data-app-id="456" data-my-name="secondname"></div>

//获取属性
var appid = $("#myDiv").data("appid"); //123
var app-id = $("#myDiv").data("app-id"); //456

//属性赋值 $("#myDiv").data("appid","666");

//最终HTML代码 <div id="myDiv" data-appid="123" data-myname="lsxj" data-app-id="456" data-my-name="secondname"></div>

需要注意的是,data()的值进行修改并不会影响到DOM元素上的data-*属性的改变。data()的本质其实是将一个 “cache” 附加到了对象上,并使用了一个特殊的属性名称。

所以上述代码中,虽然对div进行了data()赋值操作,但HTML代码中div的data-appid的值仍然为123,因为data()只是修改了缓存的那个值,此时进行$('#myDiv').data("appid")的操作,输出的结果为666.

四:jquery attr()方法

var id = $("#getId").attr("data-id"); //122
var viceId = $("#getId").attr("data-vice-id"); //11
//赋值
$("#getId").attr("data-id","100");//100

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
jQuery中的deferred使用方法
Mar 27 jQuery
jQuery插件之validation插件
Mar 29 jQuery
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
webpack写jquery插件的环境配置
Dec 21 jQuery
jquery实现左右轮播切换效果
Jan 01 jQuery
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
浅谈JS和jQuery的区别
Mar 27 jQuery
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
jquery图片预览插件实现方法详解
Jul 18 jQuery
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
jQuery实现动态加载瀑布流
Sep 01 #jQuery
js和jquery判断数据类型的4种方法总结
Aug 28 #jQuery
jQuery编写QQ简易聊天框
Aug 27 #jQuery
jQuery实现简单QQ聊天框
Aug 27 #jQuery
基于jquery实现彩色投票进度条代码解析
Aug 26 #jQuery
Jquery 获取相同NAME 或者id删除行操作
Aug 24 #jQuery
jQuery实现评论模块
Aug 19 #jQuery
You might like
一个目录遍历函数
2006/10/09 PHP
php面向对象全攻略 (十) final static const关键字的使用
2009/09/30 PHP
php修改上传图片尺寸的方法
2015/04/14 PHP
php实现的数组转xml案例分析
2019/09/28 PHP
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
2006/11/07 Javascript
JavaScript获取GridView中用户点击控件的行号,列号
2009/04/14 Javascript
IE与Firefox在JavaScript上的7个不同写法小结
2009/09/14 Javascript
select标签模拟/美化方法采用JS外挂式插件
2013/04/01 Javascript
邮箱下拉自动填充选择示例代码附图
2014/04/03 Javascript
jQuery中replaceWith()方法用法实例
2014/12/25 Javascript
详解webpack自动生成html页面
2017/06/29 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
2017/09/06 Javascript
详解用Node.js实现Restful风格webservice
2017/09/29 Javascript
vue中动态绑定表单元素的属性方法
2018/02/23 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
2020/12/03 Vue.js
python定时器使用示例分享
2014/02/16 Python
python使用WMI检测windows系统信息、硬盘信息、网卡信息的方法
2015/05/15 Python
Django实现登录随机验证码的示例代码
2018/06/20 Python
python对日志进行处理的实例代码
2018/10/06 Python
python 通过麦克风录音 生成wav文件的方法
2019/01/09 Python
Python3.5装饰器原理及应用实例详解
2019/04/30 Python
Python中psutil的介绍与用法
2019/05/02 Python
pycharm通过ssh连接远程服务器教程
2020/02/12 Python
Python操作Jira库常用方法解析
2020/04/10 Python
CSS3实现鼠标悬停显示扩展内容
2016/08/24 HTML / CSS
StubHub墨西哥:购买和出售您的门票
2016/09/17 全球购物
阿联酋航空官方网站:Emirates
2017/10/17 全球购物
this关键字的含义
2015/04/08 面试题
品牌推广活动策划方案
2014/08/19 职场文书
房产转让协议书(2014版)
2014/09/30 职场文书
2015毕业生简历自我评价
2015/03/02 职场文书
走进毛泽东观后感
2015/06/04 职场文书
实践论读书笔记
2015/06/29 职场文书
通过shell脚本对mysql的增删改查及my.cnf的配置
2021/07/07 MySQL
关于React Native使用axios进行网络请求的方法
2021/08/02 Javascript
开发微信小程序之WXSS样式教程
2022/04/18 HTML / CSS