jQuery는 강력한 셀렉터 기능을 제공하며, 그중에서도 필터는 특정 조건에 맞는 요소를 쉽게 찾을 수 있게 도와줍니다. 필터를 사용하면 HTML 요소를 세밀하게 선택하고, 이를 기반으로 다양한 작업을 수행할 수 있습니다. 이 글에서는 jQuery에서 제공하는 다양한 필터와 그 활용 방법을 알아보겠습니다.
jQuery 필터란?
jQuery 필터는 선택한 요소 집합에서 조건에 맞는 요소만을 추출하거나, 제외하는 데 사용됩니다. 필터는 선택자를 기반으로 동작하며, 특정 기준에 따라 요소를 선택할 수 있게 해줍니다. jQuery는 다양한 내장 필터를 제공해 복잡한 작업을 쉽게 처리할 수 있도록 합니다.
기본 필터
필터
:first 필터는 선택한 요소 중 첫 번째 요소를 선택합니다.
javascript코드 복사$("p:first").css("color", "red");
위 코드에서는 모든 <p> 요소 중 첫 번째 요소의 텍스트 색상을 빨간색으로 변경합니다.
필터
:last 필터는 선택한 요소 중 마지막 요소를 선택합니다.
javascript코드 복사$("p:last").css("color", "blue");
이 코드는 모든 <p> 요소 중 마지막 요소의 텍스트 색상을 파란색으로 변경합니다.
필터
:even 필터는 선택한 요소 중 인덱스가 짝수인 요소를 선택합니다. 인덱스는 0부터 시작합니다.
javascript코드 복사$("li:even").css("background-color", "#f2f2f2");
이 예제에서는 리스트 항목 중 짝수 인덱스에 해당하는 요소의 배경색을 회색으로 변경합니다.
필터
:odd 필터는 인덱스가 홀수인 요소를 선택합니다.
javascript코드 복사$("li:odd").css("background-color", "#ccc");
위 코드에서는 리스트 항목 중 홀수 인덱스에 해당하는 요소의 배경색을 어두운 회색으로 변경합니다.
(index) 필터
:eq() 필터는 선택한 요소 중 지정된 인덱스의 요소를 선택합니다.
javascript코드 복사$("li:eq(2)").css("font-weight", "bold");
이 코드는 리스트의 세 번째 요소(인덱스 2)의 텍스트를 굵게 만듭니다.
폼 필터
jQuery는 폼 요소를 다룰 때 유용한 다양한 필터를 제공합니다.
필터
:input 필터는 모든 폼 요소를 선택합니다. <input>, <textarea>, <select>, <button> 태그가 해당됩니다.
javascript코드 복사$(":input").css("border", "1px solid red");
위 코드는 모든 폼 요소에 빨간색 테두리를 추가합니다.
필터
:text 필터는 텍스트 입력 필드만 선택합니다.
javascript코드 복사$(":text").val("Hello World");
이 예제에서는 모든 텍스트 입력 필드의 값을 “Hello World”로 설정합니다.
필터
:checked 필터는 체크된 상태의 체크박스나 라디오 버튼을 선택합니다.
javascript코드 복사$("input:checked").parent().css("font-weight", "bold");
이 코드는 체크된 체크박스 또는 라디오 버튼의 부모 요소 텍스트를 굵게 만듭니다.
필터
:selected 필터는 선택된 상태의 <option> 요소를 선택합니다.
javascript코드 복사$("select option:selected").css("background-color", "yellow");
위 코드는 선택된 옵션의 배경색을 노란색으로 변경합니다. 콘텐츠 필터
콘텐츠 필터는 요소의 콘텐츠에 따라 선택을 할 수 있게 해줍니다.
(text) 필터
:contains() 필터는 특정 텍스트를 포함하는 요소를 선택합니다.
javascript코드 복사$("p:contains('jQuery')").css("color", "green");
이 코드는 “jQuery”라는 텍스트를 포함한 모든 <p> 요소의 텍스트 색상을 초록색으로 변경합니다.
필터
:empty 필터는 자식 요소가 없는 요소를 선택합니다.
javascript코드 복사$("div:empty").css("border", "1px solid black");
이 코드는 비어 있는 모든 <div> 요소에 검은색 테두리를 추가합니다.
(selector) 필터
:has() 필터는 지정된 자식 요소를 포함하는 요소를 선택합니다.
javascript코드 복사$("div:has(p)").css("background-color", "#ffcccb");
위 코드에서는 자식 요소로 <p> 태그를 포함하는 모든 <div> 요소의 배경색을 연한 빨간색으로 변경합니다.
필터
:parent 필터는 하나 이상의 자식 요소를 포함하는 요소를 선택합니다.
javascript코드 복사$("div:parent").css("padding", "10px");
이 코드는 자식 요소를 가진 모든 <div> 요소에 10px의 패딩을 추가합니다.
가시성 필터
가시성 필터는 요소의 가시성에 따라 선택을 할 수 있게 해줍니다.
필터
:visible 필터는 화면에 보이는 요소를 선택합니다.
javascript코드 복사$("div:visible").css("border", "2px solid green");
이 코드는 화면에 보이는 모든 <div> 요소에 초록색 테두리를 추가합니다.
필터
:hidden 필터는 화면에 보이지 않는 요소를 선택합니다.
javascript코드 복사$("div:hidden").show(1000);
위 코드는 숨겨진 모든 <div> 요소를 1초에 걸쳐 보여줍니다.
결론
jQuery 필터는 웹 개발자가 HTML 요소를 세밀하게 선택하고 조작하는 데 있어 매우 유용한 도구입니다. 기본 필터부터 폼 필터, 콘텐츠 필터, 가시성 필터에 이르기까지 다양한 필터를 활용하여 더욱 직관적이고 효율적인 코드를 작성할 수 있습니다. 이 가이드를 통해 jQuery 필터의 다양한 기능을 이해하고, 실제 프로젝트에서 효과적으로 적용해 보세요.