[jQuery] 02. 선택자(Selector) 완전 정리

[jQuery] 02. 선택자(Selector) 완전 정리 (깊게)

jQuery는 결국 “원하는 HTML 요소를 찾고 → 조작하는 것”이 핵심입니다. 그 시작이 바로 선택자(Selector)입니다.

선택자는 CSS 선택자와 거의 같은 문법을 쓰지만, jQuery만의 확장 선택자도 존재합니다. 이번 글에서는 단순히 “#은 id, .은 class” 수준이 아니라 실전에서 실수하지 않는 기준으로 깊게 정리합니다.

1. 선택자 기본 문법 (가장 중요)

기본 형태는 아래 한 줄입니다.


$("선택자")

그리고 이 선택이 성공하면, 결과는 DOM 자체가 아니라 jQuery 객체로 반환됩니다. 즉, 하나를 선택하든 여러 개를 선택하든 결과는 “묶음”으로 생각하는 게 안전합니다.


$(".item")      // 여러 개 선택 가능
$("#box")       // 보통 1개지만, 결과는 jQuery 객체

선택한 요소 개수는 .length로 확인합니다.


$(".item").length

2. 기본 선택자 3종 세트

① ID 선택자 (#id)


$("#btn")

id는 한 페이지에서 1개만 쓰는 것이 정상입니다. (중복되면 예상 못한 버그가 나기 쉬움)

② Class 선택자 (.class)


$(".item")

class는 여러 요소에 동시에 적용되기 때문에 여러 개가 선택되는 경우가 많습니다.

③ 태그 선택자 (tag)


$("li")

해당 태그 전체가 선택됩니다. 범위가 넓어질 수 있으니 실전에서는 “영역을 좁히는” 습관이 중요합니다.

3. 여러 개를 한 번에 선택하기 (그룹 선택자)

쉼표(,)로 선택자를 합칠 수 있습니다.


$("h1, h2, h3")
$("#title, .item, button")

실전에서는 “여러 요소에 같은 스타일/이벤트를 적용할 때” 자주 사용합니다.

4. 영역을 좁히는 선택 (후손 / 자식 선택자)

① 후손 선택자 (공백)


$("#menu li")

#menu 안에 있는 모든 li를 선택합니다. (깊이가 몇 단계든 상관없음)

② 자식 선택자 (>)


$("#menu > li")

#menu 바로 아래에 있는 직계 자식 li만 선택합니다.

이 둘을 헷갈리면 “원치 않는 곳까지 스타일이 먹는 문제”가 자주 발생합니다.

5. 형제(옆 요소) 선택자

형제 선택자는 “기준 요소 바로 뒤” 또는 “뒤에 있는 형제들”을 선택할 때 씁니다.

① 바로 다음 형제 (+)


$(".title + p")

.title 바로 다음에 오는 p 한 개만 선택합니다.

② 뒤쪽 모든 형제 (~)


$(".title ~ p")

.title 뒤에 있는 p들을 모두 선택합니다.

6. 속성(Attribute) 선택자 (실전에서 많이 씀)

속성 선택자는 폼(input), 링크(a), 이미지(img) 등에서 자주 씁니다.

① 특정 속성 존재 여부


$("input[name]")

② 속성 값이 정확히 일치


$("input[type='text']")

③ 부분 일치 (자주 쓰는 3종)


$("a[href^='https']")   // https로 시작하는 링크
$("img[src$='.png']")   // .png로 끝나는 이미지
$("[class*='btn']")     // class에 btn이 포함된 요소

7. 위치/순서 필터 선택자 (0부터 시작 주의)

여러 개가 선택됐을 때 “몇 번째 요소만” 고르는 방식입니다. 여기서 가장 많이 실수하는 포인트는 인덱스가 0부터 시작한다는 점입니다.

① eq(n) : n번째(0부터)


$(".item:eq(0)")   // 첫 번째
$(".item:eq(1)")   // 두 번째

② first / last


$(".item:first")
$(".item:last")

참고로 같은 동작을 메서드로도 쓸 수 있습니다. 메서드 형태가 읽기 쉽고 체이닝에도 잘 어울립니다.


$(".item").first()
$(".item").last()
$(".item").eq(1)

③ even / odd (짝/홀)


$(".item:even")   // 0,2,4... (짝수 인덱스)
$(".item:odd")    // 1,3,5... (홀수 인덱스)

8. 자주 헷갈리는 포인트: eq() vs nth-child()

이 부분은 깊게 이해하면 실수가 확 줄어듭니다.

eq(1)은 “선택된 요소들 중 두 번째(인덱스 1)”
nth-child(2)는 “부모 기준으로 두 번째 자식”

즉, 기준이 다릅니다. 실전에서는 eq()를 더 자주 쓰고, CSS 스타일링에서는 nth-child를 자주 씁니다.

9. 선택자만으로 부족할 때: 탐색(Traversal) 메서드

선택자($("..."))로 한 번 잡았으면, 그 다음은 탐색 메서드로 “원하는 위치”를 더 정확히 찾는 방식이 실전에서 더 많이 쓰입니다.

① find() : 내부에서 다시 찾기


$("#box").find(".item")

② children() : 직계 자식만


$("#box").children(".item")

③ parent() / parents() / closest()


$(".item").parent()          // 바로 위 부모 1개
$(".item").parents("div")    // 위로 올라가며 div들
$(".item").closest(".wrap")  // 가장 가까운 .wrap 조상 1개

특히 closest()는 “내가 속한 카드/박스/행(row)을 찾을 때” 정말 많이 씁니다.

④ siblings() / next() / prev()


$(".item").siblings()
$(".item").next()
$(".item").prev()

10. 실전 예제 (Output 포함) : 선택자 + 탐색 메서드 한 번에

📌 예제 코드


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

  <style>
    .box { border:1px solid #ddd; padding:12px; margin:10px 0; border-radius:8px; }
    .active { font-weight:bold; text-decoration:underline; }
    .warn { border-color:#ff6b6b; }
  </style>
</head>

<body>

  <div id="menu" class="box">
    <h4 class="title">과일 목록</h4>

    <ul>
      <li class="item">사과</li>
      <li class="item">바나나</li>
      <li class="item">포도</li>
    </ul>

    <input type="text" name="keyword" placeholder="검색어" />
    <input type="checkbox" id="chk" checked /> 체크됨
  </div>

  <script>
    // (1) 두 번째 항목 선택: eq(1)
    $("#menu .item").eq(1).addClass("active");

    // (2) input[type='text'] 선택: 속성 선택자
    $("#menu input[type='text']").val("바나나").addClass("warn");

    // (3) 체크된 체크박스 선택: :checked
    $("#menu input:checked").parent().css("background", "#f9f9f9");
  </script>

</body>
</html>

📌 OUTPUT

과일 목록에서 두 번째 항목인 바나나에 굵게/밑줄(활성 표시)이 적용됩니다.
텍스트 입력칸(input)에 바나나라는 값이 자동으로 들어가고, 테두리가 강조됩니다.
체크박스는 처음부터 checked 상태라서, 해당 영역 배경이 연하게 표시됩니다.

11. 실전 팁 (실수 줄이는 핵심)

영역을 좁혀서 선택하세요. 예: $("#menu .item") 처럼 컨테이너를 먼저 잡으면 실수가 줄어듭니다.
같은 요소를 여러 번 쓰면 변수로 저장하세요. (코드가 깔끔해지고 반복이 줄어듭니다)
여러 개가 선택될 수 있다는 걸 항상 전제하세요. 필요하면 .eq(), .first() 같은 걸로 한 개로 좁히세요.


var $menuItems = $("#menu .item");
$menuItems.eq(0).addClass("active");

12. 핵심 정리

$("선택자")는 HTML 요소를 찾는 시작점입니다.
ID(#), Class(.), Tag 선택자가 기본입니다.
후손(공백)과 자식(>) 선택자는 결과가 크게 달라집니다.
속성 선택자는 input, a, img에서 매우 유용합니다.
여러 개 중 특정 하나만 고르려면 .eq(), .first(), .last()를 자주 씁니다.
선택 후에는 find/children/closest 같은 탐색 메서드로 정확도를 올립니다.

다음 편에서는 DOM 조작으로 넘어가서 text(), html(), val(), attr(), prop() 차이를 깊게 정리하겠습니다. 특히 attr vs prop은 면접에서도 자주 물어보는 포인트라 확실히 잡고 가면 좋습니다.

'Computer Science > JQuery' 카테고리의 다른 글

[jQuery] 05. Ajax(비동기 통신) 완전 정리 (GET / POST / JSON / $.ajax) (0)	2026.03.03
[jQuery] 04. 이벤트(Event) 완전 정리 (click / on / this / preventDefault / 이벤트 위임) (0)	2026.03.02
[jQuery] 03. DOM 조작 완전 정리 (text / html / val / attr / prop) (0)	2026.03.02
[jQuery] 01. jQuery가 뭐예요? (0)	2026.02.16