jQuery node(DOM) 선택자
2021. 12. 8. 12:53ㆍStudy/jQuery
jQuery와 DOM
jQuery에서는 선택자 및 필터링 기반 트리탐색이 가능하다.
선택자 기반 트리 탐색 메서드
| 자식 | children('선택자') | 선택자에 해당하는 직계자식을 선택 | |
| find('선택자') | 선택자에 해당하는 자식, 자손을 선택 | 선택자 생략 불가 | |
| 부모 |
parent('선택자') | 선택자에 해당하는 직계부모를 선택 | |
| parents('선택자') | 선택자에 해당하는 부모, 조상을 선택 (body, html까지도..) | 선택자 생략 하지말자 | |
| 다음 | next('선택자') | 선택자에 해당하는 바로 다음 형제 요소 1개 를 선택 (친구) | |
| nextAll('선택자') | 선택자에 해당하는 모든 다음 형제 요소를 선택 (친구) | ||
| 이전 |
prev('선택자') | 선택자에 해당하는 이전 형제 요소 1개 를 선택 (친구) | |
| prevAll('선택자') | 선택자에 해당하는 모든 이전 형제 요소를 선택 (친구) | ||
| 제외 | siblings('선택자') | 선택자를 제외한 모든 형제요소를 선택 (친구) |
필터링 기반 트리 탐색 메서드
| eq(n) | index가 n인 요소를 선택 |
| filter() | 필터 함수를 적용하여 요소를 선택 |
| has() | 특정 요소나 선택자를 가진 요소를 선택 |
| first() | 첫번째 요소를 선택 |
| last() | 마지막 요소를 선택 |
| not() | 선택된 요소를 제거 |
| slice() | index가 start부터 end까지의 요소를 선택 |
예제 :)
<!DOCTYPE html>
<html lang="ko">
<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>animate</title>
<style>
*{margin: 0; padding: 0;}
body{font-family:'Spoqa Han Sans Neo'; font-size: 16px; color:#333; line-height:1.6; margin: 40px;}
a{color:inherit; text-decoration:none;}
img{vertical-align:top;}
.sty{color:red; background:orange; font-size: 30px;}
</style>
<script src="./js/jquery-1.12.4.min.js"></script>
<script src="./js/jquery-migrate-1.4.1.min.js"></script>
<script src="./js/jquery.easing.1.3.js"></script>
<script>
$(document).ready(function(){
$('h2:eq(1)').click(function(){
//$(this).nextAll('.box2').find('h3').addClass('sty');
// $(this).siblings('.box2').children('h3').addClass('sty');
$(this).parent().find('h3').addClass('sty');
});
});
</script>
</head>
<body>
<div class="box">
<div class="box1">
<h2>타이틀1 입니다.</h2>
<p>단락요소1 입니다.</p>
<p>단락요소2 입니다.</p>
<ul>
<li><a href="#">list1</a></li>
<li><a href="#">list2</a></li>
<li><a href="#">list3</a></li>
</ul>
<h2>타이틀2 입니다.</h2> <!-- 타겟 -->
<p>단락요소3 입니다.</p>
<p>단락요소4 입니다.</p>
<div class="box2">
<h3>타이틀3 입니다.</h3>
<p class="p1">단락요소5 입니다.</p>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<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>animate</title>
<style>
*{margin: 0; padding: 0;}
body{font-family:'Spoqa Han Sans Neo'; font-size: 16px; color:#333; line-height:1.6; margin: 40px;}
a{color:inherit; text-decoration:none;}
img{vertical-align:top;}
.sty{color:red; background:orange; font-size: 30px;}
</style>
<script src="./js/jquery-1.12.4.min.js"></script>
<script src="./js/jquery-migrate-1.4.1.min.js"></script>
<script src="./js/jquery.easing.1.3.js"></script>
<script>
$(document).ready(function(){
$('ul a').click(function(){
//$(this).nextAll('.box2').find('h3').addClass('sty');
// $(this).siblings('.box2').children('h3').addClass('sty');
$(this).parent().siblings().find('p').removeClass('sty');
$(this).next().addClass('sty');
});
});
</script>
</head>
<body>
<div class="box">
<ul>
<li>
<a href="#">list1</a>
<p>팝업 내용1 입니다.</p>
</li>
<li>
<a href="#">list2</a>
<p>팝업 내용2 입니다.</p>
</li>
<li>
<a href="#">list3</a>
<p>팝업 내용3 입니다.</p>
</li>
</ul>
</div>
</body>
</html>
'Study > jQuery' 카테고리의 다른 글
| jQuery 네비게이션2 (0) | 2021.12.09 |
|---|---|
| jQuery 네비게이션1 (0) | 2021.12.09 |
| jQuery 선택 리스트 박스 (Family Site) (0) | 2021.12.08 |
| jQuery animate rotate (feat.CSS) (0) | 2021.12.08 |
| jQuery animate caption (0) | 2021.12.08 |
