11 분 소요

2022. 06. 14. 수업내용 정리 #2/2

요소의 탐색 .. 조상 요소.. 형제 요소.. 자손 요소..


  • 조상 요소의 탐색

    DOM 트리에서 특정 요소의 부모(parent) 요소를 포함한 상위의 요소를 탐색하기 위한 메소드는 다음과 같습니다.


    1. .parent()

    2. .parents()

    3. .parentsUntil()

    4. .closest()



    • .parent() 메소드

      .parent() 메소드는 선택한 요소의 부모(parent) 요소를 선택합니다.

      이때 선택자를 인수로 전달하여, 전달받은 선택자에 해당하는 부모 요소만을 선택할 수도 있습니다.


      <!DOCTYPE html>
<html lang="ko">
    
<head>
	<meta charset="UTF-8">
	<title>jQuery Element Traversing</title>
	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<style>
		.container * { 
			display: block;
			border: 1px solid lightgray;
			padding: 5px;
			margin: 15px;
		}
	</style>
	<script>
		$(function() {
			$("button").on("click", function() {
				$("p").parent()							// <p>요소의 부모 요소를 선택함.
					.css({"border": "2px solid red"});	// 해당 요소의 CSS 스타일을 변경함.
			});
		});
	</script>
</head>
    
<body>
    
	<h1>.parent() 메소드</h1>
	<div class="container">
		<div>div 요소
			<ul>ul 요소
				<li>li 요소</li>
				<li>li 요소
					<p>p 요소 (기준)
						<span>span 요소</span>
					</p>
				</li>
				<li>li 요소</li>
			</ul>
		</div>
	</div>
    
	<button>p 요소의 부모 요소</button>
    	
</body>
    
</html>

      웹페이지 화면 ▼

      image-20220615100410987

      ★ .css() 메소드는 선택한 요소에 인수로 전달받은 스타일을 설정합니다.



    • .parents() 메소드

      .parentsUntil() 메소드는 선택한 요소의 조상 요소 중에서 전달받은 선택자에 해당하는 요소 바로 이전까지의 요소만을 모두 선택합니다.

      이때 선택자를 인수로 전달하지 않으면, .parent() 메소드와 같이 선택한 요소의 조상 요소를 모두 선택합니다.


      <!DOCTYPE html>
<html lang="ko">
    
<head>
	<meta charset="UTF-8">
	<title>jQuery Element Traversing</title>
	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<style>
		.container * { 
			display: block;
			border: 1px solid lightgray;
			padding: 5px;
			margin: 15px;
		}
	</style>
	<script>
		$(function() {
			$("button").on("click", function() {
				$("p").parents("div")					// <p>요소의 조상 요소 중에서 <div>요소를 모두 선택함.
					.css({"border": "2px solid red"});	// 해당 요소의 CSS 스타일을 변경함.
			});
		});
	</script>
</head>
    
<body>
    
	<h1>.parents() 메소드</h1>
	<div class="container">
		<div>div 요소
			<div>div 요소
				<ul>ul 요소
					<li>li 요소</li>
					<li>li 요소
						<p>p 요소 (기준)
							<span>span 요소</span>
						</p>
					</li>
					<li>li 요소</li>
				</ul>
			</div>
		</div>
	</div>
    
	<button>p 요소의 조상 요소</button>
    	
</body>
    
</html>

      웹페이지 화면 ▼ image-20220615100826803



    • .parentsUntil() 메소드

      .parentsUntil() 메소드는 선택한 요소의 조상 요소 중에서 전달받은 선택자에 해당하는 요소 바로 이전까지의 요소만을 모두 선택합니다.

      이때 선택자를 인수로 전달하지 않으면, .parent() 메소드와 같이 선택한 요소의 조상 요소를 모두 선택합니다.


      <!DOCTYPE html>
<html lang="ko">
    
