본문 바로가기
제이쿼리

[제이쿼리] 위치 탐색 선택자

2boki 2020. 5. 26. 12:08

1. first / last 선택자

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

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

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

    <script>
        $(
            function() {
                // ********** first / last 선택자 **********
                // first 선택자는 선택된 요소 중 첫 번째 요소만 선택
                // last 선택자는 선택된 요소 중 마지막 요소만 선택

                $("#menu li:first")
                .css({ "background-color" : "#ff0" });

                $("#menu li:last")
                .css({ "background-color" : "#0ff" });
            }
        );
    </script>
</head>

<body>
    <h1>탐색 선택자</h1>
    <ul id="menu">
        <li>내용 1</li>
        <li>내용 2</li>
        <li>내용 3</li>
        <li>내용 4</li>
    </ul>
</body>

</html>

 

2. even / odd 선택자

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

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

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

    <script>
        $(
            function() {
                // ********** even / odd 선택자 **********
                // even 선택자는 선택한 요소 중 홀수 번째(짝수 인덱스) 요소만 선택
                // odd 선택자는 선택한 요소 중 짝수 번째(홀수 인덱스) 요소만 선택

                $("#menu li:even")
                .css({ "background-color" : "red" });

                $("#menu li:odd")
                .css({ "background-color" : "blue" });
            }
        );
    </script>
</head>

<body>
    <h1>탐색 선택자</h1>
    <ul id="menu">
        <li>내용 1</li> <!-- 인덱스 0, even 선택, red -->
        <li>내용 2</li> <!-- 인덱스 1, odd 선택, blue -->
        <li>내용 3</li> <!-- 인덱스 2, even 선택, red-->
        <li>내용 4</li> <!-- 인덱스 3, odd 선택, blue -->
    </ul>
</body>

</html>

 

3. eq(index) / lt(index) / gt(index) 탐색 선택자

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

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

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

    <script>
        $(
            function() {
                // ********** eq(index) / lt(index) / gt(index) 탐색 선택자 **********
                // eq(index) 탐색 선택자는 선택한 요소 중 지정한 인덱스가 참조하는 요소만 선택
                // lt(index) 탐색 선택자는 선택한 요소 중 지정한 인덱스보다 작은(less than) 인덱스를 참조하는 요소만 선택
                // gt(index) 탐색 선택자는 선택한 요소 중 지정한 인덱스보다 큰(greater than) 인덱스를 참조하는 요소만 선택

                $("#menu li:eq(2)") // 혹은 $("#menu li").eq(2)로도 쓸 수 있음
                .css({ "background-color" : "red" });

                // slice를 사용하여 위의 eq(2)와 같은 결과를 출력하기
                // $("#menu li").slice(1, 4)
                // .css({ "background-color" : "red" });

                $("#menu li:lt(2)") // lt와 gt는 eq처럼 다른 형식으로 못 씀
                .css({ "background-color" : "green" });

                $("#menu li:gt(2)") // lt와 gt는 eq처럼 다른 형식으로 못 씀
                .css({ "background-color" : "blue" });
            }
        );
    </script>
</head>

<body>
    <h1>탐색 선택자</h1>
    <ul id="menu">
        <li>내용 1</li> <!-- 인덱스 0, lt 선택, green -->
        <li>내용 2</li> <!-- 인덱스 1, lt 선택, green -->
        <li>내용 3</li> <!-- 인덱스 2, eq 선택, red -->
        <li>내용 4</li> <!-- 인덱스 3, gt 선택, blue -->
        <li>내용 5</li> <!-- 인덱스 4, gt 선택, blue -->
    </ul>
</body>

</html>

 

4. first-of-type / last-of-type 선택자

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

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

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

    <script>
        $(
            function() {
                // ********** first-of-type, last-of-type 선택자 **********
                // first-of-type 선택자는 선택한 요소의 무리 중 첫 번째 요소만 선택
                // last-of-type 선택자는 선택한 요소의 무리 중 마지막에 위치한 요소만 선택

                $("li:first-of-type")
                .css({ "background-color" : "red" });

                $("li:last-of-type")
                .css({ "background-color" : "blue" });
            }
        );
    </script>
