jQuery에서 셀렉터 사용법: 다양한 선택 방법과 예제

jQuery는 DOM(Document Object Model)을 조작하는 데 강력한 기능을 제공하며, 그 핵심은 다양한 셀렉터(selector)를 통해 원하는 요소를 쉽게 찾는 데 있습니다. 이 글에서는 jQuery에서 사용 가능한 다양한 셀렉터와 활용법을 상세히 다룹니다.

---

1. jQuery 셀렉터란?

jQuery 셀렉터는 HTML 문서 내에서 특정 요소를 찾고 선택하는 데 사용됩니다. jQuery는 CSS 셀렉터와 동일한 문법을 지원하며, 추가적으로 jQuery만의 독특한 셀렉터도 제공합니다.

$("selector")

위 형식에서 selector는 HTML 요소, 클래스, ID 등을 가리킵니다.

---

2. 기본 셀렉터

2.1 요소 셀렉터

• 특정 태그 이름으로 요소를 선택합니다.

예제

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

• 모든 <p> 요소의 글자 색을 파란색으로 변경합니다.

2.2 ID 셀렉터

• 특정 ID를 가진 요소를 선택합니다. #를 사용합니다.

예제

$("#myID").hide();

• ID가 myID인 요소를 숨깁니다.

2.3 클래스 셀렉터

• 특정 클래스를 가진 요소를 선택합니다. .을 사용합니다.

예제

$(".myClass").fadeOut();

• 클래스가 myClass인 요소를 페이드아웃합니다.

---

3. 계층 셀렉터

3.1 자식 셀렉터

• 특정 요소의 자식 요소를 선택합니다.

예제

$("ul > li").css("font-weight", "bold");

• 모든 <ul>의 직속 자식 <li> 요소를 굵게 만듭니다.

3.2 후손 셀렉터

• 특정 요소의 모든 하위 요소를 선택합니다.

예제

$("div p").css("color", "green");

• 모든 <div> 내부의 <p> 요소의 글자 색을 초록색으로 변경합니다.

3.3 형제 셀렉터

• 같은 부모를 가진 형제 요소를 선택합니다.

예제

$("h1 + p").css("font-size", "18px");

• <h1> 바로 뒤에 오는 <p> 요소의 글자 크기를 변경합니다.

---

4. 속성 셀렉터

jQuery는 특정 속성을 기준으로 요소를 선택할 수 있는 기능을 제공합니다.

4.1 특정 속성 선택

$("input[name='username']").val("John Doe");

• name 속성이 username인 <input> 요소의 값을 변경합니다.

4.2 특정 속성값 포함

$("a[href*='google']").addClass("highlight");

• href 속성에 google이 포함된 모든 <a> 태그에 highlight 클래스를 추가합니다.

4.3 특정 속성값으로 시작

$("img[src^='http']").css("border", "2px solid red");

• src 속성이 http로 시작하는 모든 <img> 태그에 빨간 테두리를 추가합니다.

4.4 특정 속성값으로 끝남

$("a[href$='.pdf']").attr("target", "_blank");

• href 속성이 .pdf로 끝나는 모든 <a> 태그에 target="_blank" 속성을 추가합니다.

---

5. 필터 셀렉터

jQuery는 특정 조건에 따라 요소를 선택할 수 있는 필터 셀렉터를 제공합니다.

5.1 첫 번째 요소 선택

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

• 첫 번째 <li> 요소의 글자 색을 빨간색으로 변경합니다.

5.2 마지막 요소 선택

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

• 마지막 <li> 요소의 글자 색을 파란색으로 변경합니다.

5.3 홀수/짝수 요소 선택

$("tr:odd").css("background-color", "#f2f2f2");
$("tr:even").css("background-color", "#ffffff");

• 홀수 행과 짝수 행에 다른 배경색을 적용합니다.

5.4 특정 인덱스 요소 선택

$("li:eq(2)").css("font-style", "italic");

• 세 번째 <li> 요소를 이탤릭체로 만듭니다.

---

6. 폼 관련 셀렉터

폼 요소를 선택할 때 유용한 셀렉터입니다.

6.1 특정 타입 선택

$("input:text").val("Default Text");

• 모든 텍스트 입력 필드에 기본 텍스트를 설정합니다.

6.2 선택된 요소

$("option:selected").text();

• 선택된 <option>의 텍스트를 가져옵니다.

6.3 체크박스 선택

$("input:checked").each(function() {
    console.log($(this).val());
});

• 체크된 체크박스의 값을 콘솔에 출력합니다.

---

7. 커스텀 셀렉터 활용

jQuery에서는 커스텀 필터 셀렉터를 사용하여 보다 복잡한 조건을 구현할 수 있습니다.

예제: 5글자 이상인 텍스트 선택

$("li").filter(function() {
    return $(this).text().length > 5;
}).css("color", "purple");

• 텍스트 길이가 5글자 이상인 <li> 요소를 보라색으로 표시합니다.

---

8. 결론

jQuery는 단순한 요소 선택에서부터 고급 필터링까지 다양한 셀렉터를 제공합니다. 이 글에서 다룬 기본, 계층, 속성, 필터 셀렉터를 활용하면 DOM 조작을 효율적으로 수행할 수 있습니다. 실무에서 jQuery 셀렉터를 적절히 활용하여 생산성을 높이세요!