jQuery的筛选和文档处理

最新推荐文章于 2022-08-01 09:49:50 发布

筱☆

最新推荐文章于 2022-08-01 09:49:50 发布

阅读量542

点赞数 6

文章标签： css javascript 前端

本文链接：https://blog.csdn.net/weixin_67235801/article/details/123585585

版权

一、jQuery的筛选

1.过滤

first()	获取匹配的第一个元素
last()	获取匹配的最后一个元素
eq(N)	获取匹配的第N或N个元素
filter()	筛选出与指定表达式匹配的元素集合
has()	筛选出包含特定特点的元素集合
not()	筛选出不包含特定特点的元素集合

接下来就是代码展示

<ul>
	<li>哈哈哈</li>
	<li>哈哈哈</li>
	<li class="aa">哈哈哈</li>
	<li class="aa">哈哈哈</li>
	<li>哈哈哈</li>
	<li id="l1">哈哈哈</li>
	<li><p class="bb">哈哈哈</p></li>
	<li>哈哈哈</li>
	<li>哈哈哈</li>
	<li>哈哈哈</li>
</ul>

<script src="js/jquery-3.5.1.js"></script>
<script>
	//拿第一个元素
	console.log($("li").first())
	console.log($("li:first()"))

	
	//拿最后一个元素
	console.log($("li").last())
	console.log($("li:last()"))
	
	//拿指定的元素
	console.log($("li").eq(0))  //$对象
	console.log($("li").get(0))  //js对象
	
	//筛选出含有aa属性的元素
	console.log($("li").filter(".aa"))
	
	//拿到有p标签的li
	$("li").has("p")
	//拿到有class属性为bb的li
	$("li").has(".bb")
	
	//筛选出没有aa属性的元素
	$("li").not(".aa")
</script>

2.查找

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

代码展示如下：

<ul>
	<li>哈哈哈</li>
	<li>哈哈哈</li>
	<li class="aa">哈哈哈</li>
	<li class="aa">哈哈哈</li>
	<li>哈哈哈</li>
	<li id="l1">哈哈哈</li>
	<li><p class="bb">哈哈哈</p></li>
	<li>哈哈哈</li>
	<li>哈哈哈</li>
	<li>哈哈哈</li>
</ul>

<script src="js/jquery-3.5.1.js"></script>
<script>
	//拿出ul中所有的子标签
	console.log($("ul").children())
	
	//拿出ul中带aa属性的子标签
	console.log($("ul").children(".aa"))
	
	//拿出ul里面的p标签
	console.log($("ul").find("p"))
	//find不仅限于子代
	
	//拿父元素
	console.log($(".aa").parent())  //ul
	//parents可以拿出所有的父元素，指定后拿指定的父元素
	console.log($(".aa").parents())  // ul body html
	console.log($(".aa").parents("body"))  //body
	
	//拿出前面所有的兄弟标签
	console.log($("#l1").prevAll())
	//拿出后面所有的兄弟标签
	console.log($("#l1").nextAll())
	//拿出前后所有的兄弟标签
	console.log($("#l1").siblings())
	
</script>

find不仅限于子代，还可以拿孙子代。

parent只能拿相近的父代（上一级），parents可以拿出所有的父元素，指定后拿指定的父元素

二、jQuery的文档处理

1.增加

·内部插入

append()	将内容添加到指定的元素后面
appendTo()	和append()颠倒
prepend()	将内容添加到指定的元素前面
prependTo()	和prepend()颠倒

编写一个p标签，来给5px的绿色边框

<style>
	p{
		border: 5px solid seagreen;
	}
</style>
<p></p>

//在p标签内追加内容
$("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标签设置内容
j.text("哈哈ha")
//将j标签加入到p标签中
$("p").append(j) //后面

cloneNode(true) 复制 cloneNode是js的函数，j是jQuery元素，需转换后才能使用

$("p").prepend(j.get(0).cloneNode(true)) //将j复制后添加到前面

j.get(0) 将jQuery元素转换成js元素

$(u) 将js元素转换成jQuery元素

let u=document.getElementsByTagName("u")[0] //拿到第一个
$(u).text("123")

text是jQuery函数，u是js元素，需转换后才能使用

·外部插入

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

//在p标签之后添加j
$("p").after(j)

//在p标签之前添加j
$("p").before(j)

在p标签之后

在p标签之前

2.删除

empty()

删除匹配元素集合中所有的子节点

（不包含匹配元素）

remove()

删除匹配元素集合中所有的子节点

（包含匹配元素）

//删除p标签中所有的子节点（不包含p标签）
// $("p").empty()
//删除p标签中所有的子节点（包含p标签）
$("p").remove()

使用empty删除

使用remove删除后页面是什么都没有的

3.修改

replaceWith()

将所有匹配的元素替换成指定的内容

三、删除表格中的一行数据

<script src="js/jquery-3.5.1.js"></script>

<table border>
	<tr>
		<td>第一行</td>
		<td>🌭🌭🌭</td>
		<td>🥪🥪🥪</td>
		<td>🌮🌮🌮</td>
		<td>
			<p>
				<button onclick="$(this).parents('tr').remove()">删除</button>
			</p>
		</td>
	</tr>
	<tr>
		<td>第二行</td>
		<td>🍑🍑🍑</td>
		<td>🍍🍍🍍</td>
		<td>🍒🍒🍒</td>
		<td>
			<p>
				<button onclick="this.parentElement.parentElement.outerHTML=''">删除</button>
			</p>
		</td>
	</tr>
</table>

看第二张图可以看出，第一行已经删了，第二行只把删除按钮了

上面的代码中 this.parentElement.parentElement拿到的是td,所有删除的是td

四、菜单功能

<style>
	li{
		/* 去除选项前面的点点 */
		list-style: none;
	}
	ul{
		/* 调整了内间距 */
		padding: 0px;
	}
	p{
		background-color: bisque;
	}
	ol{
		display: none;
	}
	
	/*激活的样式*/
	.active{
		background: lavenderblush;
		color: burlywood;
	}

	/*激活的时候  它地下的ol*/
	.active ol{
		display: block;
	}
</style>

<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>
	<li>
		<p>水果</p>
		<ol>
			<li>🍉🍉🍉</li>
			<li>🍒🍒🍒</li>
			<li>🍌🍌🍌</li>
			<li>🍓🍓🍓</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>

效果展示如下图所示