021-jQuery遍历-同胞

最新推荐文章于 2024-04-26 16:47:03 发布

天又热了

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量532

点赞数

分类专栏： jQuery 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/weixin_43404791/article/details/122698187

版权

jQuery 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<style>
			.siblings * {
				display: block;
				border: 2px sloid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
		<script>
			$(document).ready(function() {
				$("h2").siblings().css({
					"color": "red",
					"border": "2px solid red"
				});
				$("h2").siblings("p").css({
					"color":"red",
					"border":"2px solid blue"
				});
				$("h2").next().css({
					"color":"red",
					"border":"2px solid yellow"
				});
				$("h2").nextAll().css({
					"color":"red",
					"border":"2px solid black"
				});
				$("h2").nextUntil("h6").css({
					"color":"red",
					"border":"2px solid green"
				});
				
			});
		</script>
	</head>
	<!--
	jQuery遍历-同胞
		同胞拥有相同的父元素
		通过jQuery,您能够在DOM树种遍历元素的同胞元素
	在DOM树中水平遍历
		有许多有用的方法让我们在DOM树进行水平遍历
		- siblings()
		- next()
		- nextAll()
		- nextUntil()
		- prev()
		- prevAll()
		- prevUntil()
	jQuery siblings()办法
		siblings()方法返回被选元素的所有相同元素
		下面的例子返回<h2>的所有同胞元素
		$("h2").siblings().css({
			"color": "red",
			"border": "2px solid red"
		});
		您也可以使用可选参数来过滤对同胞元素的搜索
		下面的例子返回属于<h2>的同胞元素的所有<p>元素
		$("h2").siblings("p").css({
			"color":"red",
			"border":"2px solid blue"
		});
	jQuery next()方法
		next()方法返回被选元素的下一个同胞元素.
		该方法只返回一个元素.
		下面的例子返回<h2>的下一个同胞元素:
		$("h2").next().css({
			"color":"red",
			"border":"2px solid yellow"
		});
	jQuery nextAll()方法
		nextAll()方法返回被选元素的所有跟随的同胞元素.
		下面的例子返回<h2>的所有跟随同胞元素
		$("h2").nextAll().css({
			"color":"red",
			"border":"2px solid black"
		});
	jQuery nextUntil()方法
		nextUntil()方法返回介于两个给定参数之间的所有跟随的同胞元素
		下面的例子返回介于<h2>与<h6>元素之间的所有同胞元素:
		$("h2").nextUntil("h6").css({
			"color":"red",
			"border":"2px solid green"
		});
	jQuery prev(), prevAll() & prevUntil()方法
		prev(), prevAll()以及prevUntil()方法的工作方式与上面的方法类似,只不过方向相反而已;他们返回的是前面的同胞元素(在DOM树中沿着同胞元素之前元素遍历,而不是之后元素遍历)
	-->
	<body>
		<div class="siblings">
			div (父元素)
			<p>
				P
			</p>
			<span>
				span
			</span>
			<h2>
				h2
			</h2>
			<h3>
				h3
			</h3>
			<h4>
				h4
			</h4>
			<h5>
				h5
			</h5>
			<h6>
				h6
			</h6>
			<p>
				p
			</p>
		</div>
	</body>
</html>

天又热了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
021-jQuery遍历-同胞

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <style> .siblings * { display: block;
复制链接

扫一扫