본문 바로가기
제이쿼리

[제이쿼리] 인접 관계 선택자

2boki 2020. 5. 25. 12:32

1. 부모 요소 선택자

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>예제</title>

    <script src="js/jquery.min.js"></script>

    <script>
        $(
            function () {
            	// ********** 부모 요소 선택자 **********
                // 선택한 요소를 감싸고 있는 부모 요소를 선택함
                $("#list_1").parent()
                    .css("border", "2px dashed #f00");
            }
        );
    </script>
</head>

<body>
    <h1>인접 관계 선택자</h1>
    <ul id="wrap">
        <li>리스트 1
            <ul>
                <!-- #list_1을 가진 태그의 상위 태그인 <ul> 태그가 선택됨 -->
                <li id="list_1">리스트 1-1</li>
                <li>리스트 1-2</li>
            </ul>
        </li>
        <li>리스트 2</li>
        <li>리스트 3</li>
    </ul>
</body>

</html>

 

2. 하위 요소 선택자

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>예제</title>

    <script src="js/jquery.min.js"></script>

    <script>
        $(
            function () {
            	// ********** 하위 요소 선택자 **********
                // 기준 요소로 선택한 하위 요소만 선택
                $("#wrap h1")
                    .css({ "background-color": "yellow", "border": "2px dashed #f00" });
            }
        );
    </script>
</head>

<body>
    <div id="wrap">
        <!-- #wrap이 포함하는 모든 <h1> 요소를 선택함 -->
        <h1>인접 관계 선택자</h1>
        <p>내용 1</p>
        <section>
            <h1>하위 요소 선택자</h1>
            <p>내용 2</p>
        </section>
    </div>
</body>

</html>

 

3. 자식 요소 선택자

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>예제</title>

    <script src="js/jquery.min.js"></script>

    <script>
        $(
            function() {
                // ********** 자식 요소 선택자 **********
                // 선택된 요소를 기준으로 지정한 자식 요소만 선택

                // <div id="wrap">
                //  <h1>인접 관계 선택자</h1> ('바로 아래'의 자식 요소가 선택됨)
                $("#wrap > h1")
                .css("border", "2px dashed #f00");

                // <section>
                //  <h1>자식 요소 선택자</h1> (section의 자식 요소가 '모두' 선택됨)
                //  <p>내용 2</p> (section의 자식 요소가 '모두' 선택됨)
                // </section>
                $("#wrap > section").children()
                .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>

</html>

 

4. 이전 요소 선택자 / 다음 요소 선택자

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>예제</title>

    <script src="js/jquery.min.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를 가진 요소의 바로 이전 요소 선택
                $(".txt").prev()
                .css(style_1);

                // .txt를 가진 요소 기준으로 바로 다음의 p 태그 선택
                $(".txt + p").css(style_2);

                // .txt를 가진 요소에서 다음로 두 번째 오는 요소 선택
                $(".txt").next().next()
                .css(style_2);
            }
        );
    </script>
</head>

<body>
    <div id="wrap">
        <h1>인접 관계 선택자</h1>
        <p>내용 1</p> <!-- $(".txt")에 의해 style_1 적용 -->
        <p class="txt">내용 2</p>
        <p>내용 3</p> <!-- $(".txt + p")에 의해 style_2 적용 -->
        <p>내용 4</p> <!-- $(".txt").next().next()에 의해 style_2 적용 -->
    </div>
</body>

</html>

 

5. 전체 이전 요소 선택자 / 전체 다음 요소 선택자

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>예제</title>

    <script src="js/jquery.min.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를 가진 요소의 이전 요소 모두 선택
                $(".txt").prevAll()
                .css(style_1);

                // .txt를 가진 요소의 이후 요소 모두 선택
                $(".txt").nextAll()
                .css(style_2);
            }
        );
    </script>
</head>

<body>
    <div id="wrap">
        <h1>인접 관계 선택자</h1> <!-- $(".txt").prevAll()에 의해 style_1 적용 -->
        <p>내용 1</p>  <!-- $(".txt").prevAll()에 의해 style_1 적용 -->
        <p class="txt">내용 2</p>
        <p>내용 3</p>  <!-- $(".txt").nextAll()에 의해 style_2 적용 -->
        <p>내용 4</p> <!-- $(".txt").nextAll()에 의해 style_2 적용 -->
    </div>
</body>

</html>

 

6. 전체 형제 요소 선택자

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>예제</title>

    <script src="js/jquery.min.js"></script>

    <script>
        $(
            function() {
                // ********** 전체 형제 요소 선택자 **********
                // 선택한 요소의 모든 형제 요소 선택

                var style_1 = {
                    "background-color":"#0ff",
                    "border":"2px solid #f00"
                }

                // .txt를 가진 요소의 모든 형제 요소 선택
                $(".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>
    </div>
</body>

</html>

 

7. 범위 제한 전체 이전 요소 선택자 / 범위 제한 전체 다음 요소 선택자

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>예제</title>

    <script src="js/jquery.min.js"></script>

    <script>
        $(
            function() {
                // ********** 범위 제한 전체 이전, 전체 다음 요소 선택자 **********
                // 선택한 요소를 기준으로 형제 요소 중 지정한 범위 내의 전체 이전 또는
                // 전체 다음 요소를 선택함

                var style_1 = {
                    "background-color":"#0ff",
                    "border":"2px solid #f00"
                }

                // .txt3를 가진 요소부터
                // .title 이전까지의 이전 요소를 모두 선택
                $(".txt3").prevUntil(".title")
                .css(style_1);

                // .txt3를 가진 요소부터
                // .txt6 이전까지의 이후 요소를 모두 선택
                $(".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>

 

8. 상위 요소 선택자

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>예제</title>

    <script src="js/jquery.min.js"></script>

    <script>
        $(
            function() {
                // ********** 상위 요소 선택자 **********
                // 선택한 요소를 기준으로 모든 상위 요소를 선택하거나,
                // 상위 요소 중 선택하고자 하는 요소만 선택

                // .txt1을 가진 요소의 전체 상위 요소 선택
                $(".txt1").parents()
                .css({
                    "border":"2px dashed #00f"
                });

                // .txt2를 가진 요소의 전체 상위 요소 중 <div>만 선택
                $(".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>만 선택 -->
        </div>
    </section>
</body>

</html>

 

9. 가장 가까운 상위 요소 선택자

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>예제</title>

    <script src="js/jquery.min.js"></script>

    <script>
        $(
            function() {
                // ********** 가장 가까운 상위 요소 선택자 **********
                // 선택한 요소를 기준으로 가장 가까운 상위 요소만 선택

                // .txt1을 가진 요소의 전체 상위 요소 선택
                $(".txt1").closest("div")
                .css({
                    "border":"2px solid #f00"
                });
            }
        );
    </script>
</head>

<body>
    <h1 class="title">선택자</h1>
    <div>
        <div>
            <p>내용 1</p>
        </div>
        <div>
            <p class="txt1">내용 2</p>
        </div>
        <div>
            <p>내용 3</p>
        </div>
    </div>
</body>

</html>

저작자표시 비영리 변경금지 (새창열림)

'제이쿼리' 카테고리의 다른 글

[제이쿼리] 위치 탐색 선택자  (0) 2020.05.26
[제이쿼리] 기본 선택자  (0) 2020.05.25
[제이쿼리] 직접 선택자  (0) 2020.05.25
[제이쿼리] Chainning  (0) 2020.05.22
[제이쿼리] 설치하기  (0) 2020.05.22

'제이쿼리' Related Articles

티스토리툴바