<head>
	<meta charset="UTF-8">
	<title>jQuery Element Traversing</title>
	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<style>
		.container * { 
			display: block;
			border: 1px solid lightgray;
			padding: 5px;
			margin: 15px;
		}
	</style>
	<script>
		$(function() {
			$("button").on("click", function() {
				// <p>요소의 조상 요소 중에서 첫 번째 <div>요소의 바로 이전까지의 요소를 모두 선택함.
				$("p").parentsUntil("div")				
					.css({"border": "2px solid red"});	// 해당 요소의 CSS 스타일을 변경함.
			});
		});
	</script>
</head>
    
<body>
    
	<h1>.parentsUntil() 메소드</h1>
	<div class="container">
		<div>div 요소
			<ul>ul 요소
				<li>li 요소</li>
				<li>li 요소
					<p>p 요소 (기준)
						<span>span 요소</span>
					</p>
				</li>
				<li>li 요소</li>
			</ul>
		</div>
	</div>
    
	<button>p 요소의 조상 요소</button>
    	
</body>
    
</html>

      웹페이지 화면 ▼

      image-20220615100945203



    • .closest() 메소드

      .closest() 메소드는 자신을 포함한 조상 요소 중에서 전달받은 선택자에 해당하는 요소의 집합에서 가장 첫 번째 요소를 선택합니다.

      이 메소드가 요소의 집합을 구하는 방식은 .parents() 메소드와 비슷하지만, 해당 요소의 조상 요소뿐만 아니라 해당 요소 자신까지도 검사하는 점이 다릅니다.

      <!DOCTYPE html>
<html lang="ko">
    
<head>
	<meta charset="UTF-8">
	<title>jQuery Element Traversing</title>
	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<style>
		.container * { 
			display: block;
			border: 1px solid lightgray;
			padding: 5px;
			margin: 15px;
		}
	</style>
	<script>
		$(function() {
			$("#parents").on("click", function() {
				// 아이디가 "origin"인 요소의 조상 요소 중에서 <div>요소를 모두 선택함.
				$("#origin").parents("div")
					.css({"border": "2px solid red"});
			});
			$("#closest").on("click", function() {
				// 아이디가 "origin"인 요소 자신과 조상 요소 중에서 첫 번째 <div>요소를 선택함.
				$("#origin").closest("div")
					.css({"border": "2px solid green"});
			});
		});
	</script>
</head>
    
<body>
    
	<h1>.parents() 메소드</h1>
	<div class="container">
		<div>div 요소
			<div>div 요소
				<ul>ul 요소
					<li>li 요소</li>
					<li>li 요소
						<div id="origin">div 요소 (기준)
							<span>span 요소</span>
						</div>
					</li>
					<li>li 요소</li>
				</ul>
			</div>
		</div>
	</div>
    
	<button id="parents">parents() 메소드</button>
	<button id="closest">closest() 메소드</button>
    	
</body>
    
</html>

      웹페이지 화면 ▼

      image-20220615101120322



  • 형제(sibling) 요소의 탐색

    DOM 트리에서 특정 요소의 형제(sibling) 요소를 탐색하기 위한 메소드는 다음과 같습니다.

    1. .siblings()

    2. .next()

    3. .nextAll()

    4. .nextUntil()

    5. .prev()

    6. .prevAll()

    7. .prevUntil()



    • .siblings() 메소드

      .siblings() 메소드는 선택한 요소의 형제(sibling) 요소 중에서 지정한 선택자에 해당하는 요소를 모두 선택합니다.

      <!DOCTYPE html>
<html lang="ko">
    
<head>
	<meta charset="UTF-8">
	<title>jQuery Sibling Element Traversing</title>
	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<style>
		.container * { 
			display: block;
			border: 1px solid lightgray;
			padding: 5px;
			margin: 15px;
		}
	</style>
	<script>
		$(function() {
			$("button").on("click", function() {
				$("h4").siblings()						// <h4>요소의 형제 요소를 모두 선택함.
					.css({"border": "2px solid red"});	// 해당 요소의 CSS 스타일을 변경함.
			});
		});
	</script>
</head>
    
<body>
    
	<h1>.siblings() 메소드</h1>
	<div class="container">
		<div>div 요소</div>
		<h2>h2 요소</h2>
		<h3>h3 요소</h3>
		<h4>h4 요소 (기준)</h4>
		<h5>h5 요소</h5>
		<h6>h6 요소</h6>
		<p>p 요소</p>
	</div>
    
	<button>h4 요소의 형제 요소</button>
    	
