[제이쿼리(jQuery)] lesson 3

이번에는 셀렉터에 대해 알아보도록 하자.

셀렉터는 해당 요소를 선택하기 위한 선택자이다. 정규식처럼 약속된 구문에 의해 해당하는 요소를 선택하여 반환해 준다.

제이쿼리의 셀렉터는 멀티브라우저 오픈 소스 셀렉터 엔진인 시즐(Sizzle)을 사용하고 있다.

기본적으로 css 의 셀렉터를 생각하면 된다.

기본 흐름은 다음과 같다.

셀렉터의 검색엔진을 통해 해당 요소를 검색하고 jquery 구문의 action 이 실행된다. 검색된 요소가 없다면 aciton 이 실행되지 않는다. 

가장 많이 사용하는 기본 셀렉터는 다음과 같다.

• 태그이름
• # + id 이름
• . + 클래스이름

셀렉터 예시

예시	설명
$("*")	모든 요소
$(this)	객체 자신에 대한 요소
$("span")	해당 span 태그에 대한 요소
$("#deviceID")	해당 id 를 포함한 요소
$("p,span")	p 태그와 span 태그  요소
$("p.title")	해당하는 p 태그 중 해당 클래스를 포함한 요소
$("ul li:first")	첫번째 ul 태그의 첫번째 li 에 대한 요소
$("ul li:first-child")	모든 ui 태그의 첫번째 li 에 대한 요소
$("[name]")	속성 name 을 가진 모든 요소
$("tr:even")	tr 태그중 짝수번째 요소
$("tr:odd")	tr 태그중 홀수번째 요소
$("tr:eq(5)")	tr 태그중 5번째 요소
$(":disabled")	속성 tag 중 disabled 된 모든 요소

아래의 창에서 간단히 확인이 가능하다.

좌측의 셀렉터를 클릭하면 해당하는 태그들이 선택이 된다.

테스트(해당문구클릭)	확인창
$("*") $("p") $("p,span") $(".title") $("tr:even") $("tr:odd") $("tr:eq(2)") $("p:last") $(":text")	<span>span태그</span> <p>p태그</p> <p class="title">p태그</p> <table> <tr><td>0</td></tr> <tr><td>1</td></tr> <tr><td>2</td></tr> <tr><td>3</td></tr> </table>    <p> p태그 마지막 </p>