jQuery 선택자 개념 정리 한눈에정리(그림포함)

jQuery 선택자 개념 정리

jQuery 선택자는 HTML 문서 안에서 원하는 요소를 찾기 위해 사용하는 문법이다. 쉽게 말해, “어떤 태그를 선택해서 조작할 것인가?”를 정하는 기준이다.

JavaScript에서도 document.querySelector()나 getElementById()를 사용해 요소를 찾을 수 있지만, jQuery는 $() 문법을 사용해 더 짧고 직관적으로 요소를 선택할 수 있다.

$(선택자).동작();

예를 들어 아래 코드는 class가 title인 요소의 글자 색을 빨간색으로 바꾼다.

$(".title").css("color", "red");

---

1. 기본 선택자

선택자	의미	예시
*	모든 요소 선택	$("*")
태그명	특정 태그 선택	$("p")
#id	특정 id 선택	$("#userName")
.class	특정 class 선택	$(".active")

예시

<h1 id="mainTitle">제목입니다</h1>
<p class="desc">설명 문장입니다</p>

<script>
  $("#mainTitle").css("color", "blue");
  $(".desc").css("font-weight", "bold");
</script>

#mainTitle은 id가 mainTitle인 요소를 선택하고, .desc는 class가 desc인 요소를 선택한다.

---

2. 그룹 선택자

여러 요소를 한 번에 선택하고 싶을 때는 쉼표를 사용한다.

$("h1, p, .box").css("color", "green");

위 코드는 h1, p, class가 box인 요소를 한 번에 선택한다.

---

3. 자식 / 하위 요소 선택자

선택자	의미
$("div p")	div 안에 있는 모든 p 선택
$("div > p")	div의 바로 아래 자식 p만 선택
$("h2 + p")	h2 바로 다음에 오는 p 선택
$("h2 ~ p")	h2 뒤에 나오는 형제 p 선택

하위 선택자와 자식 선택자의 차이

<div class="wrap">
  <p>바로 아래 p</p>

  <section>
    <p>section 안쪽 p</p>
  </section>
</div>

$(".wrap p")      // wrap 안의 모든 p 선택
$(".wrap > p")   // wrap 바로 아래 p만 선택

공백은 깊이에 상관없이 내부 요소를 찾고, >는 바로 아래 자식 요소만 찾는다.

---

4. 속성 선택자

속성 선택자는 태그의 속성값을 기준으로 요소를 선택할 때 사용한다. 주로 input, checkbox, 링크, 이미지 등을 다룰 때 자주 사용한다.

선택자	의미
$("[name]")	name 속성이 있는 요소 선택
$("[type='text']")	type이 text인 요소 선택
$("a[target='_blank']")	새 창으로 열리는 a 태그 선택
$("img[alt]")	alt 속성이 있는 img 선택

예시

$("input[type='text']").val("기본값 입력");
$("input[name='userId']").focus();

---

5. 필터 선택자

필터 선택자는 선택된 요소 중에서 특정 조건에 맞는 요소만 다시 골라낼 때 사용한다.

선택자	의미
$("li:first")	첫 번째 li 선택
$("li:last")	마지막 li 선택
$("li:eq(2)")	인덱스 2번 li 선택
$("li:even")	짝수 인덱스 li 선택
$("li:odd")	홀수 인덱스 li 선택

여기서 주의할 점은 인덱스가 1부터 시작하는 것이 아니라 0부터 시작한다는 점이다.

<ul>
  <li>첫 번째</li>
  <li>두 번째</li>
  <li>세 번째</li>
</ul>

<script>
  $("li:eq(0)").css("color", "red");   // 첫 번째 li
  $("li:eq(1)").css("color", "blue");  // 두 번째 li
</script>

---

6. 입력 폼 관련 선택자

jQuery는 form 요소를 다룰 때 편리한 선택자도 제공한다.

선택자	의미
$(":text")	text input 선택
$(":password")	password input 선택
$(":checkbox")	checkbox 선택
$(":radio")	radio 선택
$(":checked")	체크된 요소 선택
$(":selected")	select에서 선택된 option 선택

체크박스 예시

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

위 코드는 체크된 input들을 하나씩 반복하면서 value 값을 출력한다.

---

7. 선택자와 이벤트 연결

선택자는 단순히 요소를 찾는 데서 끝나지 않는다. 선택한 요소에 클릭, 입력, 변경 같은 이벤트를 연결할 수 있다.

$(".btn-save").on("click", function() {
  alert("저장 버튼을 클릭했습니다.");
});

이 코드는 class가 btn-save인 버튼을 클릭했을 때 알림창을 띄운다.

동적으로 추가되는 요소에는 이벤트 위임 사용

$(document).on("click", ".btn-delete", function() {
  alert("삭제 버튼 클릭");
});

Ajax나 JavaScript로 나중에 추가되는 버튼은 일반적인 클릭 이벤트가 바로 적용되지 않을 수 있다. 이럴 때는 document나 부모 요소에 이벤트를 걸고, 실제 클릭 대상 선택자를 두 번째 인자로 전달하는 방식이 안전하다.

---

8. 자주 쓰는 선택자 예시 모음

// id 선택
$("#loginForm")

// class 선택
$(".menu-item")

// 태그 선택
$("button")

// 특정 영역 안의 버튼 선택
$(".modal button")

// 바로 아래 자식만 선택
$(".list > li")

// 특정 name을 가진 input 선택
$("input[name='email']")

// 체크된 체크박스 선택
$("input[type='checkbox']:checked")

// 비어 있는 input 선택
$("input").filter(function() {
  return $(this).val().trim() === "";
});

---

9. 주의할 점

1) id 선택자는 한 페이지에서 하나만 사용한다

id는 고유한 값이어야 한다. 같은 id를 여러 개 사용하면 선택 결과가 예상과 다르게 나올 수 있다.

2) 너무 긴 선택자는 유지보수가 어렵다

// 좋지 않은 예
$("body .wrap .content .list ul li span.title")

구조가 조금만 바뀌어도 코드가 깨질 수 있다. 가능하면 의미 있는 class를 부여해서 간단하게 선택하는 것이 좋다.

// 더 나은 예
$(".review-title")

3) 동적 요소는 이벤트 위임을 고려한다

화면이 처음 로딩된 뒤 JavaScript로 새롭게 추가되는 요소는 기존 이벤트가 적용되지 않을 수 있다. 이 경우 $(document).on() 또는 부모 요소 기준의 이벤트 위임을 사용한다.

4) 선택 후 바로 조작할 수 있다

jQuery의 장점은 선택한 요소에 바로 메서드를 연결할 수 있다는 점이다.

$(".notice")
  .addClass("active")
  .text("공지사항이 변경되었습니다.")
  .show();

---

10. 핵심 정리

• jQuery 선택자는 HTML 요소를 찾기 위한 문법이다.
• $("선택자") 형태로 사용한다.
• id는 #, class는 ., 태그는 태그명으로 선택한다.
• 속성 선택자를 사용하면 input, checkbox, link 등을 세밀하게 선택할 수 있다.
• 선택한 요소에는 css 변경, 값 변경, 이벤트 연결 등을 바로 적용할 수 있다.
• 동적으로 추가되는 요소에는 이벤트 위임 방식을 사용하는 것이 좋다.

정리하면,
jQuery 선택자는 화면의 요소를 찾고 조작하기 위한 출발점이다. 선택자를 정확히 이해하면 버튼 클릭 처리, 입력값 검증, 화면 숨김/표시, Ajax 결과 반영 같은 작업을 훨씬 쉽게 구현할 수 있다.