jQuery 요소 Element 선택 및 선택자 Selector 사용

---

CSS 선택자

요소의 선택

• 제이쿼리를 사용하면 손쉽게 HTML 요소를 선택하여, 선택된 요소에 특정 동작을 설정 할 수 있음.
• 제이쿼리에서는 요소를 선택하기 위해 대부분의 CSS 선택자뿐만 아니라 몇몇 비표준 선택자까지 제공

CSS 선택자를 이용한 선택

• 제이쿼리에서는 CSS 선택자를 사용하여 HTML 요소를 선택 가능
• 태그 이름을 사용하여 같은 태그 이름을 가지는 HTML 요소를 모두 선택 가능
• 자바스크립트의 getElementsByTagName() 메서드와 같은 동작

$(function() {
    $("p").on("click", function() {        // <p>요소를 모두 선택함.
        $("span").css("fontSize", "28px"); // <span>요소를 모두 선택함.
    });
});

• $() 함수에 전달되는 인수는 반드시 따옴표("")를 사용한 문자열 형태로 전달
• 아이디(id)를 사용하여 특정 HTML 요소를 선택 가능
• 자바스크립트의 getElementsById() 메서드와 같은 동작

$(function() {
    $("p").on("click", function() {
        $("#jq").css("border", "2px solid orange"); // 아이디가 "jq"인 요소를 선택함.
    });
});

• 클래스(class)를 사용하여 같은 클래스에 속하는 HTML 요소를 모두 선택 가능
• 자바스크립트의 getElementsByClassName() 메서드와 같은 동작

$(function() {
    $("p").on("click", function() {
        $(".jq").css("backgroundColor", "lightgray"); // 클래스가 "jq"인 요소를 모두 선택함.
    });
});

//속성(attribute)을 사용하여 속성이 조건에 맞는 특정 HTML 요소를 선택 가능
$(function() {
    $("button").on("click", function() { // <img>요소 중에서 alt 속성값이 "flower"인 요소를 모두 선택함.
        $("img[alt='flower']").attr("src", "/examples/images/img_monalisa.png");
    });
});

제이쿼리 선택자

• 제이쿼리에서는 CSS 선택자뿐만 아니라 몇몇 비표준 선택자까지도 사용가능
• 이러한 비표준 선택자를 사용하면 선택한 요소를 저장하거나, 그 결과에 대해 필터링까지 가능
• 선택한 요소의 저장 : 제이쿼리에서는 선택한 요소들을 변수에 저장하여 사용가능

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

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

});

• 하지만 이렇게 저장된 요소들은 변수에 저장될 당시의 요소들만 저장
• 즉, 요소가 저장된 이후에 문서에 추가되거나 삭제된 요소들을 자동으로 갱신 X
• 선택한 요소의 필터링 : 제이쿼리에서는 선택한 요소 중에서 더욱 세분화된 선택을 하기 위한 필터링을 진행가능

$(function() {
    $("button").on("click", function() {
        // <li>요소 중에서 <span>요소를 가지고 있는 요소만을 선택
        $("li:has(span)").text("<span>요소를 가지고 있는 아이템이에요!");
    });
});

필터링에 사용할 수 있는 선택자

: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 요소의 선택

제이쿼리에서는 입력 양식에 관련된 특정 요소를 손쉽게 선택 가능

$(function() {

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

        // 체크되어 있는 요소를 모두 선택함.
        $(":checked").next().text("체크되어 있는 요소는 이 요소입니다.");
    });
});

특정 <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 메서드는 아무런 인수를 전달 없이 호출
• setter 메서드는 대입하는 값을 인수로 전달하여 호출

$(function() {
    $("button").on("click", function() {
        // ① <h1>요소의 텍스트를 읽어오는 getter 메서드
        let newText = $("h1").html();
        // ② id가 "text"인 요소에 새로운 텍스트를 설정하는 setter 메서드
        $("#text").html(newText);
    });
});

• 위 예제의 ①번처럼 .html() 메서드에 인수를 전달하지 않고 호출하면, 해당 HTML 요소에서 값을 읽어오는 getter 메서드로 사용
• 하지만 ②번처럼 인수를 전달하고 호출하면, 해당 HTML 요소에 새로운 값을 설정하는 setter 메서드로 사용

메서드 체이닝(method chaining)

