jQuery筛选&文档处理（三）

本文主要是介绍jQuery筛选&文档处理（三），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一，查找

二，文档处理

1.内部插入

(1)append(content/fn)向当前元素追加内部的后置内容

（2)prepend(content/fn):将内容添加到指定元素的前面

2.外部插入

(1)after(content/fn)：在当前元素之后追加元素

(2)before(content/fn)：在当前元素之前追加元素

3.包裹

(1)wrap():将匹配到的元素用结构化方法包裹起来，一对一包装（匹配到几个元素包裹几次）

(2)unwrap()：除了当前元素外

(3)wrapAll()：将所有匹配到的元素包装到一起（包装一次）

4.替换

(1)replaceWith():后替换前

(2)replaceAll():前替换后

5.删除

(1)empty():删除匹配到的元素中的所有子节点（不包括匹配的元素）

(2)remove():删除匹配到的元素中的所有子节点（包括匹配的元素）

(3)detach():在jQuery对象中并没有删除，只是界面没有了，数据和事件之类任然存在。

6.复制

clone（deepEven）

7.文档处理案例

一，查找

children()	子标签中查找
find()	后代标签中查找
parent()	父标签
prevAll()	前面的所有兄弟标签
nextAll()	后面的所有兄弟标签
siblings()	前后所有的兄弟标签

代码展示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p><span>Hello</span>, how are you?</p>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$("p").find("span"); //结果为[ <span>Hello</span> ]
			$("div:first").nextAll().addClass("after");
			//结果为[ <div class="after"></div>, <div class="after"></div>, <div class="after"></div> ]

			//查找span标签的父类元素
			console.log($("span").parent()); //得到span标签的父类jquery对象
			console.log($("span").parents()); //得到span标签的所有父类jquery对象

			//给最后一个之前的所有div加上一个类
			$("div:last").prevAll().addClass("before");
			//结果如下
			//[ <div class="before"></div>, <div class="before"></div>, <div class="before"></div> ]

			console.log($("div").siblings());
			//结果为[<p><span>Hello</span>, how are you?</p> <div></div> <div></div> <div></div>]

			console.log($("p").children()); //结果为<span>Hello</span>
		</script>
	</body>
</html>

二，文档处理

1.内部插入

        <!-- 处理文档 -->
		<div class="a">
			<div class="b"></div>
		</div>
		<div class="small"></div>

(1)append(content/fn)向当前元素追加内部的后置内容

            $(".small").append($(".a"));//将a元素放在small元素的后面
			//回调函数
			$(".small").append(function(index,html){
				console.log(index,html);
				//index返回的是当前元素的小标
				//HTML返回的是在当前元素的后面的元素
				//在此处返回就是<div class="a"><div class="b"></div></div>
			})

与append()方法类型的一个方法appendTo()：将当前所有元素追加到确定的一个集合内部反向

	//下面两行代码产生的效果是一致的
    $(".a").append($(".small"));
	$(".small").append($(".a"));

（2)prepend(content/fn):将内容添加到指定元素的前面

	        $(".small").prepend($(".a"));
			$(".small").prepend(function(index, html) {
				console.log(index, html);
				//在此处返回就是<div class="a"><div class="b"></div></div>
			})

类似的还有prependTo(content):将当前所有元素前置追加到确定的一个集合内部反向（与prepend()是一个颠倒的效果）

2.外部插入

(1)after(content/fn)：在当前元素之后追加元素

            $(".a").after($(".small"));
			$(".a").after(function(index,html) {
				console.log(index,html);
				//控制台输出的是0  <div class="b"></div>
			})

insertAfter(content)将当前所有元素追加到确定元素的后面反向

(2)before(content/fn)：在当前元素之前追加元素

            $(".a").before($(".small"));
			$(".a").before(function(index,html) {
				console.log(index,html);
				//控制台输出的是0  <div class="b"></div>
			})

insertBefore(content)将当前所有元素追加到确定元素的后面反向

3.包裹

        <p class="a">hello world</p>
		<p class="b"></p>
		<ul>
			<li></li>
		</ul>

(1)wrap():将匹配到的元素用结构化方法包裹起来，一对一包装（匹配到几个元素包裹几次）

