Library/jQuery 요소의 선택 (CSS/제이쿼리 선택자)
    Dexter_-   2018. 10. 23. 17:14
  • 728x90
    반응형

    요소의 선택


    요소의 선택


    제이쿼리를 사용하면 손쉽게 HTML 요소를 선택하여, 선택된 요소에 특정 동작을 설정할 수 있다.

    제이쿼리에서는 요소를 선택하기 위해 대부분의 CSS 선택자뿐만 아니라 몇몇 비표준 선택자까지 제공하고 있다.



    CSS 선택자를 이용한 선택


    제이쿼리에서는 CSS 선택자를 사용하여 HTML 요소를 선택할 수 있다.


    태그 이름을 사용하여 같은 태그 이름을 가지는 HTML 요소를 모두 선택할 수 있다.

    이것은 자바스크립트의 getElementByTagName( ) 메소드와 같은 동작을 한다.


    예제

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>jQuery Element Selection</title>
        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <script>
            $(function() {
                $("p").on("click", function() {            // <p>요소를 모두 선택함.
                    $("span").css("fontSize", "28px");    // <span>요소를 모두 선택함.
                });
            });
       </script>
    </head>
     
    <body>
     
        <h1>HTML 태그 선택자</h1>
     
        <p>이제부터 <span>제이쿼리</span>를 다 같이 공부해보죠!!<br>
        마우스로 글씨를 클릭해보세요!!</p>
        
    </body>
     
    </html>
    		cs


    실행결과 :

    HTML 태그 선택자

    이제부터 제이쿼리를 다 같이 공부해보죠!!
    마우스로 글씨를 클릭해보세요!!



    TIP : $( ) 함수에 전달되는 인수는 반드시 따옴표("")를 사용한 문자열 형태로 전달되어야 한다.


    아이디(id)를 사용하여 특정 HTML 요소를 선택할 수도 있다.

    이것은 자바스크립트의 getElementsById( ) 메소드와 같은 동작을 한다.


    예제

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>jQuery Element Selection</title>
        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <script>
            $(function() {
                $("p").on("click", function() {
                    $("#jq").css("border", "2px solid orange");        // 아이디가 "jq"인 요소를 선택함.
                });
            });
       </script>
    </head>
     
    <body>
     
        <h1>아이디 선택자</h1>
     
        <p id="jq">이제부터 제이쿼리를 다 같이 공부해보죠!!</p>
        <p>마우스로 글씨를 클릭해보세요!!</p>
        
    </body>
     
    </html>
    		cs


    실행결과 :

    아이디 선택자

    이제부터 제이쿼리를 다 같이 공부해보죠!!

    마우스로 글씨를 클릭해보세요!!



    클래스(class)를 사용하여 같은 클래스에 속하는 HTML 요소를 모두 선택할 수 있다.

    이것은 자바스크립트의 getEleementsByClaaName( ) 메소드와 같은 동작을 한다.


    예제

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>jQuery Element Selection</title>
        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <script>
            $(function() {
                $("p").on("click", function() {
                    $(".jq").css("backgroundColor", "lightgray");    // 클래스가 "jq"인 요소를 모두 선택함.
                });
            });
       </script>
    </head>
     
    <body>
     
        <h1>클래스 선택자</h1>
     
        <p class="jq">이제부터 제이쿼리를 다 같이 공부해보죠!!</p>
        <p class="jq">클래스 선택자로 특정 요소들을 한 번에 선택할 수 있어요!!</p>
        <p>마우스로 글씨를 클릭해보세요!!</p>
        
    </body>
     
    </html>
    		cs


    실행결과 :

    클래스 선택자

    이제부터 제이쿼리를 다 같이 공부해보죠!!

    클래스 선택자로 특정 요소들을 한 번에 선택할 수 있어요!!

    마우스로 글씨를 클릭해보세요!!



    속성(attribute)을 사용하여 속성이 조건에 맞는 특정 HTML요소를 택할 수 있다,


    문법

    $(function() {

        $("button").on("click", function() { // <img>요소 중에서 alt 속성값이 "flower"인 요소를 모두 선택함.

            $("img[alt='flower']").attr("src", "/examples/images/img_monalisa.png");

        });

    });



    제이쿼리 선택자


    제이쿼리에서는 CSS 선택자뿐만 아니라 몇몇 비표준 선택자까지도 사용할 수 있다.

    이러한 비표준 선택자를 사용하면 선택한 요소를 저장하거나, 그 결과에 대해 필터링까지 할 수 있다.



    선택한 요소의 저장


    제이쿼리에서는 선택한 요소들을 변수에 저장하여 사용할 수 있다.


    다음 예제는 문서 내의 모든<li>요소를 선택하여 변수에 저장한 후, 해당 변수를 사용하는 예제이다.


    예제

    $(function() {

        var items = $("li"); // <li>요소를 모두 선택하여 변수 items에 저장함.

        $("button").on("click", function() {

            $("#len").text("저장된 <li>요소의 총 개수는 " + items.length + "개 입니다.");

        });

    });


    하지만 이렇게 저장된 요소들은 변수에 저장될 당시의 요소들만 저장된다.

    즉, 요소가 저장된 이후에 문서에 추가되거나 삭제된 요소들을 자동으로 갱신하지는 않는다.



    선택한 요소의 필터링


    제이쿼리에서는 선택한 요소 중에서 더욱 세분화된 선택을 하기 위한 필터링을 진행할 수 있다.


    다음 예제는 문서 내의 모든 <li> 요소 중에서 <span>요소를 가지고 있는 요소만을 선택하는 예제이다.


    예제

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>jQuery Element Selection</title>
        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <script>
            $(function() {
                $("button").on("click", function() {
                    $("li:has(span)").text("<span>요소를 가지고 있는 아이템이에요!");
                });
            });
       </script>
    </head>
     
    <body>
     
        <h1>선택한 요소의 필터링</h1>
     
        <ul>
            <li>첫 번째 아이템이에요!</li>
            <li><span>두 번째</span> 아이템이에요!</li>
            <li>세 번째 아이템이에요!</li>
        </ul>
        <button>필터링</button>
        
    </body>
     
    </html>
    		cs


    실행결과 :

    선택한 요소의 필터링

    • 첫 번째 아이템이에요!
    • 두 번째 아이템이에요!
    • 세 번째 아이템이에요!


    필터링에 사용할 수 있는 선택자는 다음과 같다.


    선택자

    설명

    :eq(n)

    선택한 요소 중에서 인덱스가 n인 요소를 선택함.

    :gt(n)

    선택한 요소 중에서 인덱스가 n보다 큰 요소를 모두 선택함.

    :lt(n)

    선택한 요소 중에서 인덱스가 n보다 작은 요소를 모두 선택함.

    :even

    선택한 요소 중에서 인덱스가 짝수인 요소를 모두 선택함.

    :odd

    선택한 요소 중에서 인덱스가 홀수인 요소를 모두 선택함.

    :first

    선택한 요소 중에서 첫 번째 요소를 선택함.

    :last

    선택한 요소 중에서 마지막 요소를 선택함.

    :animated

    선택한 요소 중에서 애니메이션 효과가 실행 중인 요소를 모두 선택함.

    :header

    선택한 요소 중에서 h1부터 h6까지의 요소는 모두 선택함.

    :lang(언어)

    선택한 요소 중에서 지정한 언어의 요소를 모두 선택함.

    not(선택자)

    선택한 요소 중에서 지정한 선택자와 일치하지 않는 요소를 모두 선택함.

    :root

    선택한 요소 중에서 최상위 루트 요소를 선택함.

    :target

    선택한 요소 중에서 웹 페이지 URI의 fragment 식별자와 일치하는 요소를 모두 선택함.

    :contains(텍스트)

    선택한 요소 중에서 지정한 텍스트를 포함하는 요소를 모두 선택함.

    :has(선택자)

    선택한 요소 중에서 지정한 선택자와 일치하는 자손 요소를 갖는 요소를 모두 선택함.

    :empty

    선택한 요소 중에서 자식 요소를 가지고 있지 않은 요소를 모두 선택함.

    :parent

    선택한 요소 중에서 자식 요소를 가지고 있는 요소를 모두 선택함.



    input 요소의 선택


    제이쿼리에서는 입력 양식에 관련된 특정 요소를 손쉽게 선택할 수 있다.


    예제

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>jQuery Element Selection</title>
        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <script>
            $(function() {
                $("button").on("click", function() {
                    // 체크되어 있는 요소를 모두 선택함.
                    $(":checked").next().text("체크되어 있는 요소는 이 요소입니다.");
                });
            });
       </script>
    </head>
     
    <body>
     
        <h1>Form 요소의 선택</h1>
     
        <form>
            <input type="checkbox" name="lecture" value="html"> <span>HTML</span> <br>
            <input type="checkbox" name="lecture" value="css"> <span>CSS</span> <br>
            <input type="checkbox" name="lecture" value="javascript"> <span>자바스크립트</span> <br>
            <input type="checkbox" name="lecture" value="jquery" checked> <span>제이쿼리</span>
        </form>
        <button>필터링</button>
        
    </body>
     
    </html>
    		cs


    실행결과 :

    Form 요소의 선택

    HTML
    CSS
    자바스크립트
    제이쿼리


    특정 <input> 요소를 선택할 수 있는 선택자는 다음과 같다.


    선택자

    설명 

    :button

    type 속성값이 "button"인 요소를 모두 선택함.

    :checkbox

    type 속성값이 "checkbox"인 요소를 모두 선택함.

    :file

    type 속성값이 "file"인 요소를 모두 선택함.

    :image

    type 속성값이 "image"인 요소를 모두 선택함.

    :password

    type 속성값이 "password"인 요소를 모두 선택함.

    :radio

    type 속성값이 "radio"인 요소를 모두 선택함.

    :reset

    type 속성값이 "reset"인 요소를 모두 선택함.

    :submit

    type 속성값이 "submit"인 요소를 모두 선택함.

    :text

    type 속성값이 "text"인 요소를 모두 선택함.

    :input

    <input>, <textarea>, <select>, <button> 요소를 모두 선택함.

    :checked

    type 속성값이 "checkbox" 또는 "radio"인 요소 중에서 체크되어 있는 요소를 모두 선택함. 

    :selected

    <option>요소 중에서 선택된 요소를 모두 선택함.

    :focus

    현재 포커스가 가지고 있는 요소를 선택함.

    :disabled

    비활성화되어있는 요소를 모두 선택함.

    :enabled

    활성화되어있는 요소를 모두 선택함.



    getter 메소드와  setter 메소드


    선택자에 의해 선택된 요소의 값을 읽거나 설정하기 위해서는 제이쿼리 메소드를 통해 해당 요소에 접근해야만 한다.


    getter 메소드는 선택된 요소에 접근하여 그 값을 읽어오기 위한 메소드이다.

    이러한 getter 메소드는 아무런 인수를 전달하지 않고 호출한다.


    setter 메소드는 선택된 요소에 접근하여 그 값을 설정하기 위한 메소드이다.

    이러한 setter 메소드는 대입하고자 하는 값을 인수로 전달하여 호출한다.


    다음 예제는 <h1>요소에 접근하여 그 값을 읽어들인 후, 아이디가 "text"인 요소의 값을 해당 값으로 설정하는 예제이다.


    예제

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>jQuery Element Access</title>
        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <script>
            $(function() {
                $("button").on("click", function() {
                    var newText = $("h1").html();    // <h1>요소의 텍스트를 읽어오는 getter 메소드
                    $("#text").html(newText);        // id가 "text"인 요소에 새로운 텍스트를 설정하는 setter 메소드
                });
            });
       </script>
    </head>
     
    <body>
     
        <h1>.html() 메소드</h1>
        <p>아래의 버튼을 누르면 다음 단락에 새로운 텍스트를 설정할 수 있어요!!</p>
        <button>새로운 텍스트!</button>
        <p id="text"></p>
        
    </body>
     
    </html>
    		cs


    실행결과 :

    .html() 메소드

    아래의 버튼을 누르면 다음 단락에 새로운 텍스트를 설정할 수 있어요!!



    위 예제의 11번 라인처럼 .html( ) 메소드에 인수를 전달하지 않고 호출하면, 해당 HTML 요소에서 값을 읽어오는 getter메소드로 사용된다.

    하지만 12번 라인처럼 인수를 전달하고 호출하면, 해당 HTML 요소에 새로운 값을 설정하는 setter 메소드로 사용된다.



    메소드 체이닝(method chaining)


    getter 메소드는 선택된 요소의 값을 읽어서 그 값을 반환한다.

    만약 선택된 요소가 여러 개 존재하면, getter 메소드는 가장 '첫 번째 요소'의 값만을 반환할 것이다.


    하지만 setter 메소드는 선택된 '모든 요소'에 인수로 전달된 값을 설정한다.

    그리고 선택된 모든 요소에 접근할 수 있는 또 다른 제이쿼리가 객체를 반환한다.


    이렇게 반환된 제이쿼리 객체를 이용하면 세미클론(;)을 사용하지 않고도, 곧바로 다른 제이쿼리 메소드를 호출할 수 있다.

    이런 방식으로 여러 개의 메소드가 연속으로 호출되는 것을 메소드 체이닝(method chaining)이라고 한다.


    다음 예제는 선택된 요소에 .find( ), .eq( ), .html( ) 메소드를 연속으로 호출하는 예제이다.


    예제

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>jQuery Element Access</title>
        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <script>
            $(function() {
                $("button").on("click", function() {
                    // id가 "list"인 요소의 자손 요소 중에서 <li>요소를 모두 선택한 후에,
                    // 그 중에서 두 번째 요소의 값을 설정함.
                    $("#list").find("li").eq(1).html("두 번째 아이템을 선택했어요!!");
                });
            });
       </script>
    </head>
     
    <body>
     
        <h1>메소드 체이닝</h1>
        <ul id="list">
            <li>첫 번째 아이템이에요!</li>
            <li>두 번째 아이템이에요!</li>
            <li>세 번째 아이템이에요!</li>
        </ul>
        <button>텍스트 변경</button>
        
    </body>
     
    </html>
    		cs


    실행결과 :

    메소드 체이닝

    • 첫 번째 아이템이에요!
    • 두 번째 아이템이에요!
    • 세 번째 아이템이에요!


    TIP : eq( ) 메소드는 선택한 요소 중에서 지정된 인덱스에 해당하는 요소를 선택하는 메소드이다.


    메소드 체이닝 도중에 .end( ) 메소드를 사용하면 바로 이전에 선택했던 요소의 집합을 다시 선택할 수 있다.


    예제

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>jQuery Element Access</title>
        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <script>
            $(function() {
                $("button").on("click", function() {
                    $("#list")            // id가 "list"인 요소의 자손 요소 중에서
                        .find("li")        // <li>요소를 모두 선택한 후에,
                        .eq(1).html("두 번째 아이템을 선택했어요!!")    // 그 중에서 두 번째 요소의 값을 설정함.
                        .end()            // 다시 id가 "list"인 요소의 자손 요소 중에서 <li>요소를 모두 선택한 후에,
                        .eq(2).html("세 번째 아이템도 선택했어요!!");    // 그 중에서 세 번째 요소의 값을 설정함.
                });
            });
       </script>
    </head>
     
    <body>
     
        <h1>메소드 체이닝</h1>
        <ul id="list">
            <li>첫 번째 아이템이에요!</li>
            <li>두 번째 아이템이에요!</li>
            <li>세 번째 아이템이에요!</li>
        </ul>
        <button>텍스트 변경</button>
        
    </body>
     
    </html>
    		cs


    실행결과 :

    메소드 체이닝

    • 첫 번째 아이템이에요!
    • 두 번째 아이템이에요!
    • 세 번째 아이템이에요!


    위 예제의 13번 라인에서는 .eq( ) 메소드를 사용하여 12번 라인에서 .find( ) 메소드로 선택한 요소의 집합 중 두 번째 요소를 선택한다.

    그리고 14번 라인에서 .end( ) 메소드를 사용하여 .eq( ) 메소드를 사용하기 이전 집합을 다시 선택하고 있다.

    따라서 15번 라인에서 또다시 .eq( ) 메소드를 사용하여 요소를 선택할 수 있게 된다.



    .width( ) 메소드와 .height( ) 메소드


    제이쿼리에서는 선택한 요소의 너비나 높이를 반환하거나 설정하기 위한 .width( ) 메소드와 .height( ) 메소드를 제공한다.


    예제

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>jQuery Element Access</title>
        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <script>
            $(function() {
                $("#getter").on("click", function() {
                    var size = "너비는 " + $("#box").width() + "px이고, 높이는 "
                        + $("#box").height() + "px입니다.<br>";
                    $("#text").html(size);
                });
                $("#setter").on("click", function() {
                    w = $("#box").width();
                    h = $("#box").height();
                    $("#box").width(w/2).height(h/2);
     
                    var size = "너비는 " + $("#box").width() + "px이고, 높이는 "
                        + $("#box").height() + "px로 변경되었습니다.<br>";
                    $("#text").html(size);
                });
            });
       </script>
    </head>
     
    <body>
     
        <h1>.width() 메소드와 .height() 메소드</h1>
        <p>아래의 버튼을 누르면 다음 div 요소의 크기를 읽어오거나 설정할 수 있어요!!</p>
        <button id="getter">크기 읽어오기!</button>
        <button id="setter">크기 줄이기!</button><br><br>
        <div id="box" style="width: 400px; height: 200px; background-color: yellow"></div>
        <p id="text"></p>
        
    </body>
     
    </html>
    		cs


    실행결과 :

    .width() 메소드와 .height() 메소드

    아래의 버튼을 누르면 다음 div 요소의 크기를 읽어오거나 설정할 수 있어요!!





    위의 예제에서는 선택한 요소의 너비와 높이 값을 얻기 위해 11번 부터 17번, 20번과 21번 라인까지 .width( ) 메소드와 .height( ) 메소드를 getter 메소드로 사용하고 있다.

    하지만 18번 라인에서 .width( ) 메소드와 .height( ) 메소드는 인수를 전달받아 너비와 높이 값을 설정하기 위한 setter 메소드로 사용하고 있다.



    .attr( ) 메소드


    .attr( ) 메소드는 선택한 요소의 특정 속성값을 반환하거나 설정하기 위해 사용한다.


    예제

    $(function() {

        $("button").on("click", function() {

            // <img>요소의 src 속성값을 읽어오는 getter 메소드

    ①      var imgSrc = $("img").attr("src");

            // <img>요소의 src 속성값을 새로운 값으로 설정하는 setter 메소드

    ②      $("img").attr("src", "/examples/images/img_flag.png");

        });

    });


    위 예제의 ①번 라인에서는 .attr( ) 메소드에 인수를 하나만 전달하여, 해당 HTML요소에서 인수로 전달받은 이름의 속성값을 읽어오는 getter메소드로 사용하고 있다.

    하지만 ②번 라인에서는 인수를 두개 전달하여, 해당 HTML 요소에 첫 번째 인수로 전달받은 이름의 속성값으로 두 번째 인수로전달받은 값을 설정하는 setter 메소드로 사용하고 있다.



    대표적인 getter 메소드와 setter 메소드


    요소에 접근하여 요소의 값을 읽거나 설정할 수 있도록 해주는 대표적인 getter 메소드와 setter 메소드는 다음과 같다.


    메소드

    설명

    .html( )

    해당 요소의 HTML 콘텐츠를 반환하거나 설정함.

    .text( )

    해당 요소의 텍스트 콘텐츠를 반환하거나 설정함.

    .width( )

    선택한 요소 중에서 첫 번째 요소의 너비를 픽셀 단위의 정수로 반환하거나 설정함.

    .height( )

    선택한 요소 중에서 첫 번째 요소의 높이를 픽셀 단위의 정수로 반환하거나 설정함.

    .attr( )

    해당 요소의 명시된 속성의 속성값을 반환하거나 설정함.

     .position( )

    선택한 요소 중에서 첫 번째 요소에 대해 특정 위치에 존재하는 객체를 반환함. (getter 메소드)

    .val( )

    <form> 요소의 값을 반환하거나 설정함. 




    728x90
    반응형
    저작자표시 비영리 변경금지

    'Library > jQuery' 카테고리의 다른 글

    요소의 영역(크기/위치)  (0) 2018.10.24
    필터링 메소드  (0) 2018.10.24
    요소의 탐색  (0) 2018.10.24
    요소의 추가 / 복사 및 삭제  (0) 2018.10.24
    jQuery 로드 / 문법  (0) 2018.10.23

    관련글 관련글 더보기

Designed by Tistory.
상단으로

티스토리툴바