jQuery Selector

컨트롤할 HTML태그를 셀렉터(Selector)로 지정할 수 있다.

$(function(){

$("셀렉터").jQuery 명령

});

 

 

1. CSS 셀렉터들

 

1.1 태그셀렉터

 

예] '목록태그<li>의 css 컬러 속성값을 블루로 바꿔라'

$(function(){

$("li").css("color","blue");

});

 

1.2 ID셀렉터, Class(클래스)셀렉터

 

예] '목록태그<li>중 id="first"인 요소를 찾아 css컬러 속성값을 블루로 바꿔라'

$(function(){

$("li#first").css("color","blue");

});

예] '목록태그<li>중 class="first"인 요소를 찾아 css컬러 속성값을 블루로 바꿔라'

$(function(){

$("li.first").css("color","blue");

});

 

1.3 자손셀렉터

포인트는 부모 자식요소 사이를 한칸뛰우기

 

예] 'class="first"인 요소의 자손, <em>을 찾아 css컬러 속성값을 블루로 바꿔라' 

$(function(){

$(".first em").css("color","blue");

});

 

1.4 유니버셜셀렉터

예] '목록태그<li>의 모든자손요소(*)들을 찾아 css컬러 속성값을 블루로 바꿔라' 

$(function(){

$("li *").css("color","blue");

});

 

1.5 그룹셀렉터

여러개의 셀렉터를 ,(콤마)로 지정

 

예] 'id="first"인 요소와 id="second"인 요소를 찾아 css컬러 속성값을 블루로 바꿔라' 

$(function(){

$("#first, #second").css("color","blue");

});

 

 

2. CSS2 셀렉터

 

2.1 자식셀렉터

 

예] '목록태그<li>의 자식요소중 <strong>태그를 찾아 css컬러 속성값을 블루로 바꿔라' 

$(function(){

$("li > strong").css("color","blue");

});

 

2.2 인접셀렉터

 

예] 'id="first"인 목록태그<li> 바로 다음에 오는 요소<li>를 찾아 css컬러 속성값을 블루로 바꿔라' 

$(function(){

$("#first + li").css("color","blue");

});

 

2.3 first-child클래스

 

예] '처음 나오는 <li>요소를 찾아 css컬러 속성값을 블루로 바꿔라' 

$(function(){

$("li:first-child").css("color","blue");

});

 

 

3. CSS3셀렉터

 

3.1 간접셀렉터

특정 셀렉터 뒤에 있는 태그를 선택할 수 있다. 셀렉터와 태그사이 ~(틸드)로 연결한다.

 

예] ' id="second"인 요소뒤의 나오는 <li>태그들의 css컬러 속성값을 블루로 바꿔라' 

$(function(){

$("#second ~ li").css("color","blue");

});

 

3.2 부정 수도클래스 (Negation pseudo-class)

셀렉터 안 태그 중 특정 조건을 제외한 태그를 지정할 수 있다.

셀렉터 뒤에 :not(...)을 붙이고 제외 조건을 명시한다.

 

예] '첫번째 <li>를 제외하고 <li>태그의 css컬러 속성값을 블루로 바꿔라' 

$(function(){

$("li:not(first-child)").css("color","blue");

});

 

3.3 empty 수도클래스 (empty pseudo-class)

자식 태그나 텍스트를 포함하지 않는 태그를 선택할 수 있다.

셀렉터 뒤에 :empty를 붙인다.

 

예] '내용이 없는 <li>태그의 css컬러 속성값을 블루로 바꿔라' 

$(function(){

$("li:empty").css("color","blue");

});

 

3.4 nth-child 수도클래스 (nth-child pseudo-class)

셀렉터의 태그 중 번호를 지정하여 태그를 지정할 수 있다.

짝수는 $("li:nth-child(even)"), 홀수는 $("li:nth-child(odd)"), 3의 배수면 $("li:nth-child(3n)")으로 지정할 수 있다.

 

예] '<li>태그중 두번째 <li>태그의 css컬러 속성값을 블루로 바꿔라' 

$(function(){

$("li:nth-child(2)").css("color","blue");

});

 

3.5 last-child 수도클래스 (last-child pseudo-class)

특정 셀렉터 안에 가장 마지막 태그를 선택할 수 있다.

 

예] '<li>태그중 가장 마지막 <li>태그의 css컬러 속성값을 블루로 바꿔라' 

