jQuery 学习笔记4

最新推荐文章于 2024-01-20 21:49:50 发布

qq_44830920

最新推荐文章于 2024-01-20 21:49:50 发布

阅读量66

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/qq_44830920/article/details/108524621

版权

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		p{
			width:200px;
			margin:0 auto;
			background: burlywood;
			color:white;
			text-align: center;
		
		}
			p.off{
			background:cadetblue;
			font-size:20px;
		}
		</style>
		
	<script type="text/javascript" src="js/jquery-3.5.1.js" ></script>
	<script>
		$(document).ready(function(){
			
			$("p").click(function(){ 
				$(this).toggleClass("off");

			});
			var $p;
			$("#button").click(function(){
				if($p){
					$p.appendTo("body");
					$p=null;
				}else{
//					$p=$("p").detach();//删除p节点 保存事件
//					$p=$('p').remove();//原p节点的事件一并删除
					$p=$('p').empty();//删除p节点的元素 p节点本身还在
				}
				
			})
});
	</script>	
   </head>
<body>
		<p id="A">Hello   <span>subNode</span></p>
		<div>How are</div>
		<p id="B">you!    <span>subNode</span></p>
		<input type="button" id="button" value="删除" />
	</body>
</html>