지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

jQuery 탐색의 용도는 무엇입니까? jQuery 순회 구현

青灯夜游
풀어 주다： 2018-11-13 09:51:53
앞으로
2331명이 탐색했습니다.

이 글의 내용은 jQuery Traversal의 용도가 무엇인지 소개하는 것입니다. jQuery 순회 구현. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

jQuery 순회를 사용하면 선택한(현재) 요소에서 시작하여 가계도에서 쉽게 위(조상), 아래(자손), 수평(형제)으로 이동할 수 있습니다. 이러한 움직임을 DOM 탐색이라고 합니다. [추천 관련 비디오 튜토리얼: jQuery tutorial]

1 요소의 조상을 찾기 위해 DOM 트리를 위쪽으로 탐색합니다#🎜🎜 ##🎜 🎜#활용: parent() 메소드, parent() 메소드, parentUntil() 메소드

<!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>
로그인 후 복사

　

#🎜🎜 #

2. DOM 트리를 아래쪽으로 탐색하여 요소의 자손을 찾습니다.

Utilize: children() 메서드, 찾기 () 방법. 

<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>
로그인 후 복사

#🎜 🎜 #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("h5").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>
			<h5>Hello</h5>
			<p id="myp24" style="width:140px;height:20px;padding: 5px;border:2px solid green;">
			</p>
		</p>
	</body>

</html>
로그인 후 복사

#🎜 🎜 #4 , 필터링 방법: 요소 집합에서의 위치를 ​​기준으로 특정 요소 선택

활용: first() 메서드, last() 메서드, eq() 메서드, filter( ) 메서드 , not() 메소드 🎜#

요약: 위 내용은 이 글의 전체 내용이므로, 모든 분들의 공부에 도움이 되길 바랍니다.

위 내용은 jQuery 탐색의 용도는 무엇입니까? jQuery 순회 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
查找元素
원천：cnblogs.com
이전 기사：JavaScript에서 일반적으로 사용되는 Array 객체 메서드 소개(코드 예제) 다음 기사：jQuery는 HTML 요소와 속성에 대해 어떻게 작동합니까? (상세 코드 설명 예시)
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
루프 오버를 위해 ID별로 MySQL 결과 그룹화 mysql에 비행 데이터가 포함된 테이블이 있습니다. codeigniter3 travel_idair_idFlightDurationout_or_inflightdur...
에서 2024-04-06 17:27:56
0
1
406
AJAX POST 요청의 필드 업데이트 jQuery 또는 Javascript를 사용하여 AJAXPOST 요청에서 사용자 정의 필드를 동적으로 업데이트하려고 합니다. AJAXPOST 요청은 WordPre...
에서 2024-04-02 11:45:41
0
1
360
Node.js의 이벤트 처리 루프 뒤에 있는 이론을 살펴보세요. nodev10.0+constfs=require("fs"); constpath=require("path"); 와 호환되는 비동기...
에서 2024-04-01 19:35:24
0
1
273
HTML/JavaScript에서 for 루프를 사용하여 범위 태그를 반복하는 방법은 무엇입니까? 그렇게 많은 스팬 태그를 압축하는 방법은 무엇입니까? 최대한 작게 만들려고 노력 중이에요. 어떤 조언이라도 도움이 될 것입니다. 감사합니다! <header&...
에서 2024-03-31 16:15:40
0
1
341
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