$(function(){

$("li:last-child").css("color","blue");

});

 

3.6 only-child 수도클래스 (only-child pseudo-class)

셀렉터에 특정 태그가 한 개만 포함되어 있을 경우 선택할 수 있다.

 

예] '<li>태그 안에 <span>태그가 한 개만 포함하고 있는 경우, 그 <span>태그의  css컬러 속성값을 블루로 바꿔라' 

$(function(){

$("li span:only-child").css("color","blue");

});

 

 

4 CSS 속성 셀렉터

 

4.1 [attribite]

특정 속성을 가진 태그를 선택 할 수 있다.

 

예] ' id속성을 가진 태그들의 css컬러 속성값을 블루로 바꿔라' 

$(function(){

$("[id]").css("color","blue");

});

 

4.2 [attribite='value']

속성이 특정한 값을 가진 태그를 선택 할 수 있다.

 

예] ' title 속성값이 "img"인 태그의 css컬러 속성값을 블루로 바꿔라' 

$(function(){

$("[title=img]").css("color","blue");

});

 

4.3 [attribite!='value']

특정 속성이 특정한 값을 갖지 않는 태그를 선택 할 수 있다.

 

예] ' title 속성값이 "img"가 아닌 태그의 css컬러 속성값을 블루로 바꿔라' 

$(function(){

$("[title=img]").css("color","blue");

});

 

4.4 [attribite^='value']

특정 속성값이 특정 문자열로 시작되고 있는 태그를 선택 할 수 있다.

 

예] ' title 속성값이 "a"로 시작하는 태그의 css컬러 속성값을 블루로 바꿔라' 

$(function(){

$("[title^='a']").css("color","blue");

});

 

4.5 [attribite$='value']

특정 속성값이 특정 문자열로 끝나는 태그를 선택 할 수 있다.

 

예] ' title 속성값이 "z"로 끝나는 태그의 css컬러 속성값을 블루로 바꿔라' 

$(function(){

$("[title$='z']").css("color","blue");

});

 

4.6 [attribite*='value']

특정 문자열을 포함하고 있는 태그를 선택 할 수 있다.

 

예] ' title 속성의 값이 "ing"를 포함하고 있는 태그의 css컬러 속성값을 블루로 바꿔라' 

$(function(){

$("[title*='ing']").css("color","blue");

});

 

 

5. 제이쿼리(jQuery) 자체 필터

제이쿼리(jQuery)에서는 CSS 셀렉터 이외에도 자체적으로 제공하는 셀렉터인 "필터"를 이용할 수 있다.

 

5.1 first 필터/ last 필터

셀렉터 안에서 첫 태그를 "first 필터", 마지막 태그를 "last 필터"로 지정할 수 있다.

 

$("li:first").css("color","blue");

$("li:last").css("color","blue");

 

5.2 even 필터/ odd 필터

셀렉터 안에서 짝수 번째 태그를 "even필터", 홀수 번째 태그를 "odd필터"로 지정할 수 있다.

 

$("li:even").css("color","blue");

$("li:odd").css("color","blue");

 

5.3 eq 필터/ gt 필터 / lt 필터

셀렉터 안에서 특정 순서의 태그를 "eq 필터"(equal), 특정 태그보다 앞의 태그를 "lt 필터"(less than), 뒤의 태그를 "gt필터"(greater than)로 선택할 수 있다.

 

$("li:lt(1)").css("color","red");

$("li:eq(1)").css("color","green");

$("li:gt(1)").css("color","blue");

 

5.4 header 필터

h1~h6까지의 heading 태그를 함께 선택할 수 있다.

 

$(":header)").css("color","blue");

 

5.5 contains 필터 / has 필터

"contains필터"는 특정 문자열이 포함되어 있는 태그를 "has필터"는 특정 태그가 포함되어 있는 태그를 선택할 수 있다.

 

$("li:contains('동영상')").css("color","blue");

$("li:has(em)").css("color","green");

 

5.6 parent 필터

어떤 태그의 자식 태그 혹은 문자열을 포함하는 태그를 선택할 수 있는 empty 수도클래스와 반대되는 필터이다. 

$("li:parent").css("color","red");

[출처] [제이쿼리(jQuery)기본] 셀렉터(Selector) 정리|작성자 그레이쓰