从js实例学习jQuery———jQuery中attr()和prop()

最新推荐文章于 2022-09-17 15:16:51 发布

学号Java

最新推荐文章于 2022-09-17 15:16:51 发布

阅读量272

点赞数 2

分类专栏：前端基础

本文链接：https://blog.csdn.net/qq_42147171/article/details/104949633

版权

前端基础专栏收录该内容

28 篇文章 0 订阅

订阅专栏

jQuery中attr和prop

1.代码
2.在控制台的显示
3.总结

1.代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="jquery-3.1.1.min.js" ></script>
	</head>
	<body> 
		<form action="">
			<input id="aa" type="checkbox" value="点hahah" test="hah"/>hello
		</form>
		<script type="text/javascript">
			//.attr修改Value的值并且获取value的值
			$("#aa").attr("value","点击");
			console.log($("#aa").attr("value"));
			
			//.prop修改Value的值并且获取value的值
			$("input").prop("value","6666");
			console.log($("input").prop("value"));
			
			//.attr添加indexs并且获取indexs的值
			$("input").attr("indexs","66666");
			console.log($("input").attr("indexs"));
			
			
			//.prop添加ha并且获取ha的值
			$("input").prop("ha","666667777");
			console.log($("input").prop("ha"));
			
			
			//.attr和.prop分别获取checkbox的状态
			console.log($("input").attr("checked"));
			///attr不能获取checkbox的默认状态
			console.log($("input").prop("checked"));
			
			//获取test
			console.log($("input").attr("test"));
			console.log($("input").prop("test"));
			
		</script>
	</body>
</html>

2.在控制台的显示

在这里插入图片描述

3.总结

1.attr和prop都可以添加和获取自己添加的元素，但是prop添加的标签中本身不存在的元素实在标签中找不到的，但是可以通过console.log()输出出来
2.prop可以获取selected和checked等默认属性，attr不行
3.attr可以获取标签本身不存在但是已经在标签中写好的属性比如上面的test而prop不可以