반응형
인접 관계 선택자
| 종류 | 사용법 | 설명 |
| 부모 요소 선택자 | $("요소 선택").parent() | 선택한 부모 요소를 선택합니다. |
| 상위 요소 선택자 | $("요소 선택").parents() | 선택한 요소의 상위 요소를 모두 선택합니다. |
| 가장 가까운 상위 요소 선택자 | $("요소 선택").closest("div") | 선택한 요소의 상위 요소 중 가장 가까운 <div>만 선택합니다. |
| 하위 요소 선택자 | $("요소 선택 하위 요소") | 선택한 요소에 지정한 하위 요소를 선택합니다. |
| 자식 요소 선택자 | $("요소 선택>자식 요소") | 선택한 요소를 기준으로 자식 관계에 지정한 요소만 선택니다. |
| 자식 요소들 선택자 | $("요소 선택").children() | 선택한 요소의 모든 자식 요소를 선택합니다. |
| 형(이전) 요소 선택자 | $("요소 선택").prev() | 선택한 요소의 바로 이전 요소를 선택합니다. |
| 형(이전) 요소들 선택자 | $("요소 선택").prevAll() | 선택한 요소의 이전 요소 모두를 선택합니다. |
| 지정 형(이전) 요소들 선택자 | $("요소 선택").prevUntil("요소명") | 선택한 요소부터 지정한 요소의 이전 요소까지 모두 선택합니다. |
| 동생(다음) 요소 선택자 | $("요소 선택").next() $("요소 선택 + 다음요소") |
선택한 요소의 다음 요소를 선택합니다. |
| 동생(다음) 요소들 선택자 | $("요소 선택").nextAll() | 선택한 요소의 다음 요소를 모두 선택합니다. |
| 지정 동생(다음) 요소들 선택자 | $("요소 선택").nextUntil("h2") | 선택한 요소부터 지정한 요소의 다음 요소까지 모두 선택합니다. |
| 전체 형제 요소 선택자 | $(".box_1").siblings() | class 값이 box_1인 요소의 형제 요소 전체를 선택합니다. |
1) 부모 요소 선택자
선택한 부모 요소를 선택합니다,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>인접 관계 선택자</h1>
<ul id="wrap">
<li>리스트1
<!-- 자식 목록 -->
<ul>
<li id="list_1">리스트1-1</li>
<li>리스트1-2</li>
</ul>
</li>
<li>리스트2</li>
<li>리스트3</li>
</ul>
<!-- jquery cdn -->
<script src="http://code.jquery.com/jquery-3.1.0.js"></script>
<script>
$(function(){
// 코딩 : #list_1에서 부모 태그 선택하기
// 사용법 : $("CSS선택자").parent().함수()
$("#list_1").parent()
.css("border", "2px dashed #f00");
});
</script>
</body>
</html>
결과
2) 자식 요소 선택자
선택한 요소의 모든 자식 요소를 선택합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="wrap">
<h1>인접 관계 선택자</h1>
<p>내용 1</p>
<section>
<h1>하위 요소 선택자</h1>
<p>내용2</p>
</section>
</div>
<!-- jquery cdn -->
<script src="http://code.jquery.com/jquery-3.1.0.js"></script>
<script>
// #wrap > section 아래 자식 태그를 선택해서
// background-color : yellow
// border : 2px solid #f00 으로 수정하기
$(function(){
$('#wrap > section').children()
.css('background-color', 'yellow')
.css('border', '2px solid #f00');
});
</script>
</body>
</html>
결과
3) 형(이전) 요소 선택자 와 동생(다음) 요소들 선택자
- 선택한 요소의 바로 이전 요소를 선택합니다.( $("요소 선택").prev())
- 선택한 요소의 다음 요소를 선택합니다. ( $("요소 선택").next() / $("요소 선택 + 다음요소"))
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<h1>인접 관계 선택자</h1>
<p>내용1</p>
<p class="txt">내용2</p>
<p>내용3</p>
<p>내용4</p>
</div>
<!-- jquery cdn -->
<script src="http://code.jquery.com/jquery-3.1.0.js"></script>
<script>
$(function(){
// .txt 선택태그 앞/뒤에 태그 선택하기
// 사용법 : $('css 선택자').prev().함수() => 앞의 태그 선택
$('.txt').prev().css('background-color', '#0ff');
// 뒤의 태그 선택하기
// 사용법 : $('css 선택자').next().함수() => 뒤의 태그 선택
$('.txt').next().css('border', '2px dashed #f00');
});
</script>
</body>
</html>
결과
4) 형(이전) 요소들 선택자와 동생(다음) 요소들 선택자
- 선택한 요소의 이전 요소 모두를 선택합니다.
- 선택한 요소의 다음 요소를 모두 선택합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="wrap">
<h1>인접 관계 선택자</h1>
<p>내용1</p>
<p class="txt">내용2</p>
<p>내용3</p>
<p>내용4</p>
</div>
<!-- jquery cdn -->
<script src="http://code.jquery.com/jquery-3.1.0.js"></script>
<script>
// 앞/뒤 모든 태그 선택하기
// 앞의 모든 태그 선택
// $('css 선택자').prevAll().함수();
$('.txt')
.prevAll()
.css('background-color', '#0ff')
.css('border', '2px dashed #f00');
// 뒤의 모든 태그 선택
// $('css 선택자').nextAll().함수();
$('.txt')
.nextAll()
.css('background-color', '#f00')
.css('border', '2px dashed #f00');
</script>
</body>
</html>
결과
5) 전체 형제 요소 선택자
- 요소의 형제 요소 전체를 선택합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="wrap">
<h1>인접 관계 선택자</h1>
<p>내용1</p>
<p class="txt">내용2</p>
<p>내용3</p>
<p>내용4</p>
</div>
<!-- jquery cdn -->
<script src="http://code.jquery.com/jquery-3.1.0.js"></script>
<script>
$(function(){
// 코딩
// 예제 : .txt의 형제 태그 선택해서 디자인 적용
// $("CSS선택자").siblings().함수();
$(".txt").siblings()
.css("background-color", "#0ff")
.css("border", "2px dashed #f00");
});
</script>
</body>
</html>
결과
7) 지정 형(이전) 요소들 선택자와 지정 동생(다음) 요소들 선택자
- 선택한 요소부터 지정한 요소의 이전 요소까지 모두 선택합니다.
- 선택한 요소부터 지정한 요소의 다음 요소까지 모두 선택합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="wrap">
<h1 class="title">인접 관계 선택자</h1>
<p>내용1</p>
<p>내용2</p>
<p class="txt3">내용3</p>
<p>내용4</p>
<p>내용5</p>
<p class="txt6">내용6</p>
</div>
<!-- jquery cdn -->
<script src="http://code.jquery.com/jquery-3.1.0.js"></script>
<script>
// 선택태그(.txt) 부터 대상태그(.title) 앞까지만 선택하기 (앞)
// 사용법 $('기준선택자').prevUntil('대상선택자').함수()
$(function(){
$('.txt3')
.prevUntil('.title')
.css('background-color', '#0ff')
.css('border', '2px dashed #f00');
});
// 선택태그(.txt3)부터 대상태그(.txt6)사이 선택하기 (뒤)
// 사용법 $('기준선택자').prevUntil('대상선택자').함수()
$(function(){
$('.txt3')
.nextUntil('.txt6')
.css('background-color', '#0ff')
.css('border', '2px dashed #f00');
});
</script>
</body>
</html>
결과
8) 상위 요소 선택자
- 선택한 요소의 상위 요소를 모두 선택합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 class="title">선택자</h1>
<section>
<div>
<p class="txt1">내용</p>
</div>
</section>
<section>
<div>
<p class="txt2">내용</p>
</div>
</section>
<!-- jquery cdn -->
<script src="http://code.jquery.com/jquery-3.1.0.js"></script>
<script>
// .txt1 선택태그 위의 부모 모두 선택하기
// 사용법 : $('css선택자').parents().함수();
$('.txt1').parents()
.css('border', '2px dashed #f00');
</script>
</body>
</html>
결과
9) 가장 가까운 상위 요소 선택자
- 선택한 요소의 상위 요소 중 가장 가까운 태그만 선택합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 class="title">선택자</h1>
<div>
<div>
<p class="txt1">내용</p>
</div>
</div>
<!-- jquery cdn -->
<script src="http://code.jquery.com/jquery-3.1.0.js"></script>
<script>
// 선택태그에서 부모태그들 중 가장 가까이 있는 태그 선택
// 사용법 : $('css선택자').closest('부모태그').함수();
$('.txt1').closest('div')
.css('border', '2px dashed #f00');
</script>
</body>
</html>
결과
반응형
'JavaScript > jQuery' 카테고리의 다른 글
| [jQuery] 직접선택자(2) (0) | 2024.06.26 |
|---|---|
| [jQuery] jQuery 기본과 직접선택자 (0) | 2024.06.26 |