• getter 메서드는 선택된 요소의 값을 읽어서 그 값을 반환
• 만약 선택된 요소가 여러 개 존재하면, getter 메서드는 가장 '첫 번째 요소'의 값만을 반환
• 하지만 setter 메서드는 선택된 '모든 요소'에 인수로 전달된 값을 설정
• 선택된 모든 요소에 접근할 수 있는 또 다른 제이쿼리 객체를 반환
• 반환된 제이쿼리 객체를 이용하면 세미콜론(;)을 사용하지 않고도, 곧바로 다른 제이쿼리 메서드를 호출가능
• 이런 방식으로 여러 개의 메서드가 연속으로 호출되는 것을 메서드 체이닝(method chaining)
  
  

$(function() {
    $("button").on("click", function() {
        // id가 "list"인 요소의 자손 요소 중에서 <li>요소를 모두 선택한 후에,
        // 그 중에서 두 번째 요소의 값을 설정함.
        $("#list").find("li").eq(1).html("두 번째 아이템을 선택했어요!!");
    });
});

eq() : 선택한 요소 중에서 지정된 인덱스에 해당하는 요소를 선택하는 메서드, 메서드 체이닝 도중에 .end() 메서드를 사용하면 바로 이전에 선택했던 요소의 집합을 다시 선택가능

$(function() {
    $("button").on("click", function() {
        $("#list")      // id가 "list"인 요소의 자손 요소 중에서
          .find("li") // ① <li>요소를 모두 선택한 후에,
          .eq(1).html("두 번째 아이템을 선택했어요!!")  // ② 그 중에서 두 번째 요소의 값을 설정함.
          .end()      // ③ 다시 id가 "list"인 요소의 자손 요소 중에서 <li>요소를 모두 선택한 후에,
          .eq(2).html("세 번째 아이템도 선택했어요!!"); // ④ 그 중에서 세 번째 요소의 값을 설정함.
    });
});

• 위 예제의 ②번에서, .eq() 메서드를 사용하여 ①번 라인에서 .find() 메서드로 선택한 요소의 집합 중 두 번째 요소를 선택
• 그리고 ③번에서, .end() 메서드를 사용하여 .eq() 메서드를 사용하기 이전 집합을 다시 선택
• 따라서 ④번에서, 또다시 .eq() 메서드를 사용하여 요소를 선택 가능

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

$(function() {
    $("#getter").on("click", function() {
        // ①
        let 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);

        // ⑤
        let size = "너비는 " + $("#box").width() + "px이고, 높이는 "
            + $("#box").height() + "px로 변경되었습니다.<br>";     // ⑥
        $("#text").html(size);
    });
});

• 위의 예제에서는 선택한 요소의 너비와 높이 값을 얻기 위해 ①번부터 ③번, ⑤번과 ⑥번 라인까지 .width() 메서드와 .height() 메서드를 getter 메서드로 사용
• 하지만 ④번 라인에서 .width() 메서드와 .height() 메서드는 인수를 전달받아 너비와 높이 값을 설정하기 위한 setter 메서드로 사용

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

$(function() {
    $("button").on("click", function() {
        // ① <img>요소의 src 속성값을 읽어오는 getter 메서드
        let imgSrc = $("img").attr("src");

        // ② <img>요소의 src 속성값을 새로운 값으로 설정하는 setter 메서드
        $("img").attr("src", "/examples/images/img_flag.png");
    });
});

• 위 예제의 ①번 라인에서는 .attr() 메서드에 인수를 하나만 전달하여, 해당 HTML 요소에서 인수로 전달받은 이름의 속성값을 읽어오는 getter 메서드로 사용
• 하지만 ②번 라인에서는 인수를 두 개 전달하여, 해당 HTML 요소에 첫 번째 인수로 전달받은 이름의 속성값으로 두 번째 인수로 전달받은 값을 설정하는 setter 메서드로 사용

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

• .html() : 해당 요소의 HTML 콘텐츠를 반환하거나 설정함.
• .text() : 해당 요소의 텍스트 콘텐츠를 반환하거나 설정함.
• .width() : 선택한 요소 중에서 첫 번째 요소의 너비를 픽셀 단위의 정수로 반환하거나 설정함.
• .height() : 선택한 요소 중에서 첫 번째 요소의 높이를 픽셀 단위의 정수로 반환하거나 설정함.
• .attr() : 해당 요소의 명시된 속성의 속성값을 반환하거나 설정함.
• .position() : 선택한 요소 중에서 첫 번째 요소에 대해 특정 위치에 존재하는 객체를 반환함. (getter 메서드)
• .val() : <form>요소의 값을 반환하거나 설정함.