用原先div的内容作为新div的class，并将每一个元素包裹起来

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="container">
			<div class="inner">Hello</div>
			<div class="inner">Goodbye</div>
		</div>
		<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$('.inner').wrap(function() {
				return '<div class="' + $(this).text() + '" />';
			});
			//结果为<div class="container">
			//   <div class="Hello">
			//     <div class="inner">Hello</div>
			//   </div>
			//   <div class="Goodbye">
			//     <div class="inner">Goodbye</div>
			//   </div>
			// </div>
		</script>
	</body>
</html>

(2)unwrap()：除了当前元素外

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<p>Hello</p>
			<p>cruel</p>
			<p>World</p>
		</div>
		<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$("p").unwrap();
			//结果如下
			// <p>Hello</p>
			// <p>cruel</p>
			// <p>World</p>
		</script>
	</body>
</html>

(3)wrapAll()：将所有匹配到的元素包装到一起（包装一次）

//用一个生成的div将所有段落包裹起来
$("p").wrapAll(document.createElement("div"));

4.替换

(1)replaceWith():后替换前

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>Hello</p><p>cruel</p><p>World</p>
		<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$("p").replaceWith("<b>Paragraph. </b>");
			//结果如下
			//<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>
		</script>
	</body>
</html>

(2)replaceAll():前替换后

5.删除

(1)empty():删除匹配到的元素中的所有子节点（不包括匹配的元素）

(2)remove():删除匹配到的元素中的所有子节点（包括匹配的元素）

(3)detach():在jQuery对象中并没有删除，只是界面没有了，数据和事件之类任然存在。

6.复制

clone（deepEven）

参数deepEven为：

false（浅克隆，只是克隆DOM元素，默认值）

true（深克隆，克隆DOM元素外，还克隆了事件等）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<b>Hello</b><p>, how are you?</p>
		<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//克隆所有b元素（并选中这些克隆的副本），然后将它们前置到所有段落中
			$("b").clone().prependTo("p");
			//结果如下
			//<b>Hello</b><p><b>Hello</b>, how are you?</p>
		</script>
	</body>
</html>

7.文档处理案例

菜单选项收缩

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<style>
			body {
				/* 100%视图高度 */
				height: 100vh;
				/* 实现渐变色背景 */
				background: linear-gradient(200deg, #8A2BE2, #FFf, #FFA07A);
			}

			li {
				/*去除选项前面的点点*/
				list-style: none;
			}

			ul {
				/*调整了内边距*/
				padding: 0px;
			}

			ol {
				/*当前是不显示*/
				display: none;
			}

			/*激活的样式*/
			.active {
				/* background: blue; */
				color: red;
			}

			/*激活的时候  它地下的ol*/
			.active ol {
				display: block;
			}

			#H1 {
				/* 设置h1标签居中 */
				display: flex;
				justify-content: center;
				align-items: center;
			}

			#H1 h1 {
				/* 设置字体的样式 */
				color: lightsalmon;
				/* 设置字体间距 */
				letter-spacing: 6px;
			}
		</style>
	</head>
	<body>
		<div id="H1">
			<h1>热门编程语言</h1>
		</div>
		<ul>
			<li>
				<p>Java</p>
				<ol>
					<li>JavaBase</li>
					<li>JavaAPI</li>
					<li>JavaOop</li>
					<li>JavaAdvance</li>
					<li>JavaSwing</li>
				</ol>
			</li>
			<li>
				<p>数据库</p>
				<ol>
					<li>SQLserver</li>
					<li>Oracle</li>
					<li>MySQL</li>
				</ol>
			</li>
			<li>
				<p>Python</p>
				<ol>
					<li>pyBase</li>
					<li>pyReptile</li>
				</ol>
			</li>
		</ul>
		<script src="js/jquery-3.5.1.js"></script>
		<script>
			//给所有的菜单设置点击事件
			$("p").click(function() {
				$("p>ol").fadeToggle(1000)
				//this是js对象
				let li = $(this).parents("li")
				//移除其他(兄弟)菜单的激活样式
				li.siblings().removeClass("active")
				//给菜单添加激活的样式
				if (li.hasClass("active")) {
					return li.removeClass("active")
				}
				li.addClass("active")
			})
			
			//实现动画淡化
			
		</script>
	</body>
</html>

图片展示：

学会文档处理的方法，让我们在处理元素的时候更加便捷了，好啦，下期再见哈！

这篇关于jQuery筛选&文档处理（三）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

jQuery教程