jQuery 선택자 (selector) 총 정리 (2) first, last, even, odd, eq, contains, empty

1. :first 선택자

:first 선택자는 선택된 요소 집합 중에서 첫 번째 요소를 선택한다. 예를 들어, 아래 코드는 ul 요소 중에서 첫 번째 li 요소를 선택한다.

 

$('ul li:first').css('color', 'red');

 

2. :last 선택자

:last 선택자는 선택된 요소 집합 중에서 마지막 요소를 선택한다. 예를 들어, 아래 코드는 ul 요소 중에서 마지막 li 요소를 선택한다.

 

$('ul li:last').css('color', 'red');

 

3. :even 선택자

:even 선택자는 선택된 요소 집합 중에서 인덱스가 짝수인 요소를 선택한다. 예를 들어, 아래 코드는 ul 요소 중에서 인덱스가 짝수인 li 요소를 선택한다.

 

$('ul li:even').css('color', 'red');

 

4. :odd 선택자

:odd 선택자는 선택된 요소 집합 중에서 인덱스가 홀수인 요소를 선택한다. 예를 들어, 아래 코드는 ul 요소 중에서 인덱스가 홀수인 li 요소를 선택한다.

 

$('ul li:odd').css('color', 'red');

 

5. :eq() 선택자

:eq() 선택자는 선택된 요소 집합 중에서 인덱스가 주어진 인자와 일치하는 요소를 선택한다. 예를 들어, 아래 코드는 ul 요소 중에서 인덱스가 2인 li 요소를 선택한다.

 

$('ul li:eq(2)').css('color', 'red');

 

6. :empty 선택자

:empty 선택자는 선택된 요소 중에서 자식 요소가 없는 것을 선택한다. 예를 들어, 아래 코드는 ul 요소 중에서 자식 요소가 없는 li 태그를 선택한다.

 

$('ul li:empty').css('color', 'red');