</head>

<body>
    <h1>탐색 선택자</h1>
    <ul>
        <li>내용 1-1</li> <!-- first-of-type 선택, red -->
        <li>내용 1-2</li>
        <li>내용 1-3</li> <!-- last-of-type 선택, blue -->
    </ul>
    <ul>
        <li>내용 2-1</li> <!-- first-of-type 선택, red -->
        <li>내용 2-2</li>
        <li>내용 2-3</li> <!-- last-of-type 선택, blue -->
    </ul>
</body>

</html>

 

5. nth-child(숫자n) / nth-last-of-type(숫자) 선택자

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

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

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

    <script>
        $(
            function() {
                // ********** nth-child(숫자n) / nth-last-of-type(숫자) 선택자 **********
                // nth-child(숫자n) 선택자는 선택한 요소의 무리 중 지정한 숫자(배수)의 요소를 선택
                // ex) li:nth-child(2)는 선택한 요소의 무리 중 두 번째의 <li> 태그를 가리키고,
                // li:nth-child(2n)은 선택한 요소의 무리 중 2의 배수의 <li> 태그를 가리킴

                // nth-last-of-type(숫자) 선택자는 선택한 요소의 무리 중 마지막에서 지정한 숫자의 요소를 선택

                // nth : n번째라는 의미

                $("#menu1 li:nth-child(1)")
                .css({ "background-color" : "red" });

                $("#menu1 li:nth-child(2n)")
                .css({ "background-color" : "green" });

                $("#menu2 li:nth-child(2)")
                .css({ "background-color" : "blue" });
            }
        );
    </script>
</head>

<body>
    <h1>탐색 선택자</h1>
    <ul id="menu1">
        <li>내용 1-1</li> <!-- nth-child(1) 선택, red -->
        <li>내용 1-2</li> <!-- nth-child(2n) 선택, green -->
        <li>내용 1-3</li>
        <li>내용 1-4</li> <!-- nth-child(2n) 선택, green -->
    </ul>
    <ul id="menu2">
        <li>내용 2-1</li>
        <li>내용 2-2</li> <!-- nth-child(2) 선택, blue -->
        <li>내용 2-3</li>
        <li>내용 2-4</li>
    </ul>
</body>

</html>

 

6. only-child / slice(index) 선택자

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

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

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

    <script>
        $(
            function() {
                // ********** only-child, slice(index) 선택자 **********
                // only-child 선택자는 선택한 요소가 '부모 요소에게 하나뿐인 자식 요소'인 경우 선택
                // slice(start index, end index) 선택자는 선택한 요소의 지정 구간 인덱스의 요소를 선택

                $("li:only-child")
                .css({ "background-color" : "red" });

                $("#menu1 li").slice(1, 3)
                .css({ "background-color" : "blue" });
                // slice(1, 3)은 1번 인덱스를 포함하고,
                // 3번 바로 직전의 인덱스까지 포함하여 선택한다는 의미
                // 따라서 1번과 2번 인덱스의 요소가 함께 선택됨
            }
        );
    </script>
</head>

<body>
    <h1>탐색 선택자</h1>
    <ul id="menu1">
        <li>내용 1-1</li>
        <li>내용 1-2</li> <!-- slice(1, 3) 선택, blue -->
        <li>내용 1-3</li> <!-- slice(1, 3) 선택, blue -->
        <li>내용 1-4</li>
    </ul>
    <ul id="menu2">
        <li>내용 2-1</li> <!-- only-child 선택, red -->
    </ul>
</body>

</html>

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

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

[제이쿼리] JSON  (0) 2020.05.26
[제이쿼리] 배열 관련 메소드  (0) 2020.05.26
[제이쿼리] 기본 선택자  (0) 2020.05.25
[제이쿼리] 인접 관계 선택자  (0) 2020.05.25
[제이쿼리] 직접 선택자  (0) 2020.05.25

'제이쿼리' Related Articles

티스토리툴바