0
点赞
收藏
分享

微信扫一扫

JQuery 03 筛选&文档处理

水沐由之 2022-03-18 阅读 72

    这节课是JQuery的第三节课,主要讲JQuery筛选和文档处理,还有三节课就要结束JQuery的课程啦。还是一样有问题在下方评论,或者私信小编噢,看到了会给大家解答的。


 一.过滤

// first() 匹配第一个元素  两种写法
	console.log($("li").first());
	console.log($("li:first"));

 

// last() 获取最后一个元素
	// 两种写法
	console.log($("li").last());
	console.log($("li:last"));
	

 

// eq获取第几个元素
	console.log($("li").eq(2));//$对象
	console.log($("li").get(0));//js对象

 

// 拿到指定的的元素 filter
	// 拿到li标签中 class名为aa
	console.log($("li").filter(".aa"));

 

// 只要p标签的父元素li
	console.log($("li").has("p"));
	console.log($("li").has(".bb"));

 

// not筛选不包含该特点的元素
	console.log($("li").not(".aa"));

 


 二.查找

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<ul>
		<li class="aa">嘻嘻</li>
		<li class="aa">嘻嘻</li>
		<li>嘻嘻</li>
		<li class="cc">嘻嘻</li>
		<li>嘻嘻</li>
		<li>嘻嘻</li>
		<li>嘻嘻</li>
		<li>嘻嘻</li>
		<li><p class="bb">嘻嘻</p></li>
		<li>嘻嘻</li>
	</ul>
	
	<script src="jquery-3.5.1.js"></script>
	
	<script>
	
	// 拿到ul的子标签
	// children()子标签
	console.log($("ul").children());
	
	// 拿到ul中的class名为aa子元素
	 console.log($("ul").children(".aa"));
	 
	
	</script>
	</body>
</html>

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<ul>
		<li class="aa">嘻嘻</li>
		<li class="aa">嘻嘻</li>
		<li>嘻嘻</li>
		<li class="cc">嘻嘻</li>
		<li>嘻嘻</li>
		<li>嘻嘻</li>
		<li>嘻嘻</li>
		<li>嘻嘻</li>
		<li><p class="bb">嘻嘻</p></li>
		<li>嘻嘻</li>
	</ul>
	
	<script src="jquery-3.5.1.js"></script>
	
	<script>
	
	 
	 // 拿出ul中的p标签(拿到后代 孙子)
	 // find 后代标签中
     console.log($("ul").find("p"));

	</script>
	</body>
</html>

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<ul>
		<li class="aa">嘻嘻</li>
		<li class="aa">嘻嘻</li>
		<li>嘻嘻</li>
		<li class="cc">嘻嘻</li>
		<li>嘻嘻</li>
		<li>嘻嘻</li>
		<li>嘻嘻</li>
		<li>嘻嘻</li>
		<li><p class="bb">嘻嘻</p></li>
		<li>嘻嘻</li>
	</ul>
	
	<script src="jquery-3.5.1.js"></script>
	
	<script>
	
	// 拿父元素
	// parent
	console.log($(".aa").parent());
	// parents:拿到该标签的所有父元素
	console.log($("p").parents("ul"));
	
	</script>
	</body>
</html>

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<ul>
		<li class="aa">嘻嘻</li>
		<li class="aa">嘻嘻</li>
		<li>嘻嘻</li>
		<li class="cc">嘻嘻</li>
		<li>嘻嘻</li>
		<li>嘻嘻</li>
		<li>嘻嘻</li>
		<li>嘻嘻</li>
		<li><p class="bb">嘻嘻</p></li>
		<li>嘻嘻</li>
	</ul>
	
	<script src="jquery-3.5.1.js"></script>
	
	<script>
	
	//prevAll() 拿到该元素前面所有的兄弟节点
	console.log($(".cc").prevAll());
	
	
	</script>
	</body>
