jQuery는 JavaScript를 다루는 데 도움이 되는 라이브러리입니다. 이 라이브러리를 사용하면 HTML 요소를 쉽게 선택하고 조작할 수 있습니다. 이 글에서는 jQuery의 선택자와 필터에 대해 알아보겠습니다.

선택자 (Selector)

기본 선택자

jQuery는 CSS 선택자와 비슷한 방식으로 HTML 요소를 선택합니다. 아래는 jQuery의 기본 선택자들입니다.

• element : 해당 요소를 선택합니다. 예를 들어, $('h1')은 모든 <h1> 요소를 선택합니다.
• #id : 해당 아이디를 가진 요소를 선택합니다. 예를 들어, $('#myDiv')는 id가 “myDiv”인 요소를 선택합니다.
• .class : 해당 클래스를 가진 요소를 선택합니다. 예를 들어, $('.myClass')는 class가 “myClass”인 모든 요소를 선택합니다.

계층 선택자

jQuery는 계층 선택자를 사용하여 중첩된 요소를 선택하는데 도움을 줍니다. 아래는 일부 경로/계층 선택자의 예입니다.

• parent > child : 부모 요소의 직계 자식 요소를 선택합니다.
• ancestor descendant : 조상 요소에 속한 후손 요소를 선택합니다.
• prev + next : 이전 요소 다음의 요소를 선택합니다.
• prev ~ siblings : 이전 요소 이후의 모든 형제 요소를 선택합니다.

필터 (Filter)

기본 필터

jQuery는 선택한 요소를 필터링하기 위한 다양한 기본 필터를 제공합니다. 이 필터들은 선택한 요소를 제한 또는 수정하는 데 도움을 줍니다. 아래는 몇 가지 예입니다.

• :first : 선택한 요소 중 첫 번째 요소를 선택합니다.
• :last : 선택한 요소 중 마지막 요소를 선택합니다.
• :even : 선택한 요소 중 짝수 번째 요소를 선택합니다.
• :odd : 선택한 요소 중 홀수 번째 요소를 선택합니다.
• :eq(index) : 선택한 요소 중 index에 해당하는 요소를 선택합니다.

필터 메서드

jQuery는 필터 메서드를 사용하여 선택한 요소를 동적으로 필터링할 수도 있습니다. 예를 들어, filter() 메서드를 사용하여 특정 조건을 만족하는 요소를 필터링할 수 있습니다.

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

위의 예제는 <li> 요소 중에서 짝수 번째 요소를 선택하여 배경색을 회색으로 변경합니다.

결론

jQuery의 선택자와 필터를 사용하면 HTML 요소를 쉽게 선택하고 조작할 수 있습니다. 선택자를 사용하여 원하는 요소를 선택하고, 필터를 사용하여 선택한 요소를 필터링할 수 있습니다. 이를 통해 JavaScript 코드를 더욱 짧고 간결하게 작성할 수 있습니다.

더 많은 선택자와 필터의 사용법에 대해서는 jQuery 공식 문서를 참조하시기 바랍니다.