[ JQuery ] Selector 선택자

참고 : http://kkams.net/34
 
JQuery의 장점 중 하나가 html의 DOM요소에 쉽게 접근하는게 큰 장점이라고 생각한다.
DOM요소에 접근을 하기 위해서는 Selector 문법을 필수로 숙지하여야 한다.

JQeury Selector은 CSS Selector의 문법을 그대로 사용했기 때문에 CSS에 강한 사람은 그대로 사용가능하겠지만
모르는 사람은 필히 숙지하도록 하자.

1. 단일 요소 가져오기
$("태그명") : 태그명에 속하는 모든 요소를 가져온다.
ex)
alert($("div").length);   // div 의 갯수를 확인한다.

2. 다중 요소 가져오기 (콤마로 구분)
$("태그명,태그명") : 태그명에 속하는 모든 요소를 가져온다.
ex)
alert($"div,span,p,a").length);   // div,span,p,a 의 갯수를 확인한다.

3. id 가 지정된 요소 가져오기
$("#아이디") : 아이디가 지정된 요소를 가져온다.
ex)
< span id="lbName">홍길동</span>
alert($("#lbName").html());   // 홍길동 출력

4. class 가 지정된 요소 가져오기
$(".클래스명") : 클래스명이 지정된 요소를 가져온다.

5. 특정 태그에서 특정 class 가 선언된 요소 가져오기
$("태크명.클래스명)
ex)
$("div.content") : div 태그에 content 클래스가 지정된 요소

6. 자식요소 가져오기 (공백으로 구분)
$(부모 자식)
ex)
$(table tr) : table 태그의 tr 의 모든 요소

7. 속성 값으로 가져오기 ( [] 대괄호로 구분)
$(태그명[속성명])
ex)
$("a[href]) : a 태그 중 href 가 정의된 모든 요소
$("a[href=`kkams.net`]") : a 태그 중 href 가 kkams.net 으로 정의된 모든 요소

8. 입력 요소 가져오기
$(":input") : input, select, radio 등 모든 입력요소

9. 특정 요소의 내용에 특정값이 포함된 요소 가져오기
태그명:content("특정값") : 특정값은 대소문자를 구분한다.
ex)
$("div:content(`홍길동`)") : 홍길동이 포함된 모든 div 요소

10. list 계열의 짝수/홀수 요소 가져오기
:even, :odd
ex)
$("ul li:even") // ul 의 li 자식 중 짝수 요소
$("ul li:odd") // ul 의 li 자식 중 홀수 요소

11. 첫번째/마지막 요소 가져오기
:first, :last
ex)
$("div:first") // body 에 선언된 첫번째 div
$("div:last") // body 에 선언된 마지막 div
$("div:nth(n)") // body 에 선언된 n번째 div

12. 첫번째 자식/마지막 자식 요소 가져오기
:first-child, :last-child
ex)
$("li:first-child") // li 의 첫번째 자식
$("li:last-child") // li 의 마지막 자식
$("li:nth-child(n)") // li 의 n 번째 자식

13. 정규식으로 요소 가져오기
태그명[속성명] : 특정 속성명을 가지는 모든 요소
태그명[속성명=속성값] : 속성명이 특정 속성값과 일치하는 모든 요소
태그명[속성명^=속성값] : 속성명이 특정 속성값으로 시작하는 모든 요소
태그명[속성명$=속성값] : 속성명이 특정 속성값으로 끝나는 모든 요소
태그명[속성명*=속성값] : 속성명이 특정 속성값을 포함하고 있는 모든 요소


더 자세한 정보를 원한다면 아래 사이트를 참고하자.
http://www.w3.org/TR/css3-selectors/
http://api.jquery.com/category/selectors/ 
http://kogangdon.thoth.kr/?document_srl=1965052