</html>

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<ul>
		<li class="aa">嘻嘻</li>
		<li class="aa">嘻嘻</li>
		<li>嘻嘻</li>
		<li class="cc">嘻嘻</li>
		<li>嘻嘻</li>
		<li>嘻嘻</li>
		<li>嘻嘻</li>
		<li>嘻嘻</li>
		<li><p class="bb">嘻嘻</p></li>
		<li>嘻嘻</li>
	</ul>
	
	<script src="jquery-3.5.1.js"></script>
	
	<script>
	
	// nextAll() 拿到该元素后面所有的兄弟节点
	console.log($(".cc").nextAll());
	
	
	</script>
	</body>
</html>

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<ul>
		<li class="aa">嘻嘻</li>
		<li class="aa">嘻嘻</li>
		<li>嘻嘻</li>
		<li class="cc">嘻嘻</li>
		<li>嘻嘻</li>
		<li>嘻嘻</li>
		<li>嘻嘻</li>
		<li>嘻嘻</li>
		<li><p class="bb">嘻嘻</p></li>
		<li>嘻嘻</li>
	</ul>
	
	<script src="jquery-3.5.1.js"></script>
	
	<script>

	
	// siblings() 拿到该元素前面和后面的所有兄弟节点
	console.log($(".cc").siblings());
	
	
	
	</script>
	</body>
</html>

 


三.增加 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-3.5.1.js"></script>
		<style>
		p{
			border :10px solid aliceblue;
		}
		</style>
	</head>
	<body>
	<p></p>
	
	
	<script>
	// 在p标签后面追加
	// append : 将内容添加到指定元素的后面
	$("p").append("哈哈哈");
	$("p").append("<b>你好啊</b>")
	
	
	</script>
	</body>
</html>

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-3.5.1.js"></script>
		
	</head>
	<body>
	
	<span>I would like to say: </span>
	<div></div><div></div>
	
	<script>
	
	// appendTo和append颠倒的
	// appendTo:把span标签追加进div标签中
	$("span").appendTo("div");
	
// 创建标签
	let i=document.createElement("i");
	// 给i标签设置内容
	i.textContent="xixi";
	// 将i标签加入吧p标签中
	$("p").append(i);
	
	// jquery 
	// 这一步就是创建一个标签
	let j=$("<u>");
	// 给j标签设置内容 jquery给标签设置内容用text
	j.text("略略略");
	// 追加到p标签里
	 $("p").append(j);
	
	</script>
	</body>
</html>

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-3.5.1.js"></script>
		<style>
		p{
			border :10px solid aliceblue;
		}
		</style>
	</head>
	<body>
	<p></p>
	
	
	<script>
	
	// jquery 
	// 这一步就是创建一个标签
	let j=$("<u>");
	// 给j标签设置内容 jquery给标签设置内容用text
	j.text("略略略");
	// 追加到p标签里
	 $("p").append(j);
	
	// prepend:将内容添加到指定的元素前面
	// 把j添加到p标签前面
	$("p").prepend(j);
	
	
    
	</script>
	</body>
</html>

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-3.5.1.js"></script>

	</head>
	<body>
	<p></p>
	<span>I would like to say: </span>
	<div></div><div></div>
	
	<script>
	
	// prependTo:与prepend颠倒 
	// 把span标签加在div标签前面
	$("span").prependTo("div")
  
	</script>
	</body>
</html>

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-3.5.1.js"></script>
		
	</head>
	<body>
	<p></p>
	
	
	<script>
	
	
	// jquery 
	// 这一步就是创建一个标签
	let j=$("<u>");
	// 给j标签设置内容 jquery给标签设置内容用text
	j.text("略略略");
	// 追加到p标签里
	 $("p").append(j);
	
	
	
	//复制元素cloneNode
	// 复制j 把j加入p标签前面
	$("p").prepend(j.get(0).cloneNode(true));
	
	// 把JS转成$ 使用get
	// 把$转成js $(里面放入js)
	let u=document.getElementsByName("u")[0];
	$("u").text("123");

	</script>
	</body>
