jQuery 学习笔记3

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

qq_44830920

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

阅读量77

点赞数

文章标签： jquery

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

版权

在这里插入图片描述

在这里插入图片描述
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200910155608230.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODMwOTIw,size_16,c
html()可以解析标签 text(）只可以解析字符串

案例：内部插入

运行结果：在这里插入图片描述
加入“$(“span”).appendTo(“p”);”后把所有的span标签放入p标签里。

运行结果：
在这里插入图片描述
加入：“$("#container").prepend("

");”
在这里插入图片描述

运行结果：
在这里插入图片描述
$(“span:first,span:eq(1)”).prependTo(“p:first”);//选中第一个和第二个span标签放在第一个p节点里

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				font-size: 16px;
				font-family: "微软雅黑";
			}
	p,h3{
		text-align: center;
	}
	.red{
		color:red;
	}
		</style>
		<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
		<script>
			$(document).ready(function(){
				$("body").append('<div id="container"></div>');//向每个匹配的元素内部的结尾处追加结尾处
				$("div").append("<span>桃花潭水深千尺，</span>");
				$("<span/>").text("不及汪伦送我情。").appendTo("body");//将新元素追加到每个匹配元素内部的结尾处
				$("<p/>").appendTo("#container");//div里面增加p节点
				$("span").appendTo("p");//p节点里增加span标签
				$("#container").prepend("<p/>");//向每个匹配的元素内部的结尾处追加开始处
				$("div").prepend("<span>忽闻岸上踏歌声。</span>");//向每个匹配的元素内部的结尾处追加开始处
				$("<span/>").html("李白乘舟将欲行，").prependTo("div");
				$("span:first,span:eq(1)").prependTo("p:first");//选中第一个和第二个<span>放在第一个<p>节点里
				$("<h3/>").html("赠汪伦<br/> <small>[唐]李白</small>").prependTo("body");
				var $a=$("body").html();
				alert($a);
				$("span").hover(
					function(){
						$(this).toggleClass("red");
					},
					function(){
						$(this).toggleClass("red");
					}
					
				)
				$("<div>",{"class":"test", //创建一个新的元素并增加样式类
					   "text":"Click me!",
					   "click":function(){
					   	$(this).toggleClass("red");
					   }
					   }).appendTo("body");
					  
			})
		</script>
	</head>
	<body>
	</body>
</html>

运行结果：
在这里插入图片描述

案例：外部插入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
		<script>
		$(document).ready(function(){
		
			$("body").append('<div id="container">我在中间</div>');//在body内部结尾处插入 div
			$("#container").after('<div id="foot">我在中间的尾部插入</div>');
			$("#container").before('<div id="head">我在中间头部插入</div>');
			$("<p/>").text("我在中间的后面插入了<p>节点").insertAfter("#container");
			$("<p/>").text("我在尾部的前面插入了<p>节点").insertBefore("#foot");
       })
		</script>
	</head>
	<body>
	</body>
</html>