Front/jQuery
jQuery - 선택자(인접 관계 선택자)
by Hyeon_
2021. 12. 13.
jQuery 선택자(selector)
- jQuery 코드는 선택자와 메소드의 조합으로 구성되는 경우가 많음
- 중간에 자바스크립트 코드 같이 작성
- HTML 태그를 쉽게 선택하기 위해 선택자 사용
선택자 종류
- 직접 선택자
- 인접 관계 선택자
- 상위 요소(조상 / 부모) 선택자
- 하위 요소(자식 / 자손) 선택자
- 형제 선택자
- 필터 선택자
- 속성 선택자
- 컨텐츠 탐색 선택자
인접 관계 선택자
- 부모 요소 선택 :
parent()
- 조상 :
parents()
- 형제 :
next() / nextAll() / nextUntil() / prev() / prevAll() / prevUntil()
인접 관계 선택자 예제
child-selector.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script src="jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function(){ //$(document).ready(함수)의 단축 형태
//1. <ol> 태그의 모든 자손 <li> 태그 글자색 red
$('ol li').css('color', 'red');
//2. <ol> 태그의 자식 <li> 태그 글자색 blue
$('ol>li').css('color', 'blue');
//3. 아이디가 children인 요소의 자식 <li> 태그 밑줄
$('#children>li').css('textDecoration', 'underline');
//4. 클래스가 method 요소의 모든 자손 요소의 글자색을 black
//find() 메소드 사용
$('.method').find('li').css('color', 'black');
//5. 클래스가 method 요소의 자식 요소에 속성 2개 설정
//children() 메소드 사용
$('.method').children('li').css({'color':'green', 'font-style':'italic'});
});
</script>
</head>
<body>
<h3>자식/자손 선택자</h3>
<ol>
<li>자손 요소의 선택 방법</li>
<ul>
<li>$(“선택자 선택자”)</li>
<li>$(“ol li”)</li>
<li>ol 의 자손인 모든 li 태그 선택 : 글자색(red)</li>
</ul>
<li>자식 요소의 선택 방법</li>
<ul id="children">
<li>$(“선택자>선택자”)</li>
<li>$(“ol>li”)</li>
<li>ol의 자식인 li 태그 선택 : 글자색(blue)</li>
<li>$(“ul>li”)</li>
<li>ul의 자식인 li 태그 선택 : 글자(underline)</li>
</ul>
<li>메소드를 사용하는 방법</li>
<ol class="method">
<li>자손 요소 선택 : find()</li>
<ul>
<li>$(“선택자”).find(“선택자”)</li>
<li>$(“.method).find(“li”)</li>
<li>클래스 method 모든 자손 li 태그 선택 : 글자색(black)</li>
</ul>
<li>자식 요소 선택 : children()</li>
<ul>
<li>$(“선택자”).children(“선택자”)</li>
<li>$(“.method).children(“li”)</li>
<li>클래스 method 자식 선택 : 글자색(green)</li>
</ul>
</ol>
</ol>
</body>
</html>
parentNext,html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>조상/부모/형제 요소 선택자</title>
<style type="text/css">
div {
border:1px solid #000000;
padding:10px;
display:inline-block;
}
</style>
<script src= "jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('p').parents().css('background','yellow'); // 모든 조상
$('p').parents('#area').css('background','white'); // 모든 area
$('p').parents('#c1, #c2').css('background','brown'); // 조상 c1,c2
$('p').parent().css('background','green'); // p의 부모
$('#c1').next().css('background','pink'); // c1의 바로 다음 요소
$('#c2').nextAll().css('background','orange'); // c2의 모든 다음 요소
$('#c4').prevAll().css('color','blue'); // c4 기준 이전 모든 요소
// c1 다음부터 c4 이전까지 : c2, c3
$('#c1').nextUntil('#c4').css('borderRadius', '20px');
// c3 이전 c1 다음까지 : c2
$('#c3').prevUntil('#c1').css('border', 'solid 5px red');
});
</script>
</head>
<body>
<h3>조상/부모/형제 요소 선택자</h3>
<div id="area">
area 영역
<div id="c1">
c1영역
<div id="s1">
s1 영역
<p>p</p>
</div>
</div>
<div id="c2">
c2영역
<div id="s2">
s2 영역
<p>p</p>
</div>
</div>
<div id="c3">
c3영역
<div id="s3">
s3 영역
<p>p</p>
</div>
</div>
<div id="c4">
c4영역
<div id="s4">
s4 영역
<p>p</p>
</div>
</div>
</div>
</body>
</html>