선택자 (직접선택자, 인접선택자)
1. 선택자
CSS 선택자처럼 선택한 요소의 디자인 속성을 적용할 때 사용할 수 있다.
HTML에 작성한 스타일은 사용자의 동작에 의해 스타일을 변경할 수 없기 때문에 '정적이다'라고 표현한다.
하지만 제이쿼리 선택자를 사용하면 '동적'으로 스타일을 적용할 수 있다.
1) 문서객체모델(DOM)
HTML문서 객체 구조를 말한다.
HTML의 문서 객체 구조를 그림으로 표현하면 트리 구조가 된다.
가장 상위에 위치하는 <html>은 뿌리(Root)라고 하고, 가지처럼 뻗어나가는 요소는 노드(Node)라고 한다.
노드의 종류 : 요소노드, 텍스트노드, 속성노드
2) 선택자 사용하기
선택자를 사용하기 위해서는 문서 객체를 불러와야 한다.
<body>가 생성되기 이전에 선택자가 먼저 실행되어 선택자로 문서 객체를 선택할 수 없다.
<body>영역에서 문서 객체를 먼저 불러온 다음 선택자를 사용할 수 있도록 사용해야 한다.
1. 선택한 요소에 지정한 스타일을 적용
$("CSS 선택자").CSS("스타일 속성명", "값");
2. 선택한 요소에 지정한 속성을 적용
$("CSS 선택자").attr("속성명", "값");
2. 기본 선택자
직접선택자
| 종류 | 사용법 | 설명 |
| 전체 선택자 | $("*") | 모든 요소를 선택 |
| 아이디 선택자 | $("#아이디명") | id 태그에 지정한 값을 선택 |
| 클래스 선택자 | $(".클래스명") | class 태그에 지정한 값을 선택 |
| 요소 선택자 | $("요소명") | 지정한 요소명과 일치하는 요소들을 선택 |
| 그룹 선택자 | $("선택 1, 선택 2, ...") | 선택 1, 선택 2 에 지정된 요소들을 한번에 선택 |
| 종속 선택자 | $("p.txt_1") $("p#txt_1") |
<p> 태그 중 class 태그가 txt_1 또는 id 태그가 txt_1 인 요소를 선택 |
인접관계선택자
| 종류 | 사용법 | 설명 |
| 부모 요소 선택자 |
$("선택 요소").parent() | 선택한 요소를 감싸고 있는 부모 요소를 선택 |
| 상위 요소 선택자 |
1. $("선택 요소").parents() 2. $("선택 요소").parents("선택 요소") |
1. 선택한 요소 기준으로 모든 상위 요소 선택 2. 선택한 요소 기준으로 상위 요소 중 선택한 요소만 선택 |
| 가장 가까운 상위 요소 선택자 |
$("선택 요소").closest("선택 요소") | 선택한 요소 기준으로 가장 가까운 상위 요소만 선택 |
| 하위 요소 선택자 |
$("기준 요소 선택1 요소 선택2") | 기준 요소로 선택한 하위 요소만 선택 |
| 자식 요소 선택자 |
1. $("선택 요소 > 자식 선택 요소") 2. $("선택 요소").children("자식 선택 요소") 3. $("선택 요소").children() |
1&2. 선택한 요소 기준으로 지정한 자식 요소만 선택 3. 선택한 요소 기준으로 모즌 자식 요소를 선택 |
| 이전 요소 선택자 |
$("선택 요소").prev() | 선택한 요소 기준으로 이전에 오는 형제 요소만 선택 |
| 다음 요소 선택자 |
1. $("선택 요소").next() 2. $("선택 요소1 + 선택 요소2") |
1. 선택한 요소 기준으로 다음에 오는 형제 요소만 선택 2. 선택한 요소 기준으로 바로 다음에 오는 선택한 요소만 선택 |
| 전체 이전 요소 선택자 |
$("선택 요소").prevAll() | 선택 요소 기준으로 이전에 오는 모든 형제 요소를 선택 |
| 전체 다음 요소 선택자 |
$("선택 요소").nextAll() | 선택 요소 기준으로 다음에 오는 모든 형제 요소를 선택 |
| 전체 형제 요소 선택자 |
$("선택 요소").siblings() | 선택한 요소의 모든 형제 요소를 선택 |
| 범위 제한 이전 요소 선택자 |
$("선택 요소").prevUntil ("범위 제한 선택 요소") |
선택한 요소 기준으로 범위 제한 요소까지 전체 형(이전)요소 선택 |
| 범위 제한 다음 요소 선택자 |
$("선택 요소").nextUntil ("범위 제한 선택 요소") |
선택한 요소 기준으로 범위 제한 요소까지 전체 동생(다음)요소 선택 |
3. 직접선택자
직접 선택자는 주로 멀리 떨어진 요소를 직접 선택할 때 사용하는 선택자이다.
종류 : 전체(*), 아이디(#), 클래스(.), 요소명, 그룹(,)
1) 전체 선택자
전체요소를 선택할 때 사용한다. (HTML의 모든 태그)
기본형 : $("*")
<head>
<meta charset="UTF-8">
<title>선택자</title>
<script src="js/jquery.js"></script>
<script>
$(function(){
// 전체 요소 선택자로 두께가 1px인 파란색 실선을 생성
$("*").css("border", "1px solid blue");
});ㅣ
</script>
</head>
<body>
<h1>제이쿼리</h1>
<h2>선택자</h2>
<h3>직접 선택자</h3>
</body>
2) 아이디 선택자
아이디 속성에 지정한 값을 포함하는 요소를 선택한다.
기본형 : $("#아이디명")
<head>
<meta charset="UTF-8">
<title>선택자</title>
<script src="js/jquery.js"></script>
<script>
$(function(){
// 체이닝 기법으로 선택한 요소의 css메서드를 연속해서 2회 적용
$("#tit").css("background-color", "#ff0").css("border", "2px solid #f00");
});
</script>
</head>
<body>
<h1>제이쿼리</h1>
<h2 id="tit">선택자</h2>
<h3>직접 선택자</h3>
</body>
체이닝 기법이란?
선택한 요소에는 메서드를 연속해서 사용할 수 있는데, 이를 마치 체인이 엮인 모양과 같다고 하여 체이닝 기법이라고 한다.
$(요소선택).css(속성1, 값1).css(속성2, 값2).css(속성3, 값3);
3) 클래스 선택자
클래스 속성에 지정한 값을 포함하는 요소를 선택한다.
기본형 : $(".클래스명")
<head>
<meta charset="UTF-8">
<title>선택자</title>
<script src="js/jquery.js"></script>
<script>
$(function(){
$(".tit").css("background-color", "#ff0").css("border", "2px solid #f00");
});
</script>
</head>
<body>
<h1>제이쿼리</h1>
<h2 class="tit">선택자</h2>
<h3>직접 선택자</h3>
</body>
4) 요소명 선택자
지정한 요소명(Tag Name)과 일치하는 요소를 모두 선택한다.
기본형 : $("요소명")
<head>
<meta charset="UTF-8">
<title>선택자</title>
<script src="js/jquery.js"></script>
<script>
$(function() {
//요소 선택자
$("h2").css("background-color", "#0ff")
.css("border", "2px dashed #f00");
});
</script>
</head>
<body>
<h1>제이쿼리</h1>
<h2>선택자</h2>
<h3>직접 선택자</h3>
</body>
5) 그룹 선택자
한 번에 여러개의 요소를 선택할 때 사용 한다.
기본형 : $("요소선택1, 요소선택2, 요소선택3, ...요소선택n");
<head>
<meta charset="UTF-8">
<title>선택자</title>
<script src="js/jquery.js"></script>
<script>
$(function() {
//요소 선택자
$("#tit3, h1").css("background-color", "#0ff")
.css("border", "2px dashed #f00");
});
</script>
</head>
<body>
<h1>제이쿼리</h1>
<h2>선택자</h2>
<h3 id="tit3">직접 선택자</h3>
<h3>인접 선택자</h3>
</body>
6) 종속 선택자
선택한 요소의 id 또는 class값이 일치하는 요소를 선택할 때 사용
기본형 : $("요소명#id 값"); or $("요소명.class 값");
<head>
<meta charset="UTF-8">
<title>선택자</title>
<script src="js/jquery.js"></script>
<script>
$(function() {
//요소 선택자
$("h1.tit").css("background-color", "#0ff")
.css("border", "2px dashed #f00");
});
</script>
</head>
<body>
<h1 class="tit3">제이쿼리</h1>
<h2>선택자</h2>
<h3 class="tit3">직접 선택자</h3>
</body>
4. 인접선택자
인접 관계 선택자는 직접 선택자로 요소를 먼저 선택하고 그 다음 선택한 요소와 가까이에 있는 요소를 선택할 때 사용한다.
1. a는 c의 상위(closet) 요소이고, c는 b의 하위 요소이다.
2. b는 c의 부모(parent) 요소이고, c는 b의 자식(children) 요소이다.
3. d는 e의 형(prev) 요소이고, f는 e의 동생(next) 요소이다
1) 부모 요소 선택자
선택한 요소를 감싸고 있는 부모 요소를 선택한다.
기본형 : $("요소선택").parent();
<head>
<meta charset="UTF-8">
<title>부모 요소 선택자</title>
<script src="js/jquery.js"></script>
<script>
$(function() {
//부모 요소 선택자
//list_1의 바로 위 부모 선택됨 : ul
$("#list_1").parent().css("border", "2px dashed #f00");
});
</script>
</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>
</body>
2) 하위 요소 선택자
기준 요소로 선택한 하위 요소만 선택한다.
기본형 : $("기준 요소 선택1 요소 선택2")
ex) $("#wrap h1") // id="wrap"인 요소가 기준 요소가 된다
<head>
<meta charset="UTF-8">
<title>부모 요소 선택자</title>
<script src="js/jquery.js"></script>
<script>
$(function() {
$("#wrap h1")
.css({
"background-color" : "yellow",
"border" : "2px dashed #f00"
});
});
</script>
</head>
<body>
<div id="wrap">
<h1>인접 관계 선택자</h1>
<p>내용1</p>
<section>
<h1>하위 요소 선택자</h1>
<p>내용2</p>
</section>
</div>
</body>
</html>
3) 자식 요소 선택자
선택된 요소를 기준으로 지정한 자식 요소만 선택한다.
기본형 : $("요소선택 > 자식 요소 선택")
$("요소선택").children("자식 요소 선택")
$("요소선택").children()
<head>
<meta charset="UTF-8">
<title>부모 요소 선택자</title>
<script src="js/jquery.js"></script>
<script>
$(function() {
$("#wrap>h1").css("border", "2px dashed #f00");
$("#wrap>section").css( {
"background-color" : "yellow",
"border" : "2px solid #f00"
});
});
</script>
</head>
<body>
<div id="wrap">
<h1>인접 관계 선택자</h1>
<p>내용1</p>
<section>
<h1>자식 요소 선택자</h1>
<p>내용2</p>
</section>
</div>
</body>
4) 형(이전) / 동생(다음) 요소 선택자
형 요소 : 선택한 요소를 기준으로 바로 이전 형제 요소만 선택
동생 요소 : 선택한 요소를 기준으로 바로 다음 형제 요소만 선택
기본형 : $("요소선택").prev()
$("요소선택").next()
$("요소선택1 + 요소선택2")
<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 solid #f00"
}
$(".txt").prev().css(style_1);
$(".txt+p").css(style_2);
$(".txt").next().next().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>
</section>
</div>
</body>
5) 전체 형(이전) / 동생(다음) 요소 선택자
전체 형 요소 : 선택한 요소를 기준으로 바로 이전 전 형제 요소만 선택한다.
전체 동생 요소 : 선택한 요소를 기준으로 바로 다음 전체 형제 요소만 선택
기본형 : $("요소선택").prevAll()
$("요소선택").nextAll()
<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 solid #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>
</section>
</div>
</body>
6) 전체 형제 요소 선택자
선택한 요소의 모든 형제 요소를 선택한다.
기본형 : $(요소선택").siblings()
<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().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>
</section>
</div>
</body>
7) 범위 제한 전체 형 / 동생 요소 선택자
선택한 요소를 기준으로 형제 요소 중 지정한 범위 내의 전체 형 요소 또는 전체 동생 요소를 선택한다.
기본형 : $("요소선택").prevUntill("범위 제한 요소 선택")
$("요소선택").nextUntill("범위 제한 요소 선택")
<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="tilte">선택자</h1>
<p>내용1</p>
<p>내용2</p>
<p class="txt3">내용3</p>
<p>내용4</p>
<p>내용5</p>
<p class="txt6">내용6</p>
</section>
</div>
</body>
8) 상위 요소 선택자
선택한 요소를 기준으로 모든 상위 요소를 선택하거나 상위 요소 중 선택하고자 하는 요소만 선택할 때 사용한다.
기본형 : $("요소선택").parents()
$("요소선택").parents("요소 선택")
<head>
<meta charset="UTF-8">
<title>부모 요소 선택자</title>
<script src="js/jquery.js"></script>
<script>
$(function() {
//상위 요소 전체 선택
$(".txt1").parents().css({
"border" : "2px solid #00f"
});
//상위 요소 중 div 선택
$(".txt2").parents("div").css({
"border" : "2px dashed #f00"
});
});
</script>
</head>
<body>
<h1 class="title">상위 요소 선택자</h1>
<section>
<div>
<p class="txt1">내용1</p>
</div>
</section>
<section>
<div>
<p class="txt2">내용2</p>
</div>
</section>
</body>
9) 가장 가까운 상위 요소 선택자
선택한 요소를 기준으로 가장 가까운 상위 요소를 선택할 때 사용한다.
기본형 : $("요소선택").closest("요소 선택")
<head>
<meta charset="UTF-8">
<title>부모 요소 선택자</title>
<script src="js/jquery.js"></script>
<script>
$(function() {
$(".txt1").parents().css({
"border" : "2px solid #f00"
});
});
</script>
</head>
<body>
<h1 class="title">선택자</h1>
<section>
<div>
<p class="txt1">내용</p>
</div>
</section>
</body>
참고 : ⌜Do it! 자바스크립트 + 제이쿼리 입문⌟ 책을 공부하며 요약・정리한 내용입니다.