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 선택자
CSS 선택자에 대한 더 자세한 사항은 CSS 선택자 수업에서 확인할 수 있습니다.
