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实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
jquery中each循环的简单回滚操作
May 05 jQuery
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
jQuery上传插件webupload使用方法
Aug 01 jQuery
jquery使用FormData实现异步上传文件
Oct 25 jQuery
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
详解jQuery如何实现模糊搜索
May 10 jQuery
JQuery属性操作与循环用法示例
May 15 jQuery
jquery实现动态改变css样式的方法分析
May 27 jQuery
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
Jquery滑动门/tab切换实现方法完整示例
Jun 05 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
php 运行效率总结(提示程序速度)
2009/11/26 PHP
php数组去重复数据示例
2014/02/25 PHP
php性能分析之php-fpm慢执行日志slow log用法浅析
2016/10/17 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
JavaScript修改css样式style动态改变元素样式
2013/12/16 Javascript
Javascript:为input设置readOnly属性(示例讲解)
2013/12/25 Javascript
js判断undefined类型示例代码
2014/02/10 Javascript
关闭时刷新父窗口两种方法
2014/05/07 Javascript
js事件监听机制(事件捕获)总结
2014/08/08 Javascript
node.js中的emitter.emit方法使用说明
2014/12/10 Javascript
jQuery中:text选择器用法实例
2015/01/03 Javascript
深入学习JavaScript中的Rest参数和参数默认值
2015/07/28 Javascript
javascript实现简单的页面右下角提示信息框
2015/07/31 Javascript
JavaScript类型系统之Object详解
2016/01/07 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
2016/10/24 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
2016/10/28 Javascript
js代码延迟一定时间后执行一个函数的实例
2017/02/15 Javascript
jQuery事件对象的属性和方法详解
2017/09/09 jQuery
JS函数节流和防抖之间的区分和实现详解
2019/01/11 Javascript
npm全局环境变量配置详解
2020/12/15 Javascript
[01:02:47]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
Python实现的数据结构与算法之队列详解
2015/04/22 Python
用Python进行行为驱动开发的入门教程
2015/04/23 Python
判断python字典中key是否存在的两种方法
2018/08/10 Python
python3 实现对图片进行局部切割的方法
2018/12/05 Python
numpy基础教程之np.linalg
2019/02/12 Python
python实现动态数组的示例代码
2019/07/15 Python
python中struct模块之字节型数据的处理方法
2019/08/27 Python
利用python计算时间差(返回天数)
2019/09/07 Python
python3 写一个WAV音频文件播放器的代码
2019/09/27 Python
Giglio德国网上精品店:奢侈品服装和配件
2016/09/23 全球购物
专业毕业生个性的自我评价
2013/10/03 职场文书
高二美术教学反思
2014/01/14 职场文书
青年文明号创建承诺
2014/03/31 职场文书
机械工程师岗位职责
2014/06/16 职场文书
创业开店,这样方式更合理
2019/08/26 职场文书