jQuery修改data-options的方法是什么
Admin 2022-11-01 群英技术资讯 896 次浏览
在实际应用中,我们有时候会遇到“jQuery修改data-options的方法是什么”这样的问题,我们该怎样来处理呢?下文给大家介绍了解决方法,希望这篇“jQuery修改data-options的方法是什么”文章能帮助大家解决问题。Html5 data-* 属性定义和用法:
data-* 属性用于存储页面或应用程序的私有自定义数据。
data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。
存储的(自定义)数据能够被页面的 JavaScript 中利用,以创建更好的用户体验(不进行 Ajax 调用或服务器端数据库查询)。
data-* 属性包括两部分:
属性名不应该包含任何大写字母,并且在前缀 "data-" 之后必须有至少一个字符
属性值可以是任意字符串
修改方法:
jquery:
$div.attr("data-options", "selected:false");
attr() 方法设置或返回被选元素的属性和值。
当该方法用于返回属性值,则返回第一个匹配元素的值。
当该方法用于设置属性值,则为匹配元素设置一个或多个属性/值对。
语法为
返回属性的值:
$(selector).attr(attribute)
设置属性和值:
$(selector).attr(attribute,value)
扩展知识:
1.使用getAttribute setAttribute 方法
div.setAttribute('data-options',{/*数据*/});
div.getAttribute("data-options");
2.使用dataset属性返回一个集合
div.dataset --> DOMStringMap { options:"{\"name\":\"John\"}", hidden:"true", lastValue:"43"}
可以访问,添加,删除
div.dataset.hidden div.dataset.newAttr = "123" delete div.dataset.hidden
3.使用jquery的data方法
.data( key, value ) .data( key, value ) .data( obj ) --> 设置多个键值对 .data( key ) .data( key ) .data() -->返回一个集合
jQuery比较特殊的是,它会将返回值字符串自动转换为对应的数据类型。
比如上面的 $("div").data() --> {options : {"name":"John"}, hidden: true, lastValue: 43 }
注意:对于dataset属性和jQuery的data方法: data- 属性名如果包含了连字符,例如:data-last-value ,连字符将被去掉,并转换为驼峰式的命名,前面的属性名转换后应该是:lastValue 。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
本篇文章带大家详解package.json和package-lock.json文件,希望对大家有所帮助!
这篇文章主要为大家介绍了定时器在页面最小化时不执行的实现示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
本篇文章给大家带来了关于javascript的相关知识,其中主要整理了Number对象的相关问题,Number 对象是原始数值的包装对象,Number 创建方式 new Number(),下面一起来看一下,希望对大家有帮助。
最近接触了vue.js,一度非常好奇vue.js是如何监测数据更新并且重新渲染页面,这篇文章主要给大家介绍了关于Vue源码学习之响应式是如何实现的相关资料,需要的朋友可以参考下
本文主要介绍了vue前端RSA加密java后端解密的方法实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008