jQuery (筛选&文档处理)

最新推荐文章于 2023-05-14 11:10:28 发布

歐陽。

最新推荐文章于 2023-05-14 11:10:28 发布

阅读量1.4k

点赞数 9

分类专栏： jQuery 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/weixin_65211978/article/details/123582760

版权

jQuery 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

大家好，我是小陽，我又来了，今天我给大家带来的是jQuery的筛选and文档处理，希望能给大家带来一些知识上的帮助！

一、思维导图

二、jQuery的筛选

三、jQuery的文档处理

一、思维导图

首先，我们先看看这期内容的思维导图理清一下思路，再通过我这篇文章加深并理解代码

ok，我们现在进入今日学习主题，今日主要学习的是jQuery的筛选和jQuery的文档处理

二、jQuery的筛选

筛选分为两个部分：

一、过滤：在jQuery对象数组中，过滤出一部分元素来

first()：获取匹配的第一个元素

last()：获得匹配的最后一个元素

eq(N)：获取匹配的第N或-N个元素

filter(selector)：筛选出与指定表达式匹配的元素集合

has(selector)：筛选出包含特定特点的元素的集合

not(selector)：筛选出不包含特定特点的元素的集合

案例所需代码：

<body>
		<h2>jQuery03：筛选、文档处理</h2>
		<!-- 筛选和查找案例 -->
		<ul>
			<li>1</li>
			<li title="a">2</li>
			<li title="b">3</li>
			<li title="a"><span><b>4</b></span></li>
			<li title="b"><span>5</span></li>
			<ol>
				<li>6</li>
				<li>7</li>
			</ol>
			<span>8</span>
		</ul>
	</body>

案例1：演示过滤所有的方法 (我们jQuery一所学选择器的也可以用上)
1.1从元素数组中找到第一个元素 first()：获取匹配的第一个元素代码：

	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入外部jQuery类库 -->
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
            $(function() {
			//--过滤出指定表达式匹配的元素
			// 获取ul中所有的li元素，然后找到第一个元素
			$("ul>li:first").css("background","pink");//过滤选择器
			$("ul>li").first().css("background","pink");//二者都可以用				
			})

		</script>
	</head>

1.2 元素数组中找到最后一个元素 last()：获得匹配的最后一个元素代码：

	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入外部jQuery类库 -->
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				//--过滤出指定表达式匹配的元素
				// 找到最后一个元素
				$("ul>li").last().css("background", "pink");
			})
		</script>
	</head>

1.3 从元素数组中找到指定的某一个元素 eq(N)：获取匹配的第N或-N个元素代码：

	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入外部jQuery类库 -->
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
			// 找到指定的某一个元素
			$("ul>li:eq(2)").css("background","pink");	
			$("ul>li").eq(-4).css("background","pink");	//"-":倒数第几个
			})
		</script>
	</head>

1.4从元素数组中找到属性title为a/不为a的元素 filter(selector)：筛选出与指定表达式匹配的元素集合代码：

	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入外部jQuery类库 -->
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				//--过滤出指定表达式匹配的元素集合
				// 找到属性title为a的元素
				$("ul>li").filter("[title=a]").css("background", "pink");
				
				// 找到属性title不为a的元素
				$("ul>li").filter("[title][title!=a]").css("background", "pink");
			})
		</script>
	</head>

1.5 从元素数组中筛选出有title属性的元素集合 filter(selector)：筛选出与指定表达式匹配的元素集合代码：

	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入外部jQuery类库 -->
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				// 筛选出有title属性的元素集合
				$("ul>li").filter("[title]").css("background", "pink");
			})
		</script>
	</head>

1.6 从元素数组中筛选出有<span>标签的元素集合 has(selector)：筛选出包含特定特点的元素的集合代码：

	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入外部jQuery类库 -->
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
			// 筛选出有<span>标签的元素集合
			$("ul span").css("background","pink");
			$("ul>li").has("span").css("background","pink");
			})
		</script>
	</head>

1.7 从元素数组中筛选出没有title属性的元素集合 not(selector)：筛选出不包含特定特点的元素的集合代码：

	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入外部jQuery类库 -->
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				// 筛选出没有title属性的元素集合
				$("ul>li").not("[title]").css("background", "pink");
			})
		</script>
	</head>

二、查找：在jQuery对象数组中，根据选择器查找孩子、父母、兄弟标签

children()：子标签中找

find()：后代标签中找

parent()：父标签

prevAll()：前面所有的兄弟标签

nextAll()：后面所有的兄弟标签

siblings()：前后所有的兄弟标签

案例2：演示查找所有的方法
2.1 查找ul的所有子标签,并且指定为li子标签 children()：子标签中找代码：

	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入外部jQuery类库 -->
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
			// 查找ul的所有子标签,并且指定为li子标签
			//$("ul>li").css("background","pink");
			$("ul").children("li").css("background","pink");
			})
		</script>
	</head>

2.2 查找ul下面所有的span标签 find()：后代标签中找代码：

	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入外部jQuery类库 -->
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				// 查找ul下面所有的span标签
				$("ul span").css("background", "pink"); //li占一行 span占所选空间
				$("ul").find("span").css("background", "pink");
			})
		</script>
	</head>

2.3 查找b标签的父元素标签 parent()：父标签代码：

	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入外部jQuery类库 -->
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
			// 查找b标签的父元素标签
			$("b").parent().css("background","pink");
			})
		</script>
	</head>

