jQuery遍历的作用是什么-创新互联

这篇文章主要介绍jQuery遍历的作用是什么，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

成都创新互联长期为上千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为固镇企业提供专业的成都网站设计、做网站，固镇网站改版等技术服务。拥有10余年丰富建站经验和众多成功案例,为您定制开发。

1、 向上遍历 DOM 树，查找元素的祖先

利用：parent() 方法，parents() 方法，parentsUntil() 方法

<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>My Test JQuery</title>
		<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">
			$(function() {
				//parent() 方法返回被选元素的直接父元素。该方法只会向上一级对 DOM 树进行遍历。
				//parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
				//parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。            
				$("#btn_parent").click(function() {
					$("#myp3").parent().css({
						"color": "red",
						"border": "3px solid red"
					});
				});
				$("#btn_parents").click(function() {
					$("#myp3").parents().css({
						"color": "red",
						"border": "3px solid red"
					});
				});
				$("#btn_parentsUntil").click(function() {
					$("#myp3").parentsUntil("body").css({
						"color": "red",
						"border": "3px solid red"
					});
				});
			});
		</script>
	</head>

	<body>
		<button type="button" id="btn_parent">parent</button><br/>
		<button type="button" id="btn_parents">parents</button><br/>
		<button type="button" id="btn_parentsUntil">parentsUntil</button><br/>
		<p id="myp1" style="width:210px;height:90px;padding: 10px;border:2px solid blue;">
			<p id="myp2" style="width:140px;height:60px;padding: 10px;border:2px solid green;">
				<p id="myp3" style="width:70px;height:30px;padding: 10px;border:2px solid yellow;">
				</p>
			</p>
		</p>
	</body>

</html>

jQuery遍历的作用是什么　　jQuery遍历的作用是什么

jQuery遍历的作用是什么　　jQuery遍历的作用是什么

2、向下遍历 DOM 树，查找元素的后代

利用：children() 方法，find() 方法。

<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>My Test JQuery</title>
		<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">
			$(function() {
				//children() 方法返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历。
				//find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。            
				$("#btn_children1").click(function() {
					$("#myp1").children().css({
						"color": "red",
						"border": "3px solid red"
					});
				});
				$("#btn_children2").click(function() {
					$("#myp1").children("p.class1").css({
						"color": "red",
						"border": "3px solid red"
					});
				});
				$("#btn_find1").click(function() {
					$("#myp1").find("p").css({
						"color": "red",
						"border": "3px solid red"
					});
				});
				$("#btn_find2").click(function() {
					$("#myp1").find("*").css({
						"color": "red",
						"border": "3px solid red"
					});
				});
			});
		</script>
	</head>

	<body>
		<button type="button" id="btn_children1">children</button><br/>
		<button type="button" id="btn_children2">children_class1</button><br/>
		<button type="button" id="btn_find1">findp</button><br/>
		<button type="button" id="btn_find2">find*</button><br/>
		<p id="myp1" style="width:210px;height:140px;padding: 10px;border:2px solid blue;">
			<p id="myp2" style="width:140px;height:60px;padding: 10px;border:2px solid green;">
				<p id="myp3" style="width:70px;height:40px;padding: 10px;border:2px solid yellow;">
					<p id="myP1" style="width:50px;height:20px;padding: 3px;border:2px solid black;">
					</p>
				</p>
			</p>
			<p Class="class1" style="width:140px;height:30px;padding: 10px;border:2px solid green;">
			</p>
		</p>
	</body>

</html>

jQuery遍历的作用是什么  jQuery遍历的作用是什么jQuery遍历的作用是什么

jQuery遍历的作用是什么  jQuery遍历的作用是什么

3、 遍历元素的同胞元素：

利用：siblings() 方法，next() 方法，nextAll() 方法，nextUntil() 方法。

