ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

jQuery筛选&文档处理（三）

2022-03-20 23:31:39  阅读：185  来源： 互联网

标签：jQuery index 匹配 元素 content 文档 small 筛选 Hello


 目录：

目录

一，查找

二，文档处理

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,index,匹配,元素,content,文档,small,筛选,Hello
来源： https://blog.csdn.net/m0_67376124/article/details/123619609

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有