</body>
    
</html>

      웹페이지 화면 ▼

      image-20220615101434844



    • .next() 메소드

      .next() 메소드는 선택한 요소의 바로 다음에 위치한 형제 요소를 선택합니다.

      <!DOCTYPE html>
<html lang="ko">
    
<head>
	<meta charset="UTF-8">
	<title>jQuery Sibling Element Traversing</title>
	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<style>
		.container * { 
			display: block;
			border: 1px solid lightgray;
			padding: 5px;
			margin: 15px;
		}
	</style>
	<script>
		$(function() {
			$("button").on("click", function() {
				$("h4").next()							// <h4>요소의 바로 다음 형제 요소를 선택함.
					.css({"border": "2px solid red"});	// 해당 요소의 CSS 스타일을 변경함.
			});
		});
	</script>
</head>
    
<body>
    
	<h1>.next() 메소드</h1>
	<div class="container">
		<div>div 요소</div>
		<h2>h2 요소</h2>
		<h3>h3 요소</h3>
		<h4>h4 요소 (기준)</h4>
		<h5>h5 요소</h5>
		<h6>h6 요소</h6>
		<p>p 요소</p>
	</div>
    
	<button>h4 요소의 형제 요소</button>
    	
</body>
    
</html>

      웹페이지 화면 ▼

      image-20220615101633761



    • .nextAll() 메소드

      .nextAll() 메소드는 선택한 요소의 다음에 위치한 형제 요소를 모두 선택합니다.

      이때 선택자를 인수로 전달하여, 전달받은 선택자에 해당하는 형제 요소만을 선택할 수도 있습니다.

      <!DOCTYPE html>
<html lang="ko">
    
<head>
	<meta charset="UTF-8">
	<title>jQuery Sibling Element Traversing</title>
	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<style>
		.container * { 
			display: block;
			border: 1px solid lightgray;
			padding: 5px;
			margin: 15px;
		}
	</style>
	<script>
		$(function() {
			$("button").on("click", function() {
				$("h4").nextAll()						// <h4> 요소의 다음에 있는 형제 요소를 모두 선택함.
					.css({"border": "2px solid red"});	// 해당 요소의 CSS 스타일을 변경함.
			});
		});
	</script>
</head>
    
<body>
    
	<h1>.nextAll() 메소드</h1>
	<div class="container">
		<div>div 요소</div>
		<h2>h2 요소</h2>
		<h3>h3 요소</h3>
		<h4>h4 요소 (기준)</h4>
		<h5>h5 요소</h5>
		<h6>h6 요소</h6>
		<p>p 요소</p>
	</div>
    
	<button>h4 요소의 형제 요소</button>
    	
</body>
    
</html>

      웹페이지 화면 ▼

      image-20220615101837770



    • .nextUntil() 메소드

      .nextUntil() 메소드는 선택한 요소의 형제 요소 중에서 전달받은 선택자에 해당하는 요소 바로 이전까지의 요소만을 모두 선택합니다.

      이때 선택자를 인수로 전달하지 않으면, .nextAll() 메소드와 같이 선택한 요소의 다음에 위치한 형제 요소를 모두 선택합니다.

      <!DOCTYPE html>
<html lang="ko">
    
<head>
	<meta charset="UTF-8">
	<title>jQuery Sibling Element Traversing</title>
	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<style>
		.container * { 
			display: block;
			border: 1px solid lightgray;
			padding: 5px;
			margin: 15px;
		}
	</style>
	<script>
		$(function() {
			$("button").on("click", function() {
				// <h4>요소의 형제 요소 중에서 첫 번째 <p>요소의 바로 이전까지의 모든 요소를 선택함.
				$("h4").nextUntil("p")
					.css({"border": "2px solid red"});	// 해당 요소의 CSS 스타일을 변경함.
			});
		});
	</script>
</head>
    
