본문 바로가기

jQuery/jQuery Selectors

jQuery Basic Selector

jQuery 기본 선택자(Selector)

jQuery의 기본 철학은 Get and Action이다.

웹문서에서 특정 엘리먼트(태그)를 선택하고 해당 태그에 조작을 가하는 것이다.

특정 태그를 선택할 때 사용하는 방법은 CSS의 선택자(Selector) 선언과 유사하다.


기본적인 선택자의 형식

$('#title').css('color', 'green');

위와 같은 방법으로 이 페이지 제목의 색상을 초록색으로 변경하기


선택자의 종류

전체 선택자 : 모든 엘리먼트의 객체를 배열로 리턴함

태그 선택자

아이디 선택자

클래스 선택자

자식 선택자

후손 선택자

속성 선택자

필터 선택자


전체 선택자의 사용

$('*').css('color', 'red');

위와 같은 방법으로 현재 페이지의 전체 색상을 적색으로 변경하기


태그 선택자의 사용

$('b').css('color', 'red');

위의 방법으로 현재페이지의 <b> 태그의 색상을 적색으로 변경하기

2개 이상의 태그를 동시에 선택할 때...

$('b, span').css('color', 'red');


아이디 선택자의 사용

$('#title').css('color', 'green');

위와 같은 방법으로 이 페이지 제목의 색상을 초록색으로 변경하기


클래스 선택자의 사용

$('.myclass').css('color', 'blue');

위와 같은 방법으로 위 제목의 색상을 파랑색으로 변경하기

$('b.myclass').css('color', 'blue'); --> b 태그에 .myclass 라는 클래스가 선언된  경우

$('b, .myclss').css('color', 'blue'); --> b 태그나 .myclass 라는 클래스가 선언된 태그

$('.item.myclass').css('color', 'blue'); --> 2개의 클래스를 모두 가진 태그를 선택함

<div class="item myclass"> .... </div>