jQuery 요소 선택하기

어떤 요소를 선택하고, 그걸로 어떤 작업을 하는 것이 jQuery의 가장 기본적인 개념이다.

이때, 어떤 요소를 "선택"하는 방법은 아래와 같다.

(jQuery는 대부분의 CSS3 선택자를 지원한다.)

 

 

ID로 선택하기

$( "#myId" ); // Note IDs must be unique per page.

 

클래스 이름으로 선택하기

$( ".myClass" );

 

속성으로 선택하기

$( "input[name='first_name']" );

 

CSS 선택자로 선택하기

$( "#contents ul.people li" );

 

콤마 구분자로 선택하기

$( "div.myClass, ul.people" );

 

가상 선택자

$( "a.external:first" );
$( "tr:odd" );
 
// Select all input-like elements in a form (more on this below).
$( "#myForm :input" );
$( "div:visible" );
 
// All except the first three divs.
$( "div:gt(2)" );
 
 
// All currently animated divs.
$( "div:animated" );

:visible과 :hidden 가상 선택자는 요소의 실제 물리적인 높이나 가로 등의 가시성을 테스트한다.(CSS의 visibility나 display속성이 대상이 아니다.)

 

선택자가 어떤 요소를 포함했는지 확인하는 가장 좋은 방법은 .length 를 사용하는 것

// Doesn't work!
if ( $( "div.foo" ) ) {
    ...
}
 
// Testing whether a selection contains elements.
if ( $( "div.foo" ).length ) {
    ...
}

 

 

 

 

 

 

http://learn.jquery.com/using-jquery-core/selecting-elements/