직접 선택자와 인접 관계 선택자

728x90

728x170

* 제이쿼리의 직접 선택자 및 인접 관계 선택자

- 앞으로 '문서 객체'라는 말을, '요소' 또는 '태그'라 표현하겠음.

- 자바스크립트의 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>
Colored by Color Scripter

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>
Colored by Color Scripter

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>
Colored by Color Scripter

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>
Colored by Color Scripter

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>
Colored by Color Scripter

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>
Colored by Color Scripter

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>
Colored by Color Scripter

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>
Colored by Color Scripter

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>
Colored by Color Scripter

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>
Colored by Color Scripter

cs

내용 출처 : Do It! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)

728x90

그리드형(광고전용)

저작자표시

'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