[jquery] CSS 선택자를 이용하여 HTML 요소 선택하는 방법 4가지

<1> 태그 이름을 사용하여 같은 태그 이름을 가지는 HTML 요소를 모두 선택

$(function() {

    $("p").on("click", function() {        // <p>요소를 모두 선택함.

        $("span").css("fontSize", "28px"); // <span>요소를 모두 선택함.

    });

});

---

<2> 아이디(id)를 사용하여 특정 HTML 요소를 선택

$(function() {

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

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

    });

});

---

<3> 클래스(class)를 사용하여 같은 클래스에 속하는 HTML 요소를 모두 선택

$(function() {

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

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

    });

});

---

<4> 속성(attribute)을 사용하여 속성이 조건에 맞는 특정 HTML 요소를 선택

$(function() {

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

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

    });

});

---

출처 : http://tcpschool.com/jquery/jq_elementSelection_cssSelector