📝 순회(탐색) 메소드
📌 Ancestors(조상) 메소드
선택된 요소의 상위 요소들을 선택할 수 있는 메소드
💡 $("요소명").parent()
- 선택된 요소의 바로 위 상위 요소
💡 $('요소명').parents([매개변수])
- 선택된 요소의 모든 상위 요소 리턴
- 매개변수가 있으면 매개변수와 일치하는 부모만 리턴
💡 $('요소명').parentsUntil(매개변수)
- 선택된 요소부터 매개변수 요소 전까지 범위의 요소 리턴
🔎 코드로 살펴보기
- html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>03_순회(탐색)메소드1</title>
<style>
.wrap *{
border: 1px solid lightgray;
display: block;
padding: 5px;
margin: 15px;
color: gray;
}
.type {
width: 500px;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrap">
<div class="type">div (great-grand parent)
<ul>ul (grand parent)
<li>li (direct parent)
<span>span</span>
</li>
</ul>
</div>
<div class="type">div (grand parent)
<p>p (direct parent)
<span>span</span>
</p>
</div>
</div>
<script src="js/03_순회(탐색)메소드1.js"></script>
</body>
</html>- js
$(document).ready(function(){
// parent() : 선택된 요소의 바로 상위 요소(부모)를 선택
// span 태그의 부모 요소의 테두리, 글자색을 변경
$("span").parent().css("border", "2px solid red").css("color", "red");
// li 태그의 모든 상위 요소의 글자색을 파란색으로 변경
$("li").parents().css("color", "blue");
// li 태그의 상위 요소 중 div만 선택하여 테두리 변경
$("li").parents("div").css("border", "2px dashed magenta");
// span 태그부터 상위 요소 중
// div 태그를 만나기 이전까지 요소를 선택하여 배경색 변경
$("span").parentsUntil("div").css("backgroundColor", "pink");
})🔎 출력 화면
📌 descendants(자손, 후손) 메소드
선택된 요소의 하위 요소들을 선택할 수 있는 메소드
💡 $('요소명').children([매개변수])
- 선택된 요소의 모든 자식 객체 리턴
- 매개변수가 있으면 매개변수와 일치하는 자식 객체만 리턴
💡 $('요소명').find(매개변수)
- 선택된 요소의 인자와 일치하는 모든 후손 객체 리턴
🔎 코드로 살펴보기
- html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>04_순회(탐색)메소드2</title>
<style>
.wrap *{
border: 1px solid lightgray;
display: block;
padding: 5px;
margin: 15px;
color: gray;
}
.type {
width: 500px;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrap">
<div class="type">div (great-grand parent)
<ul>ul (grand parent)
<li>li (direct parent)
<span>span</span>
</li>
</ul>
</div>
<div class="type">div (grand parent)
<p>p (direct parent)
<span>span</span>
</p>
</div>
</div>
<p id="test">테스트</p>
<script src="js/04_순회(탐색)메소드2.js"></script>
</body>
</html>- js
$(document).ready(function(){
// id가 test인 요소의 테두리를 2px 빨간 실선, 글자를 파란색으로 변경
// $("#test").css("border", "2px solid red").css("color", "blue");
// 자바스크립트 객체를 매개변수로 전달하는 방법
$("#test").css({border : "2px solid red", color : "blue"});
});
// css()의 매개변수로 사용할 코드를 미리 변수에 저장
const style1 = {"border" : "2px solid red", "color" : "red"};
const style2 = {"border" : "2px solid orange", "color" : "orange"};
const style3 = {"border" : "2px solid yellow", "color" : "yellow"};
const style4 = {"border" : "2px solid green", "color" : "green"};
const style5 = {"border" : "2px solid blue", "color" : "blue"};
$(function(){
$("#test").css(style5);
})
// -------------------------------------------------------------------
// children() : 선택된 요소의 바로 하위 요소(자식)를 선택하는 메소드
// 클래스가 wrap인 요소의 자식 스타일을 style1로 설정
$(".wrap").children().css(style1);
// ul, p태그의 스타일을 style2로 설정
// $(".type").children().css(style2);
$(".wrap").children().children().css(style2);
// children("매개변수(CSS선택자)")
// 선택된 자식 요소 중 "선택자"와 일치하는 자식만 선택
// 클래스가 type인 요소의 자식 중 ul 태그의 스타일을 style3로 설정
$(".type").children("ul").css(style3);
// 클래스가 wrap인 요소를 기준으로 li 태그의 스타일을 style4로 설정
$(".wrap").children(".type").children("ul").children("li").css(style4);
// find("매개변수(CSS선택자)")
// 선택된 요소의 후손 중 매개변수로 작성된 선택자와
// 일치하는 모든 요소를 선택
// 클래스가 wrap인 요소의 후손 중 모든 span 태그의 스타일을 style5로 설정
$(".wrap").find("span").css(style5);🔎 출력 화면
📌 sideways(옆으로, 옆에서) 메소드
같은 레벨에 있는 요소(형제)를 선택할 수 있는 메소드
💡 $('요소명').siblings([매개변수])
- 선택된 요소와 같은 레벨(형제)에 있는 모든 요소 리턴
- 매개변수가 있으면 같은 레벨에 있는 요소 중 매개변수와 일치하는 모든 요소 리턴
💡 $('요소명').next()
- 선택된 요소의 같은 레벨 중 선택된 요소 다음 한 개 요소 리턴
💡 $('요소명').nextAll()
- 선택된 요소의 같은 레벨 중 선택된 요소 다음의 모든 요소 리턴
💡 $('요소명').nextUntil(매개변수)
- 선택된 요소의 같은 레벨 중 매개변수 이전 까지의 모든 요소 리턴
💡 $('요소명').prev()
- 선택된 요소의 같은 레벨 중 선택된 요소 이전 한 개 요소 리턴
💡 $('요소명').prevAll()
- 선택된 요소의 같은 레벨 중 선택된 요소 이전의 모든 요소 리턴
💡 $('요소명').prevUntil(매개변수)
- 선택된 요소의 같은 레벨 중 매개변수 이전 까지의 모든 요소 리턴
🔎 코드로 살펴보기
- html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>05_순회(탐색)메소드3</title>
<script src="js/jquery-3.7.0.min.js"></script>
<style>
.wrap *{
border: 1px solid lightgray;
display: block;
padding: 5px;
margin: 15px;
color: gray;
}
</style>
</head>
<body>
<div class="wrap">div (parent)
<p>p</p>
<span>span</span>
<h2>h2</h2>
<h3>h3</h3>
<p>p</p>
</div>
<span>테스트용 span 태그</span>
<h2>테스트용 h2태그</h2>
<script src="js/05_순회(탐색)메소드3.js"></script>
</body>
</html>- js
const style1 = {"border" : "2px solid red", "color" : "red"};
const style2 = {"border" : "2px solid orange", "color" : "orange"};
const style3 = {"border" : "2px solid yellow", "color" : "yellow"};
const style4 = {"border" : "2px solid green", "color" : "green"};
const style5 = {"border" : "2px solid blue", "color" : "blue"};
// siblings() : 선택한 요소의 형제 요소를 모두 선택
// h2태그의 형제 요소에 스타일을 style1으로 설정
$("h2").siblings().css(style1);
// siblings("매개변수(css선택자)")
// 선택한 요소의 형제 요소 중에서
// 매개변수로 작성된 요소만 선택
// h2 태그의 형제 요소 중 p 태그만 style2를 적용
$("h2").siblings("p").css(style2);
// next() : 선택된 요소의 다음 형제 요소를 선택하는 메소드
// span 태그 다음에 오는 형제 요소의 스타일을 style3로 설정
$("span").next().css(style3);
// nextAll() : 선택된 요소의 다음 모든 형제 요소를 선택하는 메소드
// h2태그 다음에 오는 모든 형제 요소의 스타일을 style4로 설정
$("h2").nextAll().css(style4);
// nextUntil("매개변수(CSS선택자)")
// 선택된 요소 다음부터 매개변수로 작성된 형제관계 요소 이전까지를 모두 선택
// span태그부터 h3태그까지 폰트 크기를 30px로 변경
$("p").nextUntil("p").css("fontSize", "30px");
// is("CSS선택자")
// 지정된 범위 내에 매개변수로 지정된 선택자와 일치하는 요소가
// 존재하는지 확인하는 메소드
// 존재하면 true, 없으면 false를 반환
// h2태그 이전에 있는 모든 형제 요소 중 p태그가 있는지 확인
console.log($("h2").prevAll().is("p"));
// h2태그 이전에 있는 모든 형제 요소 중 pre태그 있는지 확인
console.log($("h2").prevAll().is("pre"));
$("span").on("click", function(){
console.log("span태그 클릭됨");
// console.log( $("span") );
console.log( $(this) );
console.log( this );
// 이벤트 핸들러 (이벤트 발생 시 동작을 지정하는 함수)
// 내부에 작성된 this라는 단어는
// 이벤트가 발생한 요소를 나타낸다.
})
// h2 태그를 클릭했을 때
// 클릭한 요소의 이전 요소의
// 배경색을 red, 글자를 white로 설정
$("h2").on("click", function(){
$(this).prev().css({"backgroundColor" : "red", "color" : "white"});
})🔎 출력 화면
풀스택 개발자 기록집 📁