data自定义属性在jQuery中的用法

最新推荐文章于 2024-10-14 22:08:45 发布

wei_ke_zhi

最新推荐文章于 2024-10-14 22:08:45 发布

阅读量6.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： jQuery

本文链接：https://blog.youkuaiyun.com/wei_ke_zhi/article/details/82221724

jQuery 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了HTML文档中data-自定义属性的使用规则，包括大小写处理、获取方式等。如HTML中不区分大小写，js获取时大小写有不同规则。还阐述了data()和attr()的区别，涉及传参要求、数据类型、操作方式及缓存情况等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

（1）如果在HTML文档中设置的data-自定义属性的单个字符串的名称的属性中若有大写值，在js文件中获取时只能用小写的形式获取。如：

HTML中data-Role，获取当时为$(node).data("role");

（2）如果在HTML中设置data-role和data-Role是一样的，html属性不区分大小写。然后我们从验证结果中可以看出，js只会找到第一个与其匹配就直接返回。

（3）如果用js来设置data属性，那么如果你定义的是大写的格式，则访问也必须是大写的形式。

$(".test").data("UP",123);
console.log($(".test").data("UP"));//返回123
console.log($(".test").data("up"));//返回undefined

（4）如果我们就是想要data-Role属性，则可以使用第三种用法：

$(".test").data("Role",2);
console.log($(".test").data("Role"));//输出会返回2

实验代码如下：


<body>
	<div class="test" data-role="1" data-Role="2" data-then-value="3" data-options='{"name" : "john"}'></div> 
</body>
</html>
<script src="jquery-1.11.3.js"></script>
<script>
	$(function() {
		console.log($(".test").data("role"));
		console.log($(".test").data("Role"));
		console.log($(".test").data("thenValue"));
		console.log($(".test").data("thenvalue"));
		console.log($(".test").data("options"));
		$(".test").data("UP",123);
		console.log($(".test").data("UP"));
		console.log($(".test").data("up"));
</script>