jQuery筛选器&&文档处理

最新推荐文章于 2024-07-30 20:50:32 发布

第五天537

最新推荐文章于 2024-07-30 20:50:32 发布

阅读量45

点赞数

文章标签： java jquery

本文链接：https://blog.csdn.net/weixin_64549900/article/details/123583032

版权

过滤（ 筛选）
查看官方API文档
first()：获取匹配的第一个元素
last()：获得匹配的最后一个元素
eq(N)：获取匹配的第N或-N个元素
filter(selector)：筛选出与指定表达式匹配的元素集合
has(selector)：筛选出包含特定特点的元素的集合
not(selector)：筛选出不包含特定特点的元素的集合

查找
查看官方API文档
children()：子标签中找
find()：后代标签中找
parent()：父标签
prevAll()：前面所有的兄弟标签
nextAll()：后面所有的兄弟标签
siblings()：前后所有的兄弟标签

文档处理

增
内部插入
append()：将内容添加到指定的元素后面后面
appendTo()：和append()颠倒后面
prepend()：将内容添加到指定元素前面前面
prependTo():和prepend()颠倒前面

外部插入

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

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

案例：（筛选）

<head>
		<meta charset="utf-8" />
		<title>筛选&文档处理</title>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			$(function(){
				/* 一、 在jQuery对象数组中，筛选出一部分元素 */
				
				//1.1 过滤
 
				//--过滤出指定表达式匹配的元素
				// 获取ul中所有的li元素，然后找到第一个元素
				$("ul>li").first().css("background","red");
				$("ul>li:first").css("background","yellow");
				// 找到最后一个元素
				$("ul>li").last().css("background","aqua");
				// 找到指定的某一个元素，例如第3个
				$("ul>li").eq(1).css("background","aquamarine");
 
				//--过滤出指定表达式匹配的元素集合
				// 找到属性title为a的元素
				$("ul>li").filter("[title=a]").css("background","chartreuse");
				// 筛选出有title属性的元素集合
				$("ul>li").filter("[title]").css("background","coral");
				// 筛选出有<span>标签的元素集合
				$("ul>li").has("span").css("background","bisque");
				// 筛选出没有title属性的元素集合
				 $("ul>li").not("[title]").css("background","hotpink");
 
				//1.2 查找
 
				// 查找ul的所有子标签,并且指定为li子标签
				$("ul>li").children().css("background","aqua");
				$("ul").children("li").css("background","aqua");
				// 查找ul下面所有的span标签
				$("ul").find("span").css("background","mediumaquamarine");
				$("ul>li").find("span").css("background","cornflowerblue");
				// 查找b标签的父元素标签
				$("b").parent().css("background","mediumpurple");
				$("b").parent().parent().css("background","yellowgreen");
				// 查找第三个li标签前面所有的兄弟标签
				$("ul>li").eq(2).prevAll().css("background","lightskyblue");
				// 查找第三个li标签后面所有的兄弟标签,并且只能是li标签
				$("ul>li").eq(2).nextAll().css("background","crimson");
				// 查找第三个li标签所有的兄弟标签
				$("ul>li").eq(2).siblings().css("background","darkturquoise")
 
	})
		</script>
</head>
	
 
<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>

案例（文档处理）

<head>
		<meta charset="utf-8" />
		<title>筛选&文档处理</title>
<!-- 引入外部js -->
		<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			$(function(){
               /* 二、 文档处理  */
 
				//2.1 增
				//--内部插入(前面和后面)
				//   插入到最后面(给ul中最后一个li中插入一个a标签)
				$("ul").children("li").last().append($("<a href='#' >hh</a>"))
				//   插入到最前面(给ul中第一个li中插入一个a标签)
				$("ul").children("li").first().prepend($("<a href='#'>haha</a>"))
 
				//--外部插入(之前和之后)
				//   在属性title为b的li前面插入一个a标签
				$("ul").children("li").filter("[title=b]").before($("<a href='#'>且行且珍惜</a>"))
				//   在属性title为b的li后面插入一个a标签
				$("ul").children("li").filter("[title=b]").after($("<a href='#'>余生请多多指教</a>"))
 
				//2.2 改				
				//把li下面所有的span标签替换为<a>标签
				$("ul").children("li").find("span").replaceWith($("<a href='#'>jj</a>"))
				//2.3 删				
				//清空ul中所有li的内容
				$("ul").children("li").empty();
				//移除ul中所有的li
				$("ul").children("li").remove();
			})
		</script>
</head>
 
 
<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>

第五天537

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery筛选器&&文档处理

过滤（筛选）查看官方API文档 first()：获取匹配的第一个元素 last()：获得匹配的最后一个元素 eq(N)：获取匹配的第N或-N个元素 filter(selector)：筛选出与指定表达式匹配的元素集合 ...
复制链接

扫一扫