jQuery修改data-options的方法是什么
Admin 2022-11-01 群英技术资讯 671 次浏览
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进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
这篇文章给大家分享的是JavaScript中位运算符。小编觉得挺实用的,因此分享给大家做个参考。JavaScript中的有7种位运算符,文中的示例代码介绍得很详细,有需要的朋友可以参考,接下来我们一起来看看它们的使用。
用JS怎样做鼠标经过表格变色的效果?也就是鼠标经过表格的某行时,这行变色显示的效果,这样的好处的就是一目了然看到所选的信息,小编觉得比较有用,因此分享给大家做个参考,感兴趣的朋友就继续往下看吧。
一分钟理解JavaScript闭包,关于JavaScript闭包的内容介绍了很多,本文带着大家快速理解什么是JavaScript闭包,感兴趣的小伙伴们可以参考一下
目录前言关于边框关于控制点本章小结前言在上一章中我们已经搞定了下层画布,也就是能够对物体进行绘制了,现在就可以开始搞搞上层交互了。不过在和画布产生交互之前,我们还要做一件事情,就是让物体支持边框和控制点的绘制,亦即物体被选中时的状态,就像下面这样:这样一来如果要对物体进行一些操作,那就变成了对上图中的红色和蓝色边框进行
这篇文章主要介绍了总结分享10个JavaScript代码优化小tips,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008