jQuery（筛选&文档处理）

最新推荐文章于 2024-07-12 16:27:40 发布

菲仔yo

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量837

点赞数 5

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

本文链接：https://blog.csdn.net/m0_67331668/article/details/123574940

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

兄弟姐妹们，又到了分享时刻，今天给大家带来的是jQuery筛选和文档处理，一起往下看吧

一、筛选

《1》关于筛选的单词：

《2》部分演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script src="js/jquery-3.5.1.js"></script>
		<ul>
			<li>哈哈哈</li>
			<li>哈哈哈</li>
			<li>哈哈哈</li>
			<li>哈哈哈</li>
			<li>哈哈哈</li>
			<li class="aa">哈哈哈</li>
			<li class="aa">哈哈哈</li>
			<li>哈哈哈</li>
			<li><p class="bb">哈哈哈</p></li>
			<li>哈哈哈</li>
		</ul>
		<script>
			
			console.log($("li").first());
			console.log($("li:first"))
			
			//gt  大于
			//lt  小于
			
			console.log($("li").eq(0)); //$对象
			console.log($("li").get(0)); //js对象
			
			//只要aa的li
			console.log($("li").filter(".aa"));
			
			//只要p标签的父元素li
			//has 判断子元素
			$("li").has("p")
			console.log($("li").has(".bb"))
			
			$("li").not(".aa")
			
			//拿出li
			console.log($("ul").children())
			//拿出ul里面中的aa子元素
			console.log($("ul").children(".aa"))
			//拿出ul里面的p标签（后代）
			console.log($("ul").find("p"))
			
			//拿父元素
			console.log($(".aa").parent())
			//通过一个按钮删除一行
			console.log($(".aa").parents("body"))
			
		</script>
	</body>
</html>

《3》实例:表格删除（parents）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>实例:表格删除</title>
		<script src="js/jquery-3.5.1.js"></script>
	</head>
	<body>
		<table border>
			<tr>
				<td>erwerwrrerw</td>
				<td>erwerwrrerw</td>
				<td>erwerwrrerw</td>
				<td>erwerwrrerw</td>
				<td>
					<button onclick="$(this).parents('tr').remove()">删除</button>
				</td>
			</tr>
			<tr>
				<td>erwerwrrerw</td>
				<td>erwerwrrerw</td>
				<td>erwerwrrerw</td>
				<td>erwerwrrerw</td>
				<td>
					<button onclick="$(this).parents('tr').remove()">删除</button>
				</td>
			</tr>
		</table>
	</body>
</html>

效果图如下：

《4》实例：菜单栏

进入界面时：

点击某一个会展开：

点击另一个是上一个会自动关上：

再次点击又会恢复最开始的界面：

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>菜单栏</title>
		<style type="text/css">
			li{
				/* 去除选项前面的点 */
				list-style: none;
			}
			
			p{
				background: #00FFFF;
			}
			
			ul{
				/* 调整了内间距 */
				padding: 0px;
			}
			
			ol{
				/* 当前是不显示 */
				display: none;
			}
			
			/* 激活的样式 */
			.active{
				background: bisque;
				color: darkorchid;
			}
			
			/* 激活的时候  它底下的ol标签 */
			.active ol{
				display: block;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>
				<p>纯纯的大无语事件</p>
				<ol>
					<li>HGFDHGDUGUDHFG</li>
					<li>HGFDHGDUGUDHFG</li>
					<li>HGFDHGDUGUDHFG</li>
					<li>HGFDHGDUGUDHFG</li>
				</ol>
			</li>
			<li>
				<p>纯纯的大无语事件</p>
				<ol>
					<li>HGFDHGDUGUDHFG</li>
					<li>HGFDHGDUGUDHFG</li>
					<li>HGFDHGDUGUDHFG</li>
					<li>HGFDHGDUGUDHFG</li>
				</ol>
			</li>
			<li>
				<p>纯纯的大无语事件</p>
				<ol>
					<li>HGFDHGDUGUDHFG</li>
					<li>HGFDHGDUGUDHFG</li>
					<li>HGFDHGDUGUDHFG</li>
					<li>HGFDHGDUGUDHFG</li>
				</ol>
			</li>
			<li>
				<p>纯纯的大无语事件</p>
				<ol>
					<li>HGFDHGDUGUDHFG</li>
					<li>HGFDHGDUGUDHFG</li>
					<li>HGFDHGDUGUDHFG</li>
					<li>HGFDHGDUGUDHFG</li>
				</ol>
			</li>
		</ul>
		<script src="js/jquery-3.5.1.js"></script>
		<script>
			//给所有的菜单设置点击事件
			$("p").click(function (){
				//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>

二、文档处理

注：文档处理就是对文档进行增、删、改的操作

《1》关于文档处理的单词

增：

删：

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

改：

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

《2》关于增、删的案例

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>增加、删除的案例</title>
		<style >
			p{
				border: 10px solid aqua;
			}
		</style>
	</head>
	<body>
		<p></p>
		<script src="js/jquery-3.5.1.js"></script>
		<script>
			$("p").append("hello world")
			$("p").append("<b>你好 世界</b>")
			
			//创建标签
			//js
			let i=document.createElement("i")
			//给i标签设置内容
			i.textContent="哈哈哈"
			//将i标签加入到p标签中
			$("p").append(i)
			
			//jquery
			let j=$("<u>")
			j.text("哈哈哈")
			$("p").append(j)//添加到后面
			
			$("p").prepend(j.get(0).cloneNode(true))//添加到前面
			
			let u=document.getElementsByTagName("u")[0]
			$(u).text("123")
			
			//$("p").empty()
			// $("p").remove() //直接将自己都移除掉
			
		</script>
	</body>
</html>

效果图如下：