jquery chapter 1 기본 선택자의 마지막 포스팅이다!! 힘내자!
11. prevAll(), nextAll()
prevAll()은 선택요소의 이전 요소들을 모두 고르는 것이고, nextAll()은 선택요소의 다음 요소들을 모두 고르는 것이다. 아! 여기서 참고할 점은 형제 요소 기준으로 이전, 다음을 따지는 것이다!!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 선택자 </title>
<script src="js/jquery.js"></script>
<script>
$(function(){
var style_1 = {
"background-color":"#0ff",
"border":"2px solid #f00"
}
var style_2 = {
"background-color":"#ff0",
"border":"2px dashed #f00"
}
$(".txt").prevAll()
.css(style_1);
$(".txt").nextAll()
.css(style_2);
});
</script>
</head>
<body>
<div id="wrap">
<h1>인접 관계 선택자</h1>
<p>내용1</p>
<p class="txt">내용2</p>
<p>내용3</p>
<p>내용4</p>
</div>
</body>
</html><p class="txt">내용2</p>이 요소를 기준으로 이전 요소 모두, 다음 요소 모두를 선택한다!
<결과>
12. siblings()
siblings() 메소드는 선택된 자신의 요소를 제외한 모든 형제 요소를 선택한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 선택자 </title>
<script src="js/jquery.js"></script>
<script>
$(function(){
var style_1 = {
"background-color":"#0ff",
"border":"2px solid #f00"
}
$(".txt").siblings( ) // .txt 클래스 빼고 형제 요소 전체 선택
.css(style_1);
});
</script>
</head>
<body>
<div id="wrap">
<h1>인접 관계 선택자</h1>
<p>내용1</p>
<p class="txt">내용2</p>
<p>내용3</p>
<p>내용4</p>
</div>
</body>
</html><결과>
13. prevUntil(), nextUntil()
prevUntil()과 nextUntil()은 선택된 요소를 기준으로 prevUntil()요소 까지, nextUntil()까지 선택하는 메소드이다. 음, 일종의 범위형(?)으로 적용한다고 보면 되겠다. (단, prevUntil()과 nextUntil()에 명시된 요소는 포함하지 않는다.)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 선택자 </title>
<script src="js/jquery.js"></script>
<script>
$(function(){
var style_1 = {
"background-color":"#0ff",
"border":"2px solid #f00"
}
$(".txt3").prevUntil(".title")
.css(style_1);
$(".txt3").nextUntil(".txt6")
.css(style_1);
});
</script>
</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>
</body>
</html><결과>
14. parents()
parents() 메소드는 이전 포스트에서 설명했듯이 선택요소의 상위요소들을 '모두' 선택하는 것이다.
↓ 이전 포스트 링크 ↓
[JQuery] Chapter 1-1 선택자(2)
지난 선택자 첫 번째 포스팅에 이어 두번째 포스팅입니다! 6. 같은 클래스 이름을 가진 요소 구별하여 선택하기 말이 좀 긴데, 먼저 코드를 봅시다. 선택자 제이쿼리 선택자 직접 선
developer-ktu.tistory.com
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 선택자 </title>
<script src="js/jquery.js"></script>
<script>
$(function(){
$(".txt1").parents()
.css("border", "2px dashed #00f");
$(".txt2").parents("div")
.css("border", "2px solid #f00");
});
</script>
</head>
<body>
<h1 class="title">선택자</h1>
<section>
<div>
<p class="txt1">내용</p>
</div>
</section>
<section>
<div>
<p class="txt2">내용</p>
</div>
</section>
</body>
</html>
<결과>
15. closest()
closest() 메소드는 선택요소의 가장 가까운 상위요소를 선택한다. 말 그대로 직계 부모 요소를 선택한다고 생각하면 된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 선택자 </title>
<script src="js/jquery.js"></script>
<script>
$(function(){
$(".txt1").closest("div") // .txt1클래스와 가장 가까운 상위 div 태그
.css({"border":"2px solid #f00"});
});
</script>
</head>
<body>
<h1 class="title">선택자</h1>
<div>
<div>
<p class="txt1">내용</p>
</div>
</div>
</body>
</html><결과>
"내용"을 나타내주는 <p>요소의 직계 부모 요소인 <div>요소에 스타일이 적용됐디.
이로써 기본 선택자에 대한 포스팅이 끝났다. 사실 모든 선택자들을 100% 외울 필요는 없다고 생각한다. 그래도 필요한 메소드, 선택자를 찾아쓰기 위해선 어느정도 숙지할 필요가 있다고 생각한다. 다음 포스팅에선 탐색 선택자에 대해서 포스팅할 예정이다!
'웹 개발 공부 : Front-end > JQuery' 카테고리의 다른 글
| [JQuery] Chapter 1-2 탐색 선택자 (0) | 2021.09.09 |
|---|---|
| [JQuery] Chapter 1-1 선택자(2) (0) | 2021.09.08 |
| [JQuery] Chapter 1-1 선택자(1) (2) | 2021.09.04 |
| [JQuery] JQuery 개요 (0) | 2021.09.03 |
