jQuery 입문 | 요소의 선택 | CSS 선택자(Selector)

CSS 선택자를 이용한 선택

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

태그 이름로 선택

요소(element)의 태그 이름으로 HTML 요소를 모두 선택할 수 있다.
이는 자바스크립트의 getElementsByTagName() 메소드와 동일한 동작을 한다.

아래 예제에서 <button>을 클릭하면, <span>의 태그의 글씨가 사이즈 30px로 설정된다.

$("button").on("click", function() {
  $("span").css("fontSize", "30px");
});

코드 실행

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

아이디로 선택

요소의 아이디(id)로 특정 HTML 요소를 선택할 수도 있다.
이는 자바스크립트의getElementsById() 메소드와 동일한 동작을 한다.

아래 예제에서 <button>을 클릭하면, 아이디가 devkuma인 글씨가 사이즈 30px로 설정된다.

$("button").on("click", function() {
  $("#devkuma").css("fontSize", "30px");
});

코드 실행

클래스로 선택

클래스(class)로 같은 클래스의 HTML 요소를 모두 선택할 수 있다.
이는 자바스크립트의 getElementsByClassName() 메소드와 동일한 동작을 한다.

아래 예제에서 <button>을 클릭하면, 클래스가 devkuma인 글씨가 사이즈 30px로 설정된다.

$("button").on("click", function() {
  $(".devkuma").css("fontSize", "30px");
});

코드 실행

그밖에 선택

그밖에 속성(attribute) 및 여러 css로 선택에 해당되는 특정 HTML 요소를 선택할 수 있다.

아래 예제에서 id가 btn1인 요소를 클릭하면, 속성 title이 devkuma인 글씨가 사이즈 30px로 설정된다.

$("#btn1").on("click", function() {
  $("span[title=devkuma]").css("fontSize", "30px");
});

아래 예제에서 id가 btn2인 요소를 클릭하면, btn2 자신의 글씨가 사이즈 30px로 설정된다.

	$("#btn2").on("click", function() {
      $(this).css("fontSize", "30px");
    });

아래 예제에서 id가 btn3인 요소를 클릭하면, <li>의 첫번째 항목의 글씨가 사이즈 30px로 설정된다.

$("#btn3").on("click", function() {
  $("ul li:first").css("color", "red");
});

코드 실행