<body>
    
	<h1>.nextUntil() 메소드</h1>
	<div class="container">
		<div>div 요소</div>
		<h2>h2 요소</h2>
		<h3>h3 요소</h3>
		<h4>h4 요소 (기준)</h4>
		<h5>h5 요소</h5>
		<h6>h6 요소</h6>
		<p>p 요소</p>
	</div>
    
	<button>h4 요소의 형제 요소</button>
    	
</body>
    
</html>

      웹페이지 화면 ▼

      image-20220615102032493

    • .prev(), .prevAll(), .prevUntil() 메소드

      이 메소드들은 각각 .next(), .nextAll(), .nextUntil() 메소드와 정반대로 동작하여 요소들을 선택해 줍니다.



  • 자손(descendant) 요소의 탐색

    DOM 트리에서 특정 요소의 자손(descendant) 요소를 탐색하기 위한 메소드는 다음과 같습니다.

    1. .children()

    2. .find()



    • .children() 메소드

      .children() 메소드는 선택한 요소의 자식(child) 요소를 모두 선택합니다.

      이때 선택자를 인수로 전달하여, 전달받은 선택자에 해당하는 자식 요소만을 선택할 수도 있습니다.

      <!DOCTYPE html>
<html lang="ko">
    
<head>
	<meta charset="UTF-8">
	<title>jQuery Descendant Element Traversing</title>
	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<style>
		.container * { 
			display: block;
			border: 1px solid lightgray;
			padding: 5px;
			margin: 15px;
		}
	</style>
	<script>
		$(function() {
			$("button").on("click", function() {
				$("ul").children()						// <p>요소의 자식 요소를 모두 선택함.
					.css({"border": "2px solid red"});	// 해당 요소의 CSS 스타일을 변경함.
			});
		});
	</script>
</head>
    
<body>
    
	<h1>.children() 메소드</h1>
	<div class="container">
		<div>div 요소
			<ul>ul 요소 (기준)
				<li>li 요소</li>
				<li>li 요소
					<p>p 요소
						<span>span 요소</span>
					</p>
				</li>
				<li>li 요소
					<p>p 요소</p>
				</li>
			</ul>
		</div>
	</div>
    
	<button>ul 요소의 자식 요소</button>
    	
</body>
    
</html>

      웹페이지 화면 ▼

      image-20220615103050623



    • .find() 메소드

      .find() 메소드는 선택한 요소의 자손(descendant) 요소 중에서 전달받은 선택자에 해당하는 자손 요소를 모두 선택합니다.

      이때 별표(“*“)를 인수로 전달하여, 선택한 요소의 자손 요소를 모두 선택할 수도 있습니다.

      <!DOCTYPE html>
<html lang="ko">
    
<head>
	<meta charset="UTF-8">
	<title>jQuery Descendant Element Traversing</title>
	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<style>
		.container * { 
			display: block;
			border: 1px solid lightgray;
			padding: 5px;
			margin: 15px;
		}
	</style>
	<script>
		$(function() {
			$("button").on("click", function() {
				$("li").find("*")						// 각 <li>요소의 자손 요소을 모두 선택함.
					.css({"border": "2px solid red"});	// 해당 요소의 CSS 스타일을 변경함.
			});
		});
	</script>
</head>
    
<body>
    
	<h1>.find() 메소드</h1>
	<div class="container">
		<div>div 요소
			<ul>ul 요소 (기준)
				<li>li 요소</li>
				<li>li 요소
					<p>p 요소
						<span>span 요소</span>
					</p>
				</li>
				<li>li 요소
					<p>p 요소</p>
				</li>
			</ul>
		</div>
	</div>
    
	<button>ul 요소의 자손 요소</button>
    	
</body>
    
</html>

      웹페이지 화면 ▼

      image-20220615103226655



  • 필터링(filtering) 메소드

    DOM 트리에서 선택한 요소를 필터링하기 위한 메소드는 다음과 같습니다.


    1. .first()

    2. .last()

    3. .eq()

    4. .filter()

    5. .not()


    • .first(), .last() 메소드

      .first() 메소드는 선택한 요소 중에서 첫 번째 요소를 선택하고, .last() 메소드는 마지막 요소를 선택합니다.

      <!DOCTYPE html>
<html lang="ko">
    
