728x90
조상 요소의 탐색
parent()
- 선택한 요소의 부모요소를 선택
- 선택자를 인수로 전달하여 전달받은 선택자에 해당하는 부모 요소만을 선택할 수 있음
parents()
- 선택한 요소의 조상요소를 모두 선택
- 선택자를 인수로 전달하여 전달받은 선택자에 해당하는 부모 요소만을 모두 선택할 수 있음
parentsUntil()
- 선택한 요소의 조상 요소 중에서 전달받은 선택자에 해당하는 요소 바로 이전까지의 요소만을 모두 선택
- 선택자를 인수로 전달하지 않으면 parents() 메소드와 같이 선택한 요소의 조상 요소를 모두 선택
형제 요소의 탐색
siblings()
- 선택한 요소의 형제 요소 중에서 지정한 선택자에 해당하는 요소를 모두 선택
next()
- 선택한 요소의 바로 다음에 위치한 형제 요소를 선택
nextAll()
- 선택한 요소의 다음에 위치한 형제 요소를 모두 선택
- 전달받은 선택자에 해당하는 형제 요소만을 선택할 수도 있음
prev(), prevAll(), preveUntil()
자손 요소의 탐색
children()
- 매개변수로 전달된 요소를 하위 요소에서 찾아줌
find()
- 선택한 요소의 자손 요소 중에서 전달받은 선택자에 해당하는 자손 요소를 모두 선택
- 별표(*)를 인수로 전달하여 선택한 자손 요소를 모두 선택할 수도 있음
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>조상, 형제, 자손의 탐색</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script>
$(function(){
$('#parentBtn').on('click', function(){
// $('p').parent().css('border', '3px solid red');
// $('p').parents().css('border', '3px solid red');
// $('p').parents('div').css('border', '3px solid red');
$('p').parentsUntil('div').css('border', '3px solid red');//부모가 div를 만나기 전까지 모든 요소
});
$('#siblingBtn').on('click', function(){
// $('#second').siblings().css({"border":"3px solid blue" });
// $('#second').next().css({"border":"3px solid blue" });
$('#second').nextAll().css({"border":"3px solid blue" });
});
$('#childBtn').on('click', function(){
$('ul').children().css({'border' : '3px solid gold'});//자식
});
$('#findBtn').on('click', function(){
$('li').find('*').css({'border':'3px solid pink'});//자손
});
})
</script>
<style>
.container * {
display: block;
border: 1px solid deepskyblue;
padding: 5px;
margin: 15px;
}
</style>
</head>
<body>
<h2>조상, 형제, 자손의 탐색</h2>
<div class="container">
<div>div 요소
<ul>ul 요소
<li>li 요소</li>
<li id="second">li 요소
<p>p 요소
<span>span 요소</span>
</p>
</li>
<li>li 요소</li>
<li>li 요소</li>
</ul>
</div>
</div>
<button id="parentBtn">p 요소의 부모 요소</button>
<button id="siblingBtn">li 요소의 형제 요소</button>
<button id="childBtn">ul 요소의 모든 자식 요소</button>
<button id="findBtn">li 요소의 모든 자손 요소</button>
</body>
</html>
728x90
'JS > jQuery' 카테고리의 다른 글
| [jQuery] attribute & property (0) | 2022.05.09 |
|---|---|
| [jQuery] 박스 모델 메소드 (0) | 2022.05.09 |
| [jQuery] 요소 (0) | 2022.05.09 |
| [jQuery] jQuery로 DOM 다루기 (0) | 2022.05.09 |
| [jQuery] 메소드 체이닝(method chaining) (0) | 2022.05.09 |