jQuery修改data-options的方法是什么
Admin 2022-11-01 群英技术资讯 383 次浏览
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进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
React 中的事件,是对原生事件的封装,叫做合成事件。这篇文章主要通过几个简单的示例为大家详细介绍一下React中的合成事件,感兴趣的可以了解一下
JS模拟实现串行加法器,下文有实例供大家参考,对大家了解操作过程或相关知识有一定的帮助,而且实用性强,希望这篇文章能帮助大家,下面我们一起来了解看看吧。
在本篇内容里小编给大家整理的是一篇关于nodejs中的异步编程知识点详解内容,有兴趣的朋友们可以学习下。
这篇文章主要介绍了JavaScript树结构深度优先算法,树结构可以说是前端中最常见的数据结构之一,比如说DOM树、级联选择、树形组件,更多相关内容需要的小伙伴可以参考一下
这篇文章主要给大家介绍了关于VUE+Canvas实现简单五子棋游戏的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008