본문 바로가기

IT TIP/jQuery

selector 간략 정리


<CSS 자주 이용하는 셀렉터>

$("태그명")  : 태그 셀렉터 - 특정 태그

$("#ID 명") : ID 셀렉터 - 특정 ID를 속성으로 갖는 것

$(".클래스명") : 클래스 셀렉터 - 특정 클래스를 속성으로 갖는 태그

$("태그1 태그2") : 자손셀렉터 - 특정 태그의 안쪽에 있는 태그

$("*") : 유니버셜 셀렉터 - 전체 태그

$("셀렉터1, 셀렉터2") : 그룹 셀렉터 - 복수의 셀렉터

 

<CSS2 자주 이용하는 셀렉터> 

$("부모태그명 > 자식태그명") : 자식 셀렉터 - 특정 태그의 바로 밑에 자식 태그

$("태그1+태그2") : 인접 셀렉터 - 특정 태그의 다음 태그

$("태그:first-child") : first-child 유사 클래스 - 동일 태그 안의 첫 태그

 

<CSS3 자주 이용하는 셀렉터> 

$("태그1~태그2") : 간접 셀렉터 - 특정 태그의 뒤에 나타나는 태그

$("태그1:not(태그2)") : 부정유사 클래스 - 특정 태그 안에서 태그2를 제외한 태그

$("태그:empty") : empty 클래스 - 자식태그 혹은 문자열을 포함하지 않은 태그

$("태그:nth-child(번호)")  : nth-child 유사 클래스 - 특정태그 안에서 지정한 번호의 태그

$("태그:last-child") : last-child 유사 클래스 - 동일 태그 안의 가장 마지막 태그

$("태그:only-child") : only-child 유사 클래스 - 특정 태그가 하나만 포함된 태그

 

<CSS의 속성 셀렉터>  

$("[속성명]") : 특정 속성을 가진 태그

$("[속성명='값']") : 특정 속성이 지정한 값을 가진 태그

$("[태그명[속성명!='값']") : 특정 속성이 지정한 값을 갖지 않은 태그

$("[속성명^='값']") : 특정 속성이 지정한 값으로 시작되는 태그

$("[속성명$='값']") : 특정 속성이 지정한 값으로 끝나는 태그

$("[속성명*="값']") : 특정 속성이 지정한 값을 포함하고 있는 태그

$("[태그셀렉터1][태그셀렉터2]") : 복수 속성 셀렉터에 해당하는 태그

 

<JQuery 독자 필터>

$("태그:first") : 지정한 태그의 첫 태그

$("태그:last") : 지정한 태그의 마지막 태그

$("태그:even") : 지정한 짝수 번째 태그

$("태그:odd") : 지정한 홀수 번째 태그

$("태그:eq(번호)") : 지정한 번호의 태그(번호는 0부터 시작)

$("태그:qt(번호)") : 지정한 번호보다 뒤의 태그(번호는 0 부터 시작)

$("태그:lt(번호)") : 지정한 번호보다 앞의 태그(번호는 0부터 시작)

$("태그:header") : h1~h6까지의 heading 태그

$("태그:contain(문자열)") : 특정 문자열을 포함하고 있는 태그

$("태그:has(태그2)") : 특정 태그가 포함하고 있는 태그

$("태그:parent") : 자식태그 혹은 문자열을 포함하고 있는 태그


'IT TIP > jQuery' 카테고리의 다른 글

ul.li.selectable 소스  (0) 2017.04.11
기초문법..  (0) 2017.04.05