<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>My Test JQuery</title>
		<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">
			$(function() {
				//children() 方法返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历。
				//find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。            
				$("#btn_siblings").click(function() {
					$("#myp21").siblings().css({
						"color": "red",
						"border": "3px solid red"
					});
				});
				$("#btn_next").click(function() {
					$("#myp21").next().css({
						"color": "red",
						"border": "3px solid red"
					});
				});
				$("#btn_nextAll").click(function() {
					$("#myp21").nextAll().css({
						"color": "red",
						"border": "3px solid red"
					});
				});
				$("#btn_nextUntil").click(function() {
					$("#myp21").nextUntil("h6").css({
						"color": "red",
						"border": "3px solid red"
					});
				});
			});
		</script>
	</head>

	<body>
		<button type="button" id="btn_siblings">siblings</button><br/>
		<button type="button" id="btn_next">next</button><br/>
		<button type="button" id="btn_nextAll">nextAll</button><br/>
		<button type="button" id="btn_nextUntil">nextUntil</button><br/>
		<p id="myp1" style="width:210px;height:190px;padding: 10px;border:2px solid blue;">
			<p id="myp21" style="width:140px;height:20px;padding: 5px;border:2px solid green;">
			</p>
			<p id="myp22" style="width:140px;height:20px;padding: 5px;border:2px solid green;">
			</p>
			<p id="myp23" style="width:140px;height:20px;padding: 5px;border:2px solid green;">
			</p>
			<h6>Hello</h6>
			<p id="myp24" style="width:140px;height:20px;padding: 5px;border:2px solid green;">
			</p>
		</p>
	</body>

</html>

jQuery遍历的作用是什么jQuery遍历的作用是什么jQuery遍历的作用是什么

jQuery遍历的作用是什么 jQuery遍历的作用是什么

4、 过滤方法：基于其在一组元素中的位置来选择一个特定的元素

利用：first() 方法，last() 方法，eq() 方法，filter() 方法，not() 方法

<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>My Test JQuery</title>
		<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">
			$(function() {
				//first() 方法返回被选元素的首个元素。
				//last() 方法返回被选元素的最后一个元素。
				//eq() 方法返回被选元素中带有指定索引号的元素。
				//filter() 方法允许你规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
				//not() 方法返回不匹配标准的所有元素。            
				$("#btn_first").click(function() {
					$("#myp1 p").first().css({
						"color": "red",
						"border": "3px solid red"
					});
				});
				$("#btn_last").click(function() {
					$("#myp1 p").last().css({
						"color": "red",
						"border": "3px solid red"
					});
				});
				$("#btn_eq").click(function() {
					$("#myp1 p").eq(2).css({
						"color": "red",
						"border": "3px solid red"
					});
				});
				$("#btn_filter").click(function() {
					$("#myp1 *").filter("h6").css({
						"color": "red",
						"border": "3px solid red"
					});
				});
				$("#btn_not").click(function() {
					$("#myp1 *").not("h6").css({
						"color": "red",
						"border": "3px solid red"
					});
				});
			});
		</script>
	</head>

	<body>
		<button type="button" id="btn_first">first</button>
		<button type="button" id="btn_last">last</button>
		<button type="button" id="btn_eq">eq</button>
		<button type="button" id="btn_filter">filter</button>
		<button type="button" id="btn_not">not</button>
		<p id="myp1" style="width:210px;height:190px;padding: 10px;border:2px solid blue;">
			<p id="myp21" style="width:140px;height:20px;padding: 5px;border:2px solid green;">
			</p>
			<p id="myp22" style="width:140px;height:20px;padding: 5px;border:2px solid green;">
			</p>
			<p id="myp23" style="width:140px;height:20px;padding: 5px;border:2px solid green;">
			</p>
			<h6>Hello</h6>
			<p id="myp24" style="width:140px;height:20px;padding: 5px;border:2px solid green;">
			</p>
		</p>
	</body>

</html>

jQuery遍历的作用是什么jQuery遍历的作用是什么jQuery遍历的作用是什么

jQuery遍历的作用是什么jQuery遍历的作用是什么jQuery遍历的作用是什么

以上是jQuery遍历的作用是什么的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

文章题目：jQuery遍历的作用是什么-创新互联
标题来源：https://www.cdcxhl.com/article46/dcdgeg.html

成都网站建设公司_创新互联，为您提供网站内链、定制网站、响应式网站、做网站、小程序开发、商城网站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

网站托管运营

域名注册知识

分类信息网站