<head>
	<meta charset="UTF-8">
	<title>jQuery Filtering</title>
	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<script>
		$(function() {
			$("#firstBtn").on("click", function() {
				$("li").first()								// 선택한 <li>요소 중에서 첫 번째 요소만을 선택함.
					.css({"border": "2px solid green"});	// 해당 요소의 CSS 스타일을 변경함.
			});
			$("#lastBtn").on("click", function() {
				$("li").last()								// 선택한 <li>요소 중에서 마지막 요소만을 선택함.
					.css({"border": "2px solid orange"});	// 해당 요소의 CSS 스타일을 변경함.
			});
		});
	</script>
</head>
    
<body>
    
	<h1>.first() 메소드와 .last() 메소드</h1>
	<ul>
		<li>첫 번째 아이템이에요!</li>
		<li>두 번째 아이템이에요!</li>
		<li>세 번째 아이템이에요!</li>
	</ul>
	<button id="firstBtn">first()</button>
	<button id="lastBtn">last()</button>
    	
</body>
    
</html>

      웹페이지 화면 ▼

      image-20220615103505661



    • .eq() 메소드

      .eq() 메소드는 선택한 요소 중에서 전달받은 인덱스에 해당하는 요소를 선택합니다.

      이때 선택한 요소 집합의 맨 처음 요소를 인덱스 0으로 놓고, 앞에서부터 검색합니다.

      <!DOCTYPE html>
<html lang="ko">
    
<head>
	<meta charset="UTF-8">
	<title>jQuery Filtering</title>
	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<script>
		$(function() {
			$("#clockwiseBtn").on("click", function() {
				$("li").eq(1)								// 선택한 <li>요소 중에서 두 번째 요소만을 선택함.
					.css({"border": "2px solid green"});	// 해당 요소의 CSS 스타일을 변경함.
			});
			$("#counterBtn").on("click", function() {
				$("li").eq(-1)								// 선택한 <li>요소 중에서 뒤에서부터 첫 번째 요소만을 선택함.
					.css({"border": "2px solid orange"});	// 해당 요소의 CSS 스타일을 변경함.
			});
		});
	</script>
</head>
    
<body>
    
	<h1>.eq() 메소드</h1>
	<ul>
		<li>첫 번째 아이템이에요!</li>
		<li>두 번째 아이템이에요!</li>
		<li>세 번째 아이템이에요!</li>
		<li>네 번째 아이템이에요!</li>
	</ul>
	<button id="clockwiseBtn">eq(1)</button>
	<button id="counterBtn">eq(-1)</button>
    	
</body>
    
</html>

      웹페이지 화면 ▼

      image-20220615103624339

      위의 예제처럼 .eq() 메소드는 음의 정수도 인수로 전달받을 수 있습니다.

      이때는 선택한 요소 집합의 맨 마지막 요소를 인덱스 -1로 놓고, 뒤에서부터 검색합니다.



    • .filter() 메소드

      .filter() 메소드는 선택한 요소 중에서 전달받은 선택자에 해당하거나, 함수 호출의 결과가 참(true)인 요소를 모두 선택합니다.

      이 메소드는 인수로 선택자나 제이쿼리 객체, HTML DOM 요소 등을 전달받을 수 있습니다.

      또한, 요소 집합의 각 요소를 검사할 수 있는 함수를 전달할 수도 있습니다.

      <!DOCTYPE html>
<html lang="ko">
    
<head>
	<meta charset="UTF-8">
	<title>jQuery Filtering</title>
	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<script>
		$(function() {
			$("button").on("click", function() {
				$("li").filter(":odd")						// 선택한 <li>요소 중에서 인덱스가 홀수인 요소만을 선택함.
					.css({"border": "2px solid green"});	// 해당 요소의 CSS 스타일을 변경함.
			});
		});
	</script>
</head>
    
<body>
    
	<h1>.filter() 메소드</h1>
	<ul>
		<li>첫 번째 아이템이에요!</li>
		<li>두 번째 아이템이에요!</li>
		<li>세 번째 아이템이에요!</li>
		<li>네 번째 아이템이에요!</li>
	</ul>
	<p>제이쿼리에서 인덱스는 언제나 0부터 시작합니다!!</p>
	<button>인덱스가 홀수인 요소</button>
    	
