jQuery筛选与文档处理

嘴强程序员

已于 2022-04-20 17:45:28 修改

阅读量1.1k

点赞数 1

文章标签： jquery javascript html

于 2022-03-18 18:33:18 首次发布

本文链接：https://blog.csdn.net/qq_62898618/article/details/123580097

版权

eq等于 gt 大于 lt 小于

筛选中的过滤器

<!DOCTYPE html>
<html>
	<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">
			// 过滤器 first last eq filter has not
			// 获取ul中所有的li元素，然后找到第一个元素
			// first获取第一个
			$(function() {
				$("ul>li").first().css("background", "red")
				$("ul>li:first").css("background", "yellow");
				$("ul>li:eq(0)").css("background", "yellow");
				$("ul>li:lt(1)").css("background", "yellow");
				// 找到最后一个元素
				$("ul>li").last().css("font-size", "14px")
				// 找到指定下标的标签 第三个
				$("ul>li:eq(2)").css("background", "yellow");
				$("ul>li").eq(2).css("background", "yellow");
				// 找到li标签中有title为a的元素
				$("ul>li").filter("[title=a]").css("color","red")
				// 赛算出除title为a的元素
				$("ul>li").filter("[title!=a]").css("color","red")
				// 筛选出有title的属性 获li中取有title属性的标签
				$("ul>li").filter("[title]").css("color","red")
				// 筛选出li有p段落的元素 has 获取所有li中有p段落的标签
				$("ul>li").has("p").css("color","yellow")
				// 筛选出没有title属性的元素集合 not 获取所有il中没有title属性的标签
				$("ul>li").not("[title]").css("color","pink")
			})
		</script>
	</head>
	<body>
		<ul>
			<li title></li>
			<li><p>Niaho</p></li>
			<li title="a"></li>
			<li></li>
			<li title="b"></li>
			<li></li>
			
			<li title="a"></li>
			<li>123</li>
		</ul>
		<p>sjfiefe</p>

	</body>
</html>

筛选中的子标签父标签兄弟标签的获取

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			$(function() {
				// 查找ul的所有子标签,并且指定为li子标签 children获取所欲子标签
				$("ul").children("li").css("color", "pink")
				// 直接通过下标获取的话会直接返回源生js对象而不是jQuery对象
				console.log($("ul").children("li")[2])
				// 查找ul下面标签中所有的p标签
				$("ul").find("p").css("color", "red")
				// 查找b标签的父元素标签parent获取父标签
				$("b").parent().parent().css("color", "#000");
				// 所有所有的父节点  直到根节点找到后结束
				console.log($("b").parents());
				// 查找第三个li标签前面所有的兄弟标签 不包过本身
				$("ul").children("li").eq(2).prevAll('li').css("background-color", "pink")
				// 查找第三个li标签后面所有的兄弟标签,并且只能是li标签 不包过本身
				$("ul").children("li").eq(2).nextAll('li').css("background-color", "pink")
				// 查找第三个li标签所有的兄弟标签 不会包过本身
				$("ul").children("li").eq(2).siblings('li').css("background", "red");
			})
		</script>
	</head>
	<body>

		<ul>
			<li title></li>
			<li>
				<p>Niaho</p>
			</li>
			<li title="a"></li>
			<li><span id="">
					<b>sumi1</b>
				</span></li>
			<li title="b"></li>
			<li></li>

			<li title="a"></li>
			<li>123</li>
		</ul>
		<p>sjfiefe</p>

	</body>
</html>

jQuery中的一些常用的文本处理曾删改复制

	//插入到最后面(给ul中最后一个li中插入一个a标签) 复制已有的标签时有一个剪切的效果
	$(".oBox>ul").children("li").last().append($("<a href='#'>小电影</a>"))

// 插入到最前面(给ul中第2个li中插入一个按钮)
$(".oBox>ul").children().eq(1).prepend($("<button>按钮</button>"))
$("<button>按钮</button>").prependTo($(".oBox>ul").children().eq(1))

// 在属性title为b的li前面插入一个a标签
	$(".oBox>ul").children("li").filter("[title=b]").before("<a href ='#'>haha</a>")
	//   在属性title为b的li后面插入一个a标签
	$(".oBox>ul").children("li").filter("[title=b]").after("<a href ='#'>haha</a>")

//清空ul中所有li的内容 empty
$(".oBox>ul").children("li").empty();

留下的都是a标签的类容

//移除ul中所有的li remove
$(".oBox>ul").children('li').remove()

移除后

// 需求   clone   复制ul中的第一个子节点  追加到末尾 
// clone参数为false时不拷贝函数方法 true 拷贝函数方法			
$(".oBox>ul").append($(".oBox>ul").children().first().clone(true))

复制第一个到最后一行

<!DOCTYPE html>
<html>
	<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() {
				// 增
				//--内部插入(前面和后面)
				//插入到最后面(给ul中最后一个li中插入一个a标签)
				$(".oBox>ul").children("li").last().append($("<a href='#'>小电影</a>"))
				// appendTo方法功能一样写法不一样
				$("<a href = '#'>百度一下</a>").appendTo($(".oBox>ul").children("li").last())
				// 插入到最前面(给ul中第2个li中插入一个按钮)
				$(".oBox>ul").children().eq(1).prepend($("<button>按钮</button>"))
				$("<button>按钮</button>").prependTo($(".oBox>ul").children().eq(1))
				// 外部插入 与li一个级别的标签
				// 在属性title为b的li前面插入一个a标签
				$(".oBox>ul").children("li").filter("[title=b]").before("<a href ='#'>haha</a>")
				//   在属性title为b的li后面插入一个a标签
				$(".oBox>ul").children("li").filter("[title=b]").after("<a href ='#'>haha</a>")
				//修改标签
				//把li下所有的span标签替换成a链接
				$(".oBox>ul").find("span").replaceWith("<a href='#'>年后</a>")
				//清空ul中所有li的内容 empty
				$(".oBox>ul").children("li").empty();
				//移除ul中所有的li remove
				$(".oBox>ul").children('li').remove()
				// 需求   clone   复制ul中的第一个子节点  追加到末尾 
				// clone参数为false时不拷贝函数方法 true 拷贝函数方法			
				$(".oBox>ul").append($(".oBox>ul").children().first().clone(true))

			})
		</script>
	</head>
	<body>
		<div class="oBox" style="border: 1px solid red;height: 400px;">

			<ul>
				<li>item1</li>

				<li title="b">item2</li>
				<ol>
					<li><span></span></li>
					<li><span></span></li>
					<li><span></span></li>
				</ol>
				<li>item3 <span>asdsa</span></li>
				<li>item4</li>
				<li>item5 <span>ashdkjas</span></li>
			</ul>

		</div>

	</body>
</html>

嘴强程序员

关注

1
点赞
踩
0

收藏

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

筛选与文本处理的一些方法筛选中的过滤器<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script> <script type=...
复制链接

扫一扫