2.4查找第三个li标签前面所有的兄弟标签 prevAll()：前面所有的兄弟标签代码：

	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入外部jQuery类库 -->
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
			// 查找第三个li标签前面所有的兄弟标签
			$("ul>li").eq(2).prevAll().css("background","pink");
			})
		</script>
	</head>

2.5 查找第三个li标签后面所有的兄弟标签,并且只能是li标签 nextAll()：后面所有的兄弟标签代码：

	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入外部jQuery类库 -->
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
			// 查找第三个li标签后面所有的兄弟标签,并且只能是li标签
			$("ul>li").eq(2).nextAll("li").css("background","pink");
			})
		</script>
	</head>

2.6 查找第三个li标签所有的兄弟标签 siblings()：前后所有的兄弟标签代码：

	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入外部jQuery类库 -->
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				// 查找第三个li标签所有的兄弟标签
				$("ul>li").eq(2).siblings().css("background","pink");
			})
		</script>
	</head>

三、jQuery的文档处理

文档处理分为增删改 (查就是过滤)

一、增：分为内部插入和外部插入

内部插入：

插入后面： append()：将内容添加到指定的元素后面 & appendTo()：和append()颠倒

插入前面： prepend()：将内容添加到指定元素前面 & prependTo():和prepend()颠倒

外部插入：
after()：在匹配元素之后插入内容 & before()：在匹配元素之前插入内容

案例3：演示文档处理-增加
3.1插入到最后面(给ul中最后一个li中插入一个a) append()：将内容添加到指定的元素后面代码：

	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入外部jQuery类库 -->
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
			//--内部插入(前面和后面)
			//   插入到最后面(给ul中最后一个li中插入一个a标签)
			$("ul>li").last().append("<a href='heppt.www.baidu.com'>哈哈哈</a>")//在最后面一个li插入a标签
			})
		</script>
	</head>

3.2 插入到最后面(给ul中最后一个li中插入一个a),使用appendTo() appendTo()：和append()颠倒代码：

	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入外部jQuery类库 -->
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
			//--内部插入(前面和后面)
			//   插入到最后面(给ul中最后一个li中插入一个a标签)
			$("<a href='heppt.www.baidu.com'>哈哈哈</a>").appendTo($("ul>li").last());//把a标签插入到最后一个li里面
			})
		</script>
	</head>

二者区别不大，appendTo相比只是颠倒了。
3.3 插入到最前面(给ul中第一个li中插入一个a) prepend()：将内容添加到指定元素前面代码：

	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入外部jQuery类库 -->
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
			//--内部插入(前面和后面)
			//   插入到最前面(给ul中第一个li中插入一个a标签)
			$("ul>li").first().prepend("<a href='#'>嗨害嗨</a>")
			})
		</script>
	</head>

3.4 插入到最前面(给ul中第一个li中插入一个a),使用prependTo prependTo():和prepend()颠倒代码：

	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入外部jQuery类库 -->
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
			//--内部插入(前面和后面)
			//   插入到最前面(给ul中第一个li中插入一个a标签)
			$("<a href='#'>嗨害嗨</a>").prependTo($("ul>li").first());
			})
		</script>
	</head>

3.5 在属性title为b前面添加一个li after()：在匹配元素之后插入内容代码：

	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入外部jQuery类库 -->
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
			//--外部插入(之前和之后)
			//   在属性title为b的li前面插入一个a标签
			$("ul>li").filter("[title=b]").before("<a href='#'>天天开心</a>")
			})
		</script>
	</head>

3.6 在属性title为b后面添加一个li before()：在匹配元素之前插入内容代码：

		<meta charset="utf-8">
		<title></title>
		<!-- 引入外部jQuery类库 -->
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
			//--外部插入(之前和之后)
			//   在属性title为b的li后面插入一个a标签
			$("ul>li").filter("[title=b]").after("<a href='#'>加自习</a>")
			})
		</script>
	</head>

二、删

empty()：删除匹配的元素集合中所有的子节点（不包含匹配的元素）

remove()：删除匹配的元素集合中所有的子节点（包含匹配的元素）

案例4：演示文档处理-删除
4.1 清空ul中所有li的内容，empty()：删除匹配的元素集合中所有的子节点（不包含匹配的元素）代码：

	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入外部jQuery类库 -->
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
			//删
			//清空ul中所有li的内容
			$("ul li").empty();
			})
		</script>
	</head>

移除ul中所有的li，使用remove() remove()：删除匹配的元素集合中所有的子节点（包含匹配的元素）代码：

	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入外部jQuery类库 -->
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
			//删
			//移除ul中所有的li
			$("ul li").remove();
			})
		</script>
	</head>

三、改

replaceWith()：将所有匹配的元素替换成指定的内容

案例5：演示文档处理-修改
5.1 把li下面所有的span标签替换为<a>标签 replaceWith()：将所有匹配的元素替换成指定的内容代码：

	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入外部jQuery类库 -->
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
			//2.2 改	
			//把li下面所有的span标签替换为<a>标签
			$("li span").replaceWith("<a href='#'>嗨害嗨</a>")
			})
		</script>
	</head>

好了，今天的学习就到此结束了，祝大家的技术能越来越牛，早日成为大咖，我也好吹牛说如今的技术大咖曾经也是看过我的文章，哈哈哈。我是小陽，感谢各位观看我的文章！