</html>

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-3.5.1.js"></script>
		<style>
		p{
			border :10px solid aliceblue;
		}
		</style>
	</head>
	<body>
	<p></p>
	
	
	<script>
	
	// jquery 
	// 这一步就是创建一个标签
	let j=$("<u>");
	// 给j标签设置内容 jquery给标签设置内容用text
	j.text("略略略");
	// 追加到p标签里
	 $("p").append(j);

     // 将j放在p标签之前
	 $("p").before(j);

	</script>
	</body>
</html>

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-3.5.1.js"></script>
		<style>
		p{
			border :10px solid aliceblue;
		}
		</style>
	</head>
	<body>
	<p></p>
	
	
	<script>
	
	
	// jquery 
	// 这一步就是创建一个标签
	let j=$("<u>");
	// 给j标签设置内容 jquery给标签设置内容用text
	j.text("略略略");
	// 追加到p标签里
	 $("p").append(j);
	
	
	 // 在p标签之后插入
	 $("p").after("hhhh");
	 
	
    
	</script>
	</body>
</html>

 


 四.删除

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-3.5.1.js"></script>
		<style>
		p{
			border :10px solid aliceblue;
		}
		</style>
	</head>
	<body>
	<p></p>
	
	
	<script>

	 // empty()删除匹配元素的子元素 (不包括匹配的元素)
	 $("p").empty();
	 

	</script>
	</body>
</html>

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-3.5.1.js"></script>
		<style>
		p{
			border :10px solid aliceblue;
		}
		</style>
	</head>
	<body>
	<p></p>
	
	
	<script>
	
	 // remove() 删除匹配元素的子元素 (包含匹配元素)
	 $("p").remove();
	 
	
    
	</script>
	</body>
</html>

  


 五.改

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-3.5.1.js"></script>
		
	</head>
	<body>
	<p></p>
	
	
	<script>

	 // replaceWith 将所有匹配元素替换成指定内容
	 console.log($("li").replaceWith("<u>哈哈哈哈</u>"));
    
	</script>
	</body>
</html>

 


六.题目演练

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-3.5.1.js"></script>
	</head>
	<body>
		<table border>
			<tr>
				<td>嘻嘻</td>
				<td>哈哈</td>
				<td>呵呵</td>
				<td><button onclick="$(this).parents('tr').remove()">删除</button></td>
			</tr>
			
			<tr>
				<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>
		ol{
			display: none;
		}
		
		.bb{
			
			color: chartreuse;
		}
		
		 .bb ol{
		  display: block;
		        }
		</style>
		
	</head>
	<body>
		<script src="jquery-3.5.1.js"></script>
		<ul>
		    <li>
		        <p>电器</p>
		        <ol>
		            <li>冰箱</li>
		            <li>电视机</li>
		            <li>洗衣机</li>
		            <li>吹风机</li>
		        </ol>
		    </li>
		    <li>
		        <p>水果</p>
		        <ol>
		            <li>菠萝</li>
		            <li>西瓜</li>
		            <li>哈密瓜</li>
		            <li>草莓</li>
		        </ol>
		    </li>
		    <li>
		        <p>奶茶</p>
		        <ol>
		            <li>烧仙草</li>
		            <li>葡萄啵啵</li>
		            <li>草莓啵啵奶茶</li>
		            <li>金桔柠檬</li>
		        </ol>
		    </li>
		</ul>
		
		<script>
		
		$("p").click(function(){
		// 先拿到他的父类
		let li=$(this).parents("li");
		// 判断他是否有class
		 //移除其他(兄弟)菜单的激活样式
	    li.siblings().removeClass("bb")
		// 判断是否有class属性  有的话移出class
		if(li.hasClass("bb")){
			return li.removeClass("bb")
		}
		li.addClass("bb");
		})
		
		</script>
	</body>

 今天的学习到此结束,大家好好敲代码噢

举报

相关推荐

jQuery03(筛选&文档处理)

JQuery筛选与文档处理

jQuery的筛选和文档处理

筛选-文档处理

jquery筛选方法-13

jquery 筛选器 data

0 条评论