jQuery——03(筛选&文档处理)

洛洛虎虎生威

于 2022-03-18 17:20:32 发布

阅读量650

点赞数 5

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/weixin_65975275/article/details/123580108

版权

家人们好！今天的内容来啦~ 它非常非常的简单，对啦，考大家一个小问题，js对象如何变成jQuery对象？ jQuery对象如何变成js对象？

js对象转变为jQuery对象的方法就是：给需要转的值加上$()

jQuery对象转变为js对象的方法就是：需要转的值后面加上get(0)

一.过滤功能

详细图：

详细讲解：

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

        //first()：获取匹配的第一个元素
		console.log($("li").first());//第一种方法
		console.log($("li.first"));  //第二种方法

2.last()：获取匹配的最后一个元素

console.log($("li").last());

3.eq(N)：获取匹配的第N~N个元素

	console.log($("li").eq(0)); //$对象
	console.log($("li").get(0));//js对象

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

       //只要class为aa的li标签
		$("li aa"); //第一种
		$("li").filter(".aa");//先拿出li，再来过滤class为aa的元素

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

        //只要p标签的父元素li 
		$("li").has("p"); //has 判断子元素
		//只要class标签的父元素li 
		$("li").has(".bb");

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

         //和filter相反
		$("li").not(".aa");//拿到这个li，并且这个li没有class为aa这个元素的li

二.查找功能

详细图：

详细讲解：

筛选是没有规律的，但是查找有

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

        //拿出li（通过父子关系来拿）
		console.log($("ul").children());//拿出所有的li元素
		
		//拿出ul里面的aa子元素
		console.log($("ul").children(".aa"));
		//拿出ul里面的p元素 (后代)
		console.log($("ul").find("p"));//find 就是找所有的后代
		
		//拿父元素
		//parent 拿上一级父元素
		//parents 拿页面上所有的父元素
		console.log($(".aa").parent());
		console.log($(".aa").parents("body"));

四.表格删除

详细图：

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

$("p").empty();//删除子节点，不删除自己

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

	$("p").remove();//连自己也一起删除

3.after()：在匹配元素之后插入内容

4.before()：在匹配元素之前插入内容

5.append()：追加

<1>案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>(文档操作)</title>

		<style>
		p{
			border: 10px solid red;
		}
		</style>
		
		<!-- 导入jQuery文件 -->
		<script src="Index/jquery-3.5.1.js"></script>
	</head>
	<body>
		<p> </p>
		<script>
		//append 追加
		$("p").append("my Shifting");
		$("p").append("<b>嘿嘿</b>");
		
		//创建标签（纯js）
		let i=document.createElement("i");
		//给i标签设置内容
		i.textContent="hahahha";
		//将i标签加入到p标签中
		$("p").append(i);
		
		//用jQuery创建标签
		let j=$("<u>");
		j.text("哈哈");//设置内容
		$("p").append(j);//添加到后面
		
		// $("p").prepend(j);//将j改到前面去了
		
		//复制
		 $("p").prepend(j.get(0).cloneNode(true));//将内容一起复制到前面，后面的不变
		
		document.getElementsByTagName("u")[0];
		//将u变成jQuery对象，然后调用jQuery方法
		$("u").text("123");
		//如果需要将jQuery对象变成js对象，使用get()方法
		
		//before():在匹配元素之前插入内容
		//after():在匹配元素之后插入内容
		
		//删除方法
		$("p").empty();//删除子节点，不删除自己
		$("p").remove();//连自己也一起删除
		</script>	
	</body>
</html>