요소의 추가

• 제이쿼리는 새로운 요소나 콘텐츠를 손쉽게 추가할 수 있도록 여러 메서드를 제공
• 기존 요소의 내부에 추가 : 다음 메서드를 사용하면 기존 요소의 내부에 새로운 요소나 콘텐츠를 추가 가능

.append() : 선택한 요소의 '마지막'에 새로운 요소나 콘텐츠를 추가

$(function() {
    $("button").on("click", function() {
        $("#list").append("<li>새로 추가된 아이템이에요!</li>");
    });
});

.prepend() : 선택한 요소의 '처음'에 새로운 요소나 콘텐츠를 추가

$(function() {
    $("button").on("click", function() {
        $("li").prepend("새로 추가된 콘텐츠에요!");
    });
});

.appendTo() : 선택한 요소를 '해당 요소의 마지막'에 삽입, .append() 메서드와 같지만, source와 target의 위치가 서로 반대

$(function() {

    $("#firstBtn").on("click", function() {
        // id가 "list"인 요소의 맨 마지막에 id가 "firstItem"인 요소 추가
        $("#firstItem").appendTo("#list");
    });
});

.prependTo() : 선택한 요소를 '해당 요소의 처음'에 삽입, .prepend() 메서드와 같지만,source와 target의 위치가 서로 반대

$(function() {
    $("button").on("click", function() {
        $("<b>새로 추가된 콘텐츠에요!</b>").prependTo(".item");
    });
});

.before() : 메서드는 선택한 요소의 '바로 앞에' 새로운 요소나 콘텐츠를 추가

$(function() {
    $("button").on("click", function() {
        // id가 "firstRow"인 요소의 바로 앞에 새로운 <tr>요소 추가
        $("#firstRow").before("<tr><td>새로운 행이에요!</td></tr>");
    });
});

.after() : 선택한 요소의 '바로 뒤에' 새로운 요소나 콘텐츠를 추가

$(function() {
    $("button").on("click", function() {
        // id가 "firstRow"인 요소의 바로 뒤에 새로운 <tr>요소 추가
        $("#firstRow").after("<tr><td>새로운 행이에요!</td></tr>");
    });
});

.insertBefore() : 선택한 요소를 '해당 요소의 앞에' 삽입, 동작은 before() 메서드와 같지만,source와 target의 위치가 서로 반대

$(function() {
    $("button").on("click", function() {
        // id가 "secondColumn"인 요소의 바로 앞에 새로운 <td>요소 추가
        $("<td>새로운 셀이에요!</td>").insertBefore("#secondColumn");
    });
});

.insertAfter() : 선택한 요소를 '해당 요소의 뒤에' 삽입, 동작은 .after() 메서드와 같지만, source와 target의 위치가 서로 반대

$(function() {
    $("button").on("click", function() {
        // id가 "secondColumn"인 요소의 바로 뒤에 새로운 <td>요소 추가
        $("<td>새로운 셀이에요!</td>").insertAfter("#secondColumn");
    });
});

.wrap() : '선택한 요소'를 포함하는 새로운 요소를 추가

$(function() {
    $("button").on("click", function() {
        // class가 "content"인 각 요소를 포함하는 새로운 요소 추가
        $(".content").wrap("<div class='wrapper'></div>");
    });
});

.wrapAll() : '선택한 모든 요소'를 포함하는 새로운 요소를 추가

$(function() {
    $("button").on("click", function() {
        // class가 "content"인 모든 요소를 포함하는 새로운 요소 추가
        $(".content").wrapAll("<div class='wrapper'></div>");
    });
});

.wrapInner() : '선택한 요소에 포함되는' 새로운 요소를 추가

$(function() {
    $("button").on("click", function() {
        // class가 "content"인 각 요소에 포함되는 새로운 요소 추가
        $(".content").wrapInner("<div class='wrapper'></div>");
    });
});

Reference

https://www.tcpschool.com/jquery/jq_elementSelection_cssSelector

코딩교육 티씨피스쿨