[jQuery] CSS 선택자

복습

https://shins99.tistory.com/79

[jQuery] 제이쿼리 문법

---

요소의 선택

- 제이쿼리를 사용하면 손쉽게 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");
    });
});