<2>.案例2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>(表格删除)</title>
		<!-- 导入jQuery文件 -->
		<script src="Index/jquery-3.5.1.js"></script>
	</head>
	<body>
		<table border="1">
			<tr>
				<td>啊哈哈哈哈哈哈</td>
				<td>啊哈哈哈哈哈哈</td>
				<td>啊哈哈哈哈哈哈</td>
				<td>啊哈哈哈哈哈哈</td>
				<td>啊哈哈哈哈哈哈</td>
				<td>啊哈哈哈哈哈哈</td>
				<td>
					<button onclick="$(this).parents('tr').remove()">删除</button>
				</td>
			</tr>
			
			<tr>
				<td>啊哈哈哈哈哈哈</td>
				<td>啊哈哈哈哈哈哈</td>
				<td>啊哈哈哈哈哈哈</td>
				<td>啊哈哈哈哈哈哈</td>
				<td>啊哈哈哈哈哈哈</td>
				<td>啊哈哈哈哈哈哈</td>
				<td>
					<button onclick="$(this).parents('tr').remove()">删除</button>
				</td>
			</tr>
			
			<tr>
				<td>啊哈哈哈哈哈哈</td>
				<td>啊哈哈哈哈哈哈</td>
				<td>啊哈哈哈哈哈哈</td>
				<td>啊哈哈哈哈哈哈</td>
				<td>啊哈哈哈哈哈哈</td>
				<td>啊哈哈哈哈哈哈</td>
				<td>
					<button onclick="$(this).parents('tr').remove()">删除</button>
				</td>
			</tr>
		</table>
	</body>
</html>

五.菜单功能

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>(菜单功能)</title>
		<style>
		 li{
			 /* 去除前面的点点 */
			 list-style: none; 
		 }
		 
		 p{
			 background: lawngreen;
		 }
		 ul{
			 /* 调整内边距 */
			 padding: 0px;
		 }
		 
		 ol{
			 /* 当前不显示 */
			 display: none;    
		 }
            
			/* 激活的样式 */
		 .active{
			 background: skyblue ;
			color: red;
		   }
		   
		   /* 激活的时候，它底下的ol标签 */
		   .active ol{
			   display: block;
		   }
		
		</style>
		
		
		
	    <!-- 导入jQuery文件 -->
		<script src="Index/jquery-3.5.1.js"></script>
	</head>
	<body>
		<ul>
			<li>
				<p>莲花</p>
				<ol>
					<li>柴桑头那个大课间活动差点卡士达</li>
					<li>柴桑头那个大课间活动差点卡士达</li>
					<li>柴桑头那个大课间活动差点卡士达</li>
					<li>柴桑头那个大课间活动差点卡士达</li>
					<li>柴桑头那个大课间活动差点卡士达</li>
				</ol>
			</li>
			
			<li>
				<p>牡丹</p>
				<ol>
					<li>柴桑头那个大课间活动差点卡士达</li>
					<li>柴桑头那个大课间活动差点卡士达</li>
					<li>柴桑头那个大课间活动差点卡士达</li>
					<li>柴桑头那个大课间活动差点卡士达</li>
					<li>柴桑头那个大课间活动差点卡士达</li>
				</ol>
			</li>
			
			<li>
				<p>百合</p>
				<ol>
					<li>柴桑头那个大课间活动差点卡士达</li>
					<li>柴桑头那个大课间活动差点卡士达</li>
					<li>柴桑头那个大课间活动差点卡士达</li>
					<li>柴桑头那个大课间活动差点卡士达</li>
					<li>柴桑头那个大课间活动差点卡士达</li>
				</ol>
			</li>
			
			<li>
				<p>菊花</p>
				<ol>
					<li>柴桑头那个大课间活动差点卡士达</li>
					<li>柴桑头那个大课间活动差点卡士达</li>
					<li>柴桑头那个大课间活动差点卡士达</li>
					<li>柴桑头那个大课间活动差点卡士达</li>
					<li>柴桑头那个大课间活动差点卡士达</li>
				</ol>
			</li>
		</ul>
		
		<script>
		//给所有的菜单设置点击事件
		$("p").click(function(){
			//this是js对象
			let parent=$(this).parents("li");
	        //移出其他菜单的激活样式
			 parent.siblings().removeClass("active"); //拿到其他兄弟菜单
			if(parent.hasClass("active")){
			 return parent.removeClass("active");	
			}
	        //给菜单添加激活的样式
		     parent.addClass("active");
		})
		</script>
	</body>
</html>

运行结果：

一开始，下面的ol内容是设为隐藏的，当我们点到哪一行，那一行就会将下面的ol内容显示，再点击另外一行的时候，上次被点击的那一行就会收起来，实现菜单的效果