jQuery03.筛选&文档处理

也跌

已于 2022-03-18 15:40:49 修改

阅读量422

点赞数 4

文章标签：前端 javascript html5 jquery html

于 2022-03-17 23:58:30 首次发布

本文链接：https://blog.csdn.net/github_67177094/article/details/123563785

版权

回顾:jQuery02.$工具方法&属性&css

目录

筛选

过滤

查找

演示所有查找方法

文档处理

增加

内部插入

外部插入

演示文档处理-增加

删除

演示文档处理-删除

修改

演示文档处理-修改

筛选

过滤

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

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

3. eq(N) 获取匹配的第N或-N个元素

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

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

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

查找

1. childern() 子代标签中找

2. find() 后代标签中找

3. parent() 父标签

4. prevAll() 前面所有的兄弟标签

5. nextAll() 后面所有的兄弟标签

6. siblings() 前后所有的兄弟标签

演示所有查找方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>查找方法</title>
		<script src="js/jquery-3.5.1.js"></script>
	</head>
	<body>
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li><span></span></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<script type="text/javascript">
			var arr=[1,2,'三',true]
			//从元素数组中找到第一个元素
			console.log($(arr).first())
			//从元素数组中找到最后一个元素
			console.log($(arr).last())
			//从元素数组中找到指定的某一个元素(数组中是以0开始的,这里找到第3个)
			console.log($(arr).eq(2))
			//从元素数组中筛选出有title属性的元素集合
			console.log($('html').filter('[title]'))
			//从元素数组中筛选出有<span>标签的元素集合
			console.log($('li').has('span'))
			//从元素数组中筛选出没有title属性的元素标签
			console.log($('html').not('[title]'))
		</script>
	</body>
</html>

文档处理

增加

内部插入

1. append() 将内容添加到指定的元素后面

2. appendTo() 和append()颠倒,将.前面内容添加到指定内容后

3. prepend() 将内容添加到指定内容前

4. prependTo() 和prepend()颠倒

外部插入

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

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

演示文档处理-增加

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js"></script>
	</head>
	<body>
		<ul>
			<li title="b"></li>
			<li title="a"></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<script type="text/javascript">
			//给ul中最后一个li中插入一个a
			$('li').last().append('<a>a</a>')
			//给ul中最后一个li中插入一个a,使用appendTo()
			$('<a>a</a>').appendTo($('li').last())
			//给ul中第一个li中插入一个a
			$('li').first().prepend('<a>a</a>')
			//给ul中第一个li中插入一个a,使用prependTo
			$('<a>a</a>').prependTo($('li').first())
			//给属性title为b前面添加一个li
			$('li').filter('[title=b]').before('<li>b</li>')
			//在属性title为b后面添加一个li
			$('li').filter('[title=b]').after('<li>b</li>')
		</script>
	</body>
</html>

删除

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

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

演示文档处理-删除

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js"></script>
	</head>
	<body>
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<script type="text/javascript">
			//删除匹配的元素集合中所有的子节点(不包含匹配的元素)
			$('ul').empty()
			//删除匹配的元素集合中所有的子节点(包含匹配的元素)
			$('ul').remove()
		</script>
	</body>
</html>

修改

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

演示文档处理-修改

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js"></script>
	</head>
	<body>
		<ul>
			<li>
				<span></span>
			</li>
			<li>
				<span></span>
			</li>
			<li>
				<span></span>
			</li>
			<li>
				<span></span>
			</li>
			<li>
				<span></span>
			</li>
			<li>
				<span></span>
			</li>
			<li>
				<span></span>
			</li>
			<li>
				<span></span>
			</li>
		</ul>
		<script type="text/javascript">
			//把li标签下面所有的span标签替换成<a>标签
			$('li span').replaceWith('<a></a>')
		</script>
	</body>
</html>

你要尽全力保护你的梦想。那些嘲笑你梦想的人，他们注定失败，他们想把你变成和他们一样。我坚信，只要心中有梦想，我就会与众不同。你也是。

也跌

关注

4
点赞
踩
0

收藏

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

回顾:jQuery02.$工具方法&属性&css目录筛选过滤查找演示所有查找方法文档处理增加内部插入外部插入演示文档处理-增加删除演示文档处理-删除修改演示文档处理-修改筛选过滤1. first() 获取匹配的第一个元素2. last() 获取匹配的最后一个元素3. eq(N) 获取匹配的第N或-N个元素4. filter(selector) 筛选出与指定表达式匹配的元素集合5. has(sele...
复制链接

扫一扫