Jquery基础之遍历和循环

最新推荐文章于 2024-04-06 13:09:14 发布

瑟瑟发抖的萌新学徒

最新推荐文章于 2024-04-06 13:09:14 发布

阅读量449

点赞数

文章标签：前端 jquery

本文链接：https://blog.csdn.net/m0_56420338/article/details/129865847

版权

遍历

1.祖先

parent()返回被选元素的直接父元素

parents()返回被选元素的所有祖先，一直向上直到（html）

parentsUntil()返回被选元素和参数祖先元素之间的所有元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.6.4.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		
		$(function(){
//			$("span").parent().css({"color":"red","border":"2px solid red"})只有li被选中
//			$("span").parents().css({"color":"red","border":"2px solid red"})//所有祖先都被选中
			$("span").parentsUntil($("div")).css({"color":"red","border":"2px solid red"})
		})
	</script>
	<style type="text/css">
		.ancestors{
			/*独占一行，可以设置宽高
			 */
			display: block;
			border: 2px solid lightblue;
			color: lightgrey;
			padding: 5px;
			margin: 15px;
		}
	</style>
	</head>
	<body class="ancestors">body(曾曾祖父元素)
		
		<div> div(曾祖父元素)
		<ul>ul（祖父元素）
			<li>li(父元素)
				<span>span</span>
			</li>
		</ul>
		</div>
	</body>
</html>

2.后代

1.children()返回被选元素的所有子元素

2.find()返回被选元素的后代，一路向下直到选择的最后一代

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.6.4.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		
			$(function(){
//				$("div").children("p").css({"color":"red","border":"2px solid red"})直接子元素p都被选中
//$("div").children($("p:first")).css({"color":"red","border":"2px solid red"})
//			$("div").find("span").css({"color":"red","border":"2px solid red"})
			//选取所有后辈中满足选择器的元素
			$("div").find("*").css({"color":"red","border":"2px solid red"})
			//选取所有的后辈
			})
	</script>
	<style type="text/css">
		.descendants *{
			display: block;
			border: 2px solid lightgrey;
			color: lightgrey;
			padding: 5px;
			margin: 15px;
		}
	</style>
	</head>
	<body>
		<div class="descendants">
			div(当前元素)
			<p>p(儿子元素)
				<span>span(孙子元素)</span>
			</p>
			<p>p(儿子元素)
				<span>span(孙子元素)</span>
			</p>
			
		</div>
	</body>
</html>

3.同胞

1.siblings()返回所有同胞，不包含元素本身

2.next()下一个同胞

3.nextAll() 弟弟妹妹们

4.nextUntil()返回介于两个给定参数之间的跟随的同胞

5.prev()前一个同胞

6.prevAll()所有的哥哥姐姐们

7.prevUntil()返回介于给定参数之间前边的同胞

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.6.4.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		
	$(function(){
		
//		$("h2").siblings().css({"color":"red","border":"2px solid red"})
//$("h2").next().css({"color":"red","border":"2px solid red"})H3
//$("h2").nextAll().css({"color":"red","border":"2px solid red"})//h2后所有同胞，不包含h2
	$("h2").nextUntil("h6").css({"color":"red","border":"2px solid red"})//2-6之间
	})
	</script>
	<style type="text/css">
		.siblings *{
				display: block;
			border: 2px solid lightgrey;
			color: lightgrey;
			padding: 5px;
			margin: 15px;
		}
	</style>
	</head>
	<body class="siblings">
		<div>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>

循环

1.元素循环

$("selector").each(function(index,element){})
选择器所选择的元素进行循环执行function方法，其中index表示遍历的索引，element表示遍历的元素

2.集合数组循环

$.each(集合数组，function(index,element))
上述方法中index和element的名称可以自定义

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.6.4.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		
		$(function(){
			$("#btn1").click(function(){
				$("li").each(function(i,li){
//			alert(i+" "+$(li).text())
//$(this)可以用来表示当前循环的元素
	alert(i+" "+$(this).text())
			})
			
		})
		})
	var provinces01={"pid":"1001","pname":"辽宁"}
	var provinces02={"pid":"1002","pname":"吉林"}
	var provinces03={"pid":"1003","pname":"黑龙江"}
	var pros=[provinces01,provinces02,provinces03]
	$.each(pros, function(i,pro) {
		console.log((i+1)+"."+pro.pid+",pname="+pro.pname)
	});
	//作业：实现两个下拉菜单的联动
	</script>
	</head>
	<body>
		<button id="btn1">点击弹出弹框提示每个列表项的内容</button>
		<ul>
			<li>选项1</li>
			<li>选项2</li>
			<li>选项3</li>
		</ul>
	</body>
</html>