data、attr、prop的一些坑

最新推荐文章于 2020-08-21 10:40:16 发布

kongjunchao159

最新推荐文章于 2020-08-21 10:40:16 发布

阅读量573

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/kongjunchao159/article/details/64905935

版权

jQuery 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

在一个项目中使用jquery的data方法和attr方法操作元素的属性时遇到了一些坑，特此整理下data、attr、prop的区别

问题来源：

某个元素具有data-key属性，js使用xx.attr('data-key')操作该元素，在chrome开发者工具中查看Elements，该元素的data-key属性确实更改为新赋予的值，但是在用xx.data('key')取值的时候，发现还是原先最开始的值，从而导致一系列BUG

测试：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
</head>
<body>
	<div id="div" data-key="1"></div>
	<script src="js/jquery-3.1.1.min.js"></script>
	<script>
		//1
		console.log($('#div').data('key'));				//1		number类型
		console.log($('#div').attr('data-key'));			//1		string类型

		//2
		$('#div').data('key', '2');
		console.log($('#div').data('key'));				//2		string类型
		$('#div').data('key', 2);
		console.log($('#div').data('key'));				//2		number类型

		//3
		$('#div').attr('data-key', '3');
		console.log($('#div').data('key'));				//2		number类型
		console.log($('#div').attr('data-key'));			//3     	string类型

		//4
		$('#div').attr('name', '4');

		//5
		$('#div').prop('age', '5');
		console.log($('#div').prop('age'));				//5		string类型
		console.log($('#div').attr('age'));				//undefined
		console.log($('#div').data('age'));				//undefined

		//6
		$('#div').prop('data-key', '6');
		console.log($('#div').prop('data-key'));			//6		string类型
		console.log($('#div').data('key'));				//2		number类型
	</script>
</body>
</html>

第一步：使用data取值的时候，返回的是number类型，用attr取值的时候，也可以取到，但取到的值是字符串类型

第二步：赋值的时候的区别

第三步：用attr赋值的时候，去开发者工具查看，确实改过来了，但是再用data输出的时候，却仍然是原先的值，用attr则可以，这里非常容易被开发者工具中的假象所迷惑，需要注意，实际上如果你的data属性和attr属性名字一样，开发者工具中只会保留后一个

第四步：attr赋值一个新名字，开发者工具有显示出来

第五步：prop赋值，开发者工具不显示，但可以通过prop取值，用attr和data不能取，返回undefined

第六步：prop也不会改变最初的data赋值

attr、data、prop区别：

attr取值的时候，永远都是string类型，无论是boolean或者number，需要特别注意，且对大小写不敏感，attr('name')和attr('NAME')实际一样，attr主要用于获取属性

data取值的时候，会对boolean或者number自动进行类型转化，如data-key='true'实际取值等于boolean类型的true，同样data-key='11'等于number类型的11，且赋值的时候，注意是否需要传入引号，如data('key', '1')和data('key', 1)并不一样

另外特别需要注意的是data定义名字的时候，尽量不要使用驼峰定义法，即类似myName这种，实际取值的时候，data('myName')会返回undefined，而data('myname')却可以取到值

prop，用于取值元素固有的属性的时候，即本身就自带的属性，如checked、selected、href、target、id、class等，建议使用prop