* 제이쿼리의 직접 선택자 및 인접 관계 선택자
- 앞으로 '문서 객체'라는 말을, '요소' 또는 '태그'라 표현하겠음.
- 자바스크립트의 DOM(Document Object Model) 서낵자는 IE 8 이하와 그 외의 브라우저 사이에 호환성에 대한 문제점이 있었음.
- 하지만 제이쿼리는 이러한 호환성과 관련된 문제들을 모두 해결함.
- 제이쿼리 선택자는 자바스크립트의 DOM 선택자보다 사용이 편리하고 쉬움.
- 제이쿼리의 선택자에는 크게 직접 선택자와 인접 관계 선택자로 나눌 수 있음.
- 직접 선택자에는 전체 선택자, 아이디 선택자, 클래스 선택자, 요소명(tag Name) 선택자, 그룹 선택자가 있음.
- 인접 관계 선택자에는 부모 요소 선택자, 자식 요소 선택자, 형(이전) 요소 선택자, 동생(다음) 요소 선택자, 형제 요소 선택자가 있음.
- 제이쿼리를 사용하는 기본형은 다음과 같이 선택자를 사용해 요소를 먼저 선택해 오고, 선택한 요소에 스타일(CSS) 또는 속성(Attribute)을 적용할 메서드(Method)를 작성함.
|
1. $("#wrap").css("color", "green"); 2. $("img").attr("width", "300"); |
: 선택자 : 메서드
- 기본 선택자 종류
|
구분 |
종류 |
사용법 |
설명 |
|
직접 선택자 |
전체 선택자 |
$("*") |
모든 요소를 선택 |
|
아이디 선택자 |
$("#아이디 명") |
id 속성에 지정한 값을 가진 요소를 선택 | |
|
클래스 선택자 |
$(".클래스 명") |
class 속성에 지정한 값을 가진 요소를 선택 | |
|
요소명 선택자 |
$("요소명") |
지정한 요소명과 일치하는 요소들만 선택 | |
|
그룹 선택자 |
$("선택1, 선택2, 선택3, ..., 선택n") |
선택1, 선택2, 선택3, ..., 선택n에 지정된 요소들을 한번에 선택 | |
|
인접 관계 선택자 |
부모 요소 선택자 |
$("요소 선택").parent() |
선택한 요소의 부모 요소를 선택 |
|
상위 요소 선택자 |
$("요소 선택").paretns() |
선택한 요소의 상위 요소를 모두 선택 | |
|
하위 요소 선택자 |
$("요소 선택 하위 요소") |
선택한 요소에 지정한 하위 요소 선택 | |
|
자식 요소 선택자 |
$("요소 선택>자식 요소") |
선택한 요소를 기준으로 자식 관계에 지정한 요소만 선택 | |
|
자식 요소들 선택자 |
$("요소 선택").children() |
선택한 요소의 모든 자식 요소를 선택 | |
|
형(이전) 요소 선택자 |
$("요소 선택").prev() |
선택한 요소의 바로 이전 요소를 선택 | |
|
형(이전) 요소들 선택자 |
$("요소 선택").prevAll() |
선택한 요소의 이전 요소 모두를 선택 | |
|
지정 형(이전) 요소들 선택자 |
$("요소 선택").prevUntil("요소명") |
선택한 요소부터 지정한 요소의 이전 요소까지 모두 선택 | |
|
동생(다음) 요소 선택자 |
$("요소 선택").next() $("요소 선택+다음 요소") |
선택한 요소의 다음 요소를 선택 | |
|
동생(다음) 요소들 선택자 |
$("요소 선택").nextAll() |
선택한 요소의 다음 요소 모두를 선택 |
[직접 선택자]
- 주로 원거리에 요소를 직접 선택할 때 사용되는 선택자.
1) 전체 선택자
- 전체(Universal) 요소를 선택할 때 사용함.
- 즉, 이 선택자를 사용하면 현재 (X)HTML의 모든 태그들을 선택함.
- 예)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14 |
<!-- 문단 태그 영역 -->
<body>
<h1>제이쿼리</h1>
<h2>직접 선택자 및 관계 선택자</h2>
<h3>직접 선택자</h3>
<h4>관계 선택자</h4>
</body>
<!-- 선택자 적용 -->
<script type="text/javascript">
$(function(){
$("*").css("border", "1px solid blue");
});
</script> |
cs |
2) 아이디 선택자
- 아이디 속성에 지정한 값을 포함하는 요소를 선택.
- 예)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14 |
<!-- 문단 태그 영역 -->
<body>
<h1>제이쿼리</h1>
<h2 id="tit">직접 선택자 및 관계 선택자</h2>
<h3>직접 선택자</h3>
<h4>관계 선택자</h4>
</body>
<!-- 선택자 영역 -->
<script type="text/javascript">
$(function(){
$("tit").css("background-color", "yellow").css("border", "2px solid red"); // 체이닝 기법
});
</script> |
cs |
- 체이닝 기법 : 선택한 요소에 메서드를 연속적으로 사용하는 기법. 제이쿼리에서는 한 객체에 다양한 메서드를 줄줄이 이어서 사용할 수 있음.
3) 클래스 선택자
- 클래스 속성에 지정한 값을 포함하는 요소를 선택.
- 예)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14 |
<!-- 문단 태그 영역 -->
<body>
<h1>제이쿼리</h1>
<h2>직접 선택자 및 관계 선택자</h2>
<h3 class="direct">직접 선택자</h3>
<h4>관계 선택자</h4>
</body>
<!-- 선택자 영역 -->
<script type="text/javascript">
$(function(){
$(".direct").css("background-color", "yellow");
});
</script> |
|
4) 요소명 선택자
- 지정한 요소명(Tag Name)과 일치하는 요소 모두를 선택.
- 예)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14 |
<!-- 문단 태그 영역 -->
<body>
<h1>제이쿼리</h1>
<h2>직접 선택자 및 관계 선택자</h2>
<h3>직접 선택자</h3>
<h4>관계 선택자</h4>
</body>
<!-- 선택자 영역 -->
<script type="text/javascript">
$(function(){
$("h3").css("background-color", "yellow");
});
</script> |
|
5) 그룹 선택자
- 한 번에 여러 개의 요소를 선택할 때 사용함.
- 예)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14 |
<!-- 문단 태그 영역 -->
<body>
<h1>제이쿼리</h1>
<h2>직접 선택자 및 관계 선택자</h2>
<h3>직접 선택자</h3>
<h4>관계 선택자</h4>
</body>
<!-- 선택자 영역 -->
<script type="text/javascript">
$(function(){
$("h1,h3").css("background-color", "yellow");
});
</script> |
cs |
[인접 관계 선택자]
- 이미 선택된 요소를 기준으로 근접해 있는 요소의 관계를 따져 사용하는 선택자.
- 직접 선택자로 원거리에 있는 요소를 선택한 후, 선택한 요소를 기준으로 이전 또는 다음에 오는 근거리의 요소를 선택할 때 사용하는 선택자.
1) 부모 요소 선택자
- 선택한 요소를 감싸고 있는 부모 요소를 선택.
- 예)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 |
<!-- 문단 태그 영역 -->
<body>
<h1>인접 관계 선택자</h1>
<ul>
<li>내용1
<ul>
<li>내용2</li>
<li class="second">내용3</li>
</ul>
</li>
</ul>
</body>
<!-- 선택자 영역 -->
<script type="text/javascript">
$(function(){
$(".second").parent().css("border", "1px solid red");
});
</script> |
cs |
2) 하위 요소 선택자
- 기준 요소에 선택한 하위 요소만 선택.
- 예)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 |
<!-- 문단 태그 영역 -->
<body>
<h1>인접 관계 선택자</h1>
<ul id="wrap">
<li>내용1
<ul>
<li>내용2</li>
</ul>
</li>
</ul>
</body>
<!-- 선택자 영역 -->
<script type="text/javascript">
$(function(){
$("#wrap li").parent().css("border", "1px solid red");
// id가 "wrap"인 요소의 하위 <li> 태그에만 1px의 빨간색 선을 생성함.
});
</script> |
cs |
3) 자식 요소 선택자
- 선택된 요소를 기준으로 지정한 자식 요소만 선택.
- 예)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 |
<!-- 문단 태그 영역 -->
<body>
<h1>인접 관계 선택자</h1>
<ul id="wrap">
<li>내용1
<ul>
<li>내용2</li>
</ul>
</li>
</ul>
</body>
<!-- 선택자 영역 -->
<script type="text/javascript">
$(function(){
$("#wrap > li").css("border", "1px solid red");
// id가 "wrap"인 요소의 자식 요소인 <li>에 1px의 빨간색 선을 생성함.
});
</script> |
cs |
4) 자식 요소들 선택자
- 앞에서 선택한 요소를 기준으로 모든 자식 요소를 선택해오거나 또는 지정한 자식 요소만 선택애 옴.
- 예)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 |
<!-- 문단 태그 영역 -->
<body>
<h1>인접 관계 선택자</h1>
<ul id="wrap">
<li>내용1
<ul>
<li>내용2</li>
</ul>
</li>
</ul>
</body>
<!-- 선택자 영역 -->
<script type="text/javascript">
$(function(){
$("bdoy").children().css("border", "1px solid red");
// <body>의 모든 자식 요소에 1px의 빨간색 선을 생성함.
});
</script> |
cs |
5) 형 요소 선택자
- 선택한 요소의 형제 요소들 중 선택한 요소의 바로 이전 요소를 선택.
- 예)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 |
<!-- 문단 태그 영역 -->
<body>
<h1>인접 관계 선택자</h1>
<ul>
<li>내용1</li>
<li id="second">내용2</li>
<li>내용3</li>
</ul>
</body>
<!-- 선택자 영역 -->
<script type="text/javascript">
$(function(){
$("#second").prev().css("border", "1px solid red");
// id="second"인 요소의 이전 요소(내용1)에 1px의 빨간색 선을 생성함.
});
</script> |
cs |
6) 동생 요소 선택자
- 선택한 요소의 형제 요소들 중 선택한 요소의 바로 다음에 오는 요소를 선택.
- 예)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 |
<!-- 문단 태그 영역 -->
<body>
<h1>인접 관계 선택자</h1>
<ul>
<li>내용1</li>
<li id="second">내용2</li>
<li>내용3</li>
</ul>
</body>
<!-- 선택자 영역 -->
<script type="text/javascript">
$(function(){
// $("#second").next().css("border", "1px solid red");
// id="second"인 요소의 다음 요소(내용3)에 1px의 빨간색 선을 생성함.
$("#second + li").css("border", "1px solid red");
// id="second"인 요소의 다음 요소(내용3)에 1px의 빨간색 선을 생성함.
});
</script> |
cs |
7) 형제 요소들 선택자
- 선택한 요소의 모든 형제 요소를 선택.
- 예)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 |
<!-- 문단 태그 영역 -->
<body>
<h1>인접 관계 선택자</h1>
<ul>
<li>내용1</li>
<li id="second">내용2</li>
<li>내용3</li>
</ul>
</body>
<!-- 선택자 영역 -->
<script type="text/javascript">
$(function(){
$("#second").siblings().css("border", "1px solid red");
// id="second"인 요소의 모든 형제 요소(내용1, 내용3)에 1px의 빨간색 선을 생성함.
});
</script> |
cs |
내용 출처 : Do It! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)
'Programming > jQuery' 카테고리의 다른 글
| 객체 조작 메서드 - 수치 조작 메서드 (0) | 2017.05.22 |
|---|---|
| 객체 조작 메서드 - 속성 조작 메서드 (0) | 2017.05.22 |
| 선택자와 함께 사용하면 편리한 메서드들 (0) | 2017.05.22 |
| 탐색 선택자 - 콘텐츠 탐색 선택자 (0) | 2017.05.22 |
| 탐색 선택자 - 속성 탐색 선택자 (0) | 2017.05.22 |
| 탐색 선택자 - 위치 탐색 선택자 (0) | 2017.05.22 |
| 선택자 (Selector) (0) | 2017.05.22 |
| 제이쿼리란? (0) | 2017.05.22 |
