jQuery - selector 요약 정리

셀렉터는 jQuery의 가장 강력한 기능이다. 간단하게 설명을 하자면, HTML 문서 안에는 다양한 엘리먼트들이
포함되어 있는데, 이를 컨트롤 하기란 결코 간단한 일이 아니다. 일반적으로 자바스크립트에서 엘리먼트를
얻기 위해 많이 쓰이는 방법은 document.getElementById("엘리먼트 ID 속성 값") 함수를 사용하면 되지만,
일단 소스 코드가 길어지고 얻을 수 있는 엘리먼트들도 매우 한정적이다.

하지만 jQuery에서는 $("셀렉터 문법") 함수를 사용하여 매우 간단하고 다양한 스타일의 엘리먼트들을
쉽게 얻을 수 있다. 셀렉터로 얻은 엘리먼트들을 확장 집합이라 하는데, 특수한 배열 형태의 객체로
반환이 된다. 이렇게 반환된 객체들은 jQuery가 지원하는 매우 다양한 함수들을 사용할 수 있다.

아래 표에 나와 있는 자식/에트리뷰트/컨테이너 셀렉터는 가장 많이 사용되는 셀렉터 문법이다.

[자식/에트리뷰트(속성)/컨테이너 셀렉터]

셀렉터 문법	문법 설명
*	모든 엘리먼트
E	태그 명이 E인 모든 엘리먼트
E F	E의 자손이면서 태그명이 F인 모든 엘리먼트
E>F	E의 바로 아래 자식이면서 태그 명이 F인 모든 엘리먼트
E+F	E의 형제 엘리먼트로 바로 다음에 오는 엘리먼트 F
E~F	E의 형제 엘리먼트로 다음에 나오는 모든 엘리먼트 F
E:has(F)	태그 명이 F인 자손을 하나 이상 가지는 태그 명이 E인 모든 엘리먼트
E.C	클래스 명 C를 가지는 태그 명이 E인 모든 엘리먼트. E의 생략은 *.C와 동일함
E#I	아이디가 I인 태그 명이 E인 엘리먼트. E의 생략은 *#I와 동일
E[A=V]	값이 V인 에트리뷰트 A를 가지는 태그 명이 E인 엘리먼트
E[A=V]	값이 V로 시작하는 에트리뷰트 A를 가지는 태그 명이 E인 엘리먼트
E[A$=V]	값이 V로 끝나는 에트리뷰트 A를 가지는 태그 명이 E인 엘리먼트
E[A*=V]	값이 V를 포함하는 에트리뷰트 A를 가지는 태그 명이 E인 엘리먼트
E[A]	에트리뷰트 A를 가지는 태그 명이 E인 모든 엘리먼트

아래 표는 jQuery가 지원하는 고급 위치 기반 셀렉터이며, DOM에서 위치를 기반으로 엘리먼트를 선택하며
첫 번째 링크나 홀수 번째, 짝수 번째와 같이 엘리먼트의 위치나 다른 엘리먼트와 관계를 기반으로
엘리먼트를 선택해야 하는 경우에 사용하면 된다.

[위치 셀렉터]

셀렉터 문법	문법 설명
E:first	모든 엘리먼트 E 중에서 첫 번째인 엘리먼트
E:last	모든 엘리먼트 E 중에서 마지막인 엘리먼트
E:first-child	엘리먼트 E의 자식 엘리먼트 중에서 첫 번째인 엘리먼트
E:last-child	엘리먼트 E의 자식 엘리먼트 중에서 마지막인 엘리먼트
E:only-child	엘리먼트 E의 자식 엘리먼트 중에서 형제가 없는 엘리먼트
E:nth-child(n)	엘리먼트 E의 n번째 자식 엘리먼트
E:nth-child(even or odd)	엘리먼트 E의 홀수 or 짝수 자식 엘리먼트
E:even or E:odd	페이지 전체의 짝수 or 홀수 엘리먼트
E:eq(n)	태그 값이 E인 모든 엘리먼트 중에서 n번째로 일치하는 엘리먼트
E:gt(n)	태그 값이 E인 모든 엘리먼트 중에서 n번째 엘리먼트(포함 X) 이후의 엘리먼트
E:lt(n)	태그 값이 E인 모든 엘리먼트 중에서 n번째 엘리먼트 이전의 엘리먼트

CSS 명세만으로는 표현할 수 없는 특성이 있는 엘리먼트를 선택해야 하는 경우
아래 표에 나와 있는 셀렉터를 사용하면 된다.

[jquery 정의 셀렉터]

셀렉터 문법	문법 설명
:animated	현재 애니매이션이 적용되고 있는 엘리먼트 선택
:button	모든 버튼 선택
:checkbox	체크 박스 엘리먼트만 선택 (input[type=checkbox])
:checked	선택된 체크 박스나 라디오 버튼만을 선택
:contains(foo)	텍스트 foo를 포함하는 엘리먼트만 선택
:disabled	인터페이스에서 비활성화 상태인 모든 폼 엘리먼트를 선택
:enabled	인터페이스에서 활성화 상태인 모든 폼 엘리먼트를 선택
:file	모든 파일 엘리먼트를 선택 (input[type=file])
:header	헤더 엘리먼트 선택 (<h1>~<h6>)
:hidden	감춰진 엘리먼트만 선택
:image	폼 이미지만 선택 (input[type=image])
:input	폼 엘리먼트만 선택 (input, select, textarea, button)
:not(filter)	필터의 값을 반대로 변경함.
:parent	빈 엘리먼트를 제외하고, 텍스트도 포함해서 자식 엘리먼트를 가지는 엘리먼트
:password	패스워드 엘리먼트 선택 (input[type=password])
:radio	라디오 엘리먼트 선택 (input[type=radio])
:reset	리셋 버튼을 선택 (input[type=reset] or button[type=reset])
:selected	선택된 엘리먼트만 선택
:submit	전송 버튼을 선택 (input[type=submit] or button[type=submit])
:text	텍스트 엘리먼트만 선택 (input[type=text])
:visible	보이는 엘리먼트만 선택

출처 : http://ggoreb.tistory.com/172