jQuery – 선택자 – 3 – 필터 선택자

jQuery – 선택자 – 3 – 필터 선택자

필터 선택자란?

필터 선택자는 jQuery에서 요소를 선택할 때 추가적인 조건을 적용하여 특정 요소들을 세밀하게 필터링하는 역할을 합니다. 필터 선택자를 사용하면 선택된 요소들 중에서 특정한 조건에 맞는 요소들만 선택할 수 있습니다.

:first 필터 선택자

:first 필터 선택자는 선택된 요소들 중에서 첫 번째 요소를 선택합니다. 예를 들어, $('li:first')는 문서 내의 첫 번째 <li> 요소를 선택합니다. 이 필터 선택자를 비유하자면, 어떤 장소에 가장 처음 방문한 사람을 선택하는 것과 비슷합니다.

예시:

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

이 예시는 문서 내의 첫 번째 <li> 요소의 텍스트 색상을 빨간색으로 변경합니다.

:last 필터 선택자

:last 필터 선택자는 선택된 요소들 중에서 마지막 요소를 선택합니다. 예를 들어, $('li:last')는 문서 내의 마지막 <li> 요소를 선택합니다. 이 필터 선택자를 비유하자면, 어떤 행사에서 가장 마지막으로 도착한 사람을 선택하는 것과 비슷합니다.

예시:

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

이 예시는 문서 내의 마지막 <li> 요소의 텍스트 색상을 파란색으로 변경합니다.

:even과 :odd 필터 선택자

:even 필터 선택자는 선택된 요소들 중에서 짝수 번째 요소들을 선택하고, :odd 필터 선택자는 홀수 번째 요소들을 선택합니다. 예를 들어, $('li:even')는 문서 내의 짝수 번째 <li> 요소들을 선택합니다. 이 필터 선택자를 비유하자면, 여러 사람들 중에서 짝수 번호를 가진 사람들을 선택하는 것과 비슷합니다.

예시:

$('li:even').css('background-color', 'lightgray');

이 예시는 문서 내의 짝수 번째 <li> 요소들의 배경색을 연한 회색으로 변경합니다.

:eq 필터 선택자

:eq 필터 선택자는 선택된 요소들 중에서 인덱스 번호가 일치하는 요소를 선택합니다. 인덱스 번호는 0부터 시작하며, 선택하고자 하는 요소의 인덱스 번호를 지정합니다. 예를 들어, $('li:eq(2)')는 문서 내의 세 번째 <li> 요소를 선택합니다. 이 필터 선택자를 비유하자면, 몇 번째 순서의 사람을 선택하는 것과 비슷합니다.

예시:

$('li:eq(2)').css('font-weight', 'bold');

이 예시는 문서 내의 세 번째 <li> 요소의 글꼴 굵기를 굵게 변경합니다.

:not 필터 선택자

:not 필터 선택자는 선택된 요소들 중에서 주어진 선택자와 일치하지 않는 요소들을 선택합니다. 예를 들어, $('li:not(.special)')는 클래스가 “special”인 <li> 요소를 제외한 나머지 <li> 요소들을 선택합니다. 이 필터 선택자를 비유하자면, 어떤 그룹에서 특정한 조건을 갖지 않는 사람들을 선택하는 것과 비슷합니다.

예시:

$('li:not(.special)').css('text-decoration', 'underline');

이 예시는 클래스가 “special”인 <li> 요소를 제외한 다른 <li> 요소들의 텍스트에 밑줄을 추가합니다.

주의해야 할 점

1. 필터 선택자는 선택된 요소들 중에서 추가적인 조건을 적용하여 요소를 필터링합니다. 이를 잘 활용하면 원하는 요소들을 더욱 정밀하게 선택할 수 있습니다.
2. 필터 선택자는 다른 선택자와 함께 사용할 수도 있습니다. 예를 들어, $('ul li:first')는 문서 내의 첫 번째 <li> 요소를 선택하되, 이 요소가 <ul> 요소의 자식 요소여야 합니다.
3. 필터 선택자는 선택한 요소들의 순서를 기준으로 동작합니다. 따라서 문서 구조나 요소의 순서가 변경되면 필터 선택자의 결과도 달라질 수 있습니다.
4. 필터 선택자의 사용은 선택자의 다양성과 유연성을 높여줍니다. 그러나 필터 선택자를 남용하면 코드의 가독성이 저하될 수 있으므로 필요한 경우에만 사용하는 것이 좋습니다.

이렇게 jQuery의 필터 선택자를 활용하면 웹 페이지에서 특정한 조건을 가진 요소들을 손쉽게 선택할 수 있습니다. 이를 통해 원하는 요소에 스타일을 적용하거나 상호작용을 구현할 수 있습니다. 필터 선택자를 활용하여 다양한 상황에 맞는 요소들을 선택해보세요!