기본적인 jQuery 선택자

$() 팩터리 함수 => jQuery를 시작할 때는 언제나 $()로 시작한다.

($를 다른 프레임웍에서 사용하고 있다면 jQuery() 팩터리 함수를 치환하여 사용)

선택자의 세 가지 구성요소는 태그명, ID, 클래스 이다.
 ex) 태그명 : $('p') => 도큐먼트 내에서 모든 HTML 단락요소(p 요소)들을 얻어낸다.
 ex) ID : $('#some-id') => 도큐먼트 내에서 some-id라는 ID를 가지는 단일 요소를 가져온다.
 ex) 클래스 : $('.some-class') => 도큐먼트 내에서 some-class라는 클래스 이름을 가진 모든 요소를 가져온다.

CSS 선택자들
 - jQuery에서는 월드 와이드 웹 컨소시엄 사이트 내의 http://www.w3.org/style/CSS/#specs 에서 제시하는 CSS 명세서

1에서부터 3까지에 포함되어 있는 대부분의 선택자들을 지원한다. 이것은 브라우저에서 자바스크립트를 지원하기만 한

다면, 다양한 브라우저에서 새로운 선택자들이 항상 지원될 수 있다는 것을 보장하므로, 개발자들로 하여금 안심하고 웹

사이트를 향상시킬 수 있도록 해준다.
 * 책임감 있는 jQuery 개발자라면, 언제나 '단계적 기능향상'과 '단계적 기능축소' 개념을 적용하여 페이지가 정확하게 렌

더링되는 것을 보장하여야 한다.

 

표현식의 사용
^= : 
 ex) $('a[href^=some-text]') => a태그의 href속성이 some-text로 시작하는
*= : 
 ex) $('a[href*=some-text]') => a태그의 href속성에 some-text가 들어간
$= :
 ex) $('a[href$=some-text]')] => a태그의 href속성이 some-text로 끝나는

 

사용자정의 선택자
 - 사용자정의 선택자들의 대부분은 배열에서 임의의 요소를 추출하는 데 사용하게 된다.

:eq() => 자식의 번호를 담아 선택할 수 있다.
 ex) $('div.some-class:eq(1)') => some-class속성이 있는 div 태그 중에 1번째 자식

  + 보통 자바스크립트 배열의 번호는 0으로 시작하기 때문에 eq(1) 이 first-child가 아니라 eq(0)이 first-child가 되는 것이다.

  + css배열을 그대로 받이 1번부터 배열번호가 시작하는 선택자는 :nth-child인데 :nth-child(1) = first-child를 뜻한다.

  + eq(0)과 같은 의미로 $('div.some-class:first-child')를 사용할 수 있다.

 

 - jQuery 사용자정의 선택자 중 유용하게 사용할 수 있는 선택자로 :odd와 :even이 있다.

 :odd와 :even 선택자들은 0으로 시작하는 자바스크립트 번호를 사용한다. 따라서 첫번째 행은 짝수(0)로 두번째 행은 홀수(1)로 표현된다.

 ex) $('tr:odd') => tr의 짝수 행

     $('tr:even') => tr의 홀수 행

  + :odd와 :even 선택자는 위에서 언급한 :nth-child()의 인자로 사용 가능하다. 하지만 :nth-child()의 배열은 1번부터

     시작한다는 점을 염두하고 사용해야 한다. 따라서 :nth-child를 사용하여 짝수 행을 선택하려면 다음과 같이 해야한다.

  ex) $('tr:nth-child(even)') => tr의 짝수 행

 :contains() 선택자는 해당 텍스트를 포함하는 요소를 선택하는 선택자이다.

  ex) $('td:contains(some-text)') => some-text를 text요소로 포함하는 td

  + :contains() 선택자의 중요한 점은 인자로 받는 text의 대소문자를 구분한다는 것이다.

 

폼 선택자

 :text, :checkbox, :radio, :image, :submit, :reset, :password, :file

  위의 선택자를 본 순간 용도를 알아차릴 수 있을 것이다.

  각각은 HTML의 input 객체의 type이며 jQuery는 친절하게도 input의 타입을 손쉽게 선택할 수 있게 하였다.

  위의 선택자와 같은 형태로 아래와 같은 선택자를 사용할 수도 있을것이다.

   ex) $('input[type=text]') => type이 text인 input요소 // 이는 $(':text')와 같다.

   (하지만 위의 선택자를 사용하지 않고 이 선택자를 사용하는 것은 별로 좋은 선택이 아니라고 생각한다)

 :input => input, textarea, select, button 요소

 :enabled => 활성화된 폼 요소

 :disabled => 비활설화된 폼 요소

 :checked => 체크된 라디오 버튼(radio) 혹은 체크박스(checkbox)

 :selected => 선택된 option 요소

  + 폼 선택자 역시 조합이 가능하다.

  ex) $('radio:checked') => 체크된 라디오 버튼

  ex) $(':text:disabled') => 비활성화된 type이 text인 input요소

  + 조합을 통한 선택자로 유연한 선택이 가능하다.

자세한 사항은 http://api.jquery.com 참조