</body>
    
</html>

      웹페이지 화면 ▼

      image-20220615103806972

      :odd 선택자는 인덱스가 홀수인 요소를 모두 선택하는 선택자입니다.

      하지만 위의 예제에서 :odd 선택자는 두 번째와 네 번째 요소를 선택해 줍니다.

      이것은 제이쿼리의 인덱스가 언제나 0부터 시작하기 때문입니다.

      따라서 :odd나 :even 선택자를 사용할 때는 언제나 인덱스가 0부터 시작한다는 사실을 염두에 두고 사용해야 합니다.

    • .not() 메소드

      .not() 메소드는 선택한 요소 중에서 전달받은 선택자에 해당하거나, 함수 호출의 결과가 참(true)인 요소를 제외한 나머지 요소를 모두 선택합니다.

      즉, .filter() 메소드와는 정반대로 동작하여 요소를 선택합니다.

      <!DOCTYPE html>
<html lang="ko">
    
<head>
	<meta charset="UTF-8">
	<title>jQuery Filtering</title>
	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<script>
		$(function() {
			$("button").on("click", function() {
				$("li").not(":lt(2)")	// 선택한 <li>요소 중에서 인덱스가 2보다 작지 않은 요소만을 선택함.
					.css({"border": "2px solid green"});	// 해당 요소의 CSS 스타일을 변경함.
			});
		});
	</script>
</head>
    
<body>
    
	<h1>.not() 메소드</h1>
	<ul>
		<li>첫 번째 아이템이에요!</li>
		<li>두 번째 아이템이에요!</li>
		<li>세 번째 아이템이에요!</li>
		<li>네 번째 아이템이에요!</li>
	</ul>
	<p>제이쿼리에서 인덱스는 언제나 0부터 시작합니다!!</p>
	<button>인덱스가 2보다 작지 않은 요소</button>
    	
</body>
    
</html>

      웹페이지 화면 ▼

      image-20220615103948967

      위의 예제에서 .not() 메소드에 인수로 전달된 식별자는 ‘인덱스가 2보다 작은’이라는 의미를 가지는 식별자입니다.

      따라서 .not() 메소드는 인덱스가 2보다 작지 않은, 즉 인덱스가 2인 요소와 2보다 큰 요소를 모두 선택해 줍니다.



    • .has() 메소드

      .has() 메소드는 선택한 요소 중에서 전달받은 선택자에 해당하는 요소를 자손 요소로 가지고 있는 요소를 모두 선택합니다.

      다음 예제는 선택한 <li>요소 중에서 자손 요소로 요소를 가지고 있는 요소만의 스타일을 변경하는 예제입니다.

      <!DOCTYPE html>
<html lang="ko">
    
<head>
	<meta charset="UTF-8">
	<title>jQuery Filtering</title>
	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<script>
		$(function() {
			$("button").on("click", function() {
				// 선택한 <li>요소 중에서 자손 요소로 <span>요소를 가지고 있는 요소만을 선택함.
				$("li").has("span")
					.css({"border": "2px solid green"});	// 해당 요소의 CSS 스타일을 변경함.
			});
		});
	</script>
</head>
    
<body>
    
	<h1>.has() 메소드</h1>
	<ul>
		<li><span>첫 번째 아이템</span>이에요!</li>
		<li><span>두 번째 아이템</span>이에요!</li>
		<li>세 번째 아이템이에요!</li>
		<li>네 번째 아이템이에요!</li>
	</ul>
	<button>자손 요소로 span 요소를 가지는 요소</button>
    	
</body>
    
</html>

      웹페이지 화면 ▼

      image-20220615104240040



    • .is() 메소드

      .is() 메소드는 선택한 요소 중에서 전달받은 선택자에 해당하는 요소가 하나라도 존재하면 참을 반환합니다.

      <!DOCTYPE html>
<html lang="ko">
    
<head>
	<meta charset="UTF-8">
	<title>jQuery Filtering</title>
	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<script>
		$(function() {
			$("button").on("click", function() {
				// 선택한 <span>요소의 조상 요소 중에서 <ul>요소가 하나라도 존재하면 true를 반환함.
				if ($("span").parents().is("ul")) {
					$("#text").html("span 요소의 조상 요소에는 ul 요소도 존재합니다.");
				}
			});
		});
	</script>
</head>
    
<body>
    
	<h1>.is() 메소드</h1>
	<ul>
		<li><span>첫 번째 아이템</span>이에요!</li>
		<li><span>두 번째 아이템</span>이에요!</li>
		<li>세 번째 아이템이에요!</li>
		<li>네 번째 아이템이에요!</li>
	</ul>
	<button>span 요소의 조상 요소에는 ul 요소도 존재하는가?</button>
	<p id="text"></p>
    	
</body>
    
</html>

      웹페이지 화면 ▼

      image-20220615104400221

      위의 예제에서는 우선 선택한 요소의 모든 조상 요소를 다시 선택합니다.

      그리고서 선택된 모든 조상 요소 중에 <ul>요소가 존재하는지 여부를 .is() 메소드를 통해 검사하고 있습니다.



    • .map() 메소드

      .map() 메소드는 선택한 요소 집합의 각 요소마다 지정된 콜백 함수를 실행하고, 그 반환값으로 구성된 제이쿼리 객체를 반환합니다.

      <!DOCTYPE html>
<html lang="ko">
    
<head>
	<meta charset="UTF-8">
	<title>jQuery Filtering</title>
	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<script>
		$(function() {
			$("button").on("click", function() {
				// 선택한 <li>요소마다 콜백함수를 실행하여 각 <li>요소의 id 값을 반환함.
				var ids = $("li").map(function() {
					return this.id;
				})
				.get()		// 반환된 모든 id 값을 하나의 배열로 반환함.
				.join();	// 배열의 모든 요소를 쉼표(,)로 구분하는 하나의 문자열로 반환함.
				$("#text").html(ids);
			});
		});
	</script>
</head>
    
<body>
    
	<h1>.map() 메소드</h1>
	<ul>
		<li id="one">첫 번째 아이템이에요!</li>
		<li id="two">두 번째 아이템이에요!</li>
		<li id="three">세 번째 아이템이에요!</li>
		<li id="four">네 번째 아이템이에요!</li>
	</ul>
	<button>li 요소의 모든 id 값을 출력!</button>
	<p id="text"></p>
    	
</body>
    
</html>

      웹페이지 화면 ▼

      image-20220615104552715

      위의 예제는 선택한 <li>요소 집합의 각 요소마다 해당 요소의 id 값을 반환하는 콜백함수를 실행합니다.

      콜백함수의 실행으로 반환되는 값들은 .get() 메소드를 통해 하나의 배열로 반환되며, 다시 .join() 메소드를 통해 하나의 문자열로 변환되어 반환됩니다.



    • .slice() 메소드

      .slice() 메소드는 선택한 요소 중에서 전달받은 인덱스 범위에 해당하는 요소만을 선택합니다.

      <!DOCTYPE html>
<html lang="ko">
    
<head>
	<meta charset="UTF-8">
	<title>jQuery Filtering</title>
	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<script>
		$(function() {
			$("button").on("click", function() {
				// 선택한 <li>요소 중에서 인덱스가 1과 같거나 그 이상인 요소만을 선택함.
				$("li").slice(1)
					.css({"border": "2px solid green"});	// 해당 요소의 CSS 스타일을 변경함.
			});
		});
	</script>
</head>
    
<body>
    
	<h1>.slice() 메소드</h1>
	<ul>
		<li>첫 번째 아이템이에요!</li>
		<li>두 번째 아이템이에요!</li>
		<li>세 번째 아이템이에요!</li>
		<li>네 번째 아이템이에요!</li>
	</ul>
	<button>인덱스가 1이상인 요소!</button>
	<p id="text"></p>
    	
</body>
    
</html>

      웹페이지 화면 ▼

      image-20220615104721353

​

태그:

카테고리:

업데이트:

댓글남기기

참고

Tip03

1 분 소요

CLI Command 정리 명령어 간단 정리..