1 분 소요

jQuery의 $() 함수는 CSS 선택자 문법을 그대로 사용해 원하는 요소를 직관적으로 선택합니다.

덕분에 Vanilla JS로 getElementById()·querySelectorAll() 등을 번갈아 쓰던 수고를 덜고, 한 줄 코드로 동작·스타일·이벤트를 손쉽게 다룰 수 있습니다.

기본 선택자 살펴보기

1. 태그 선택자

$("p"); // 모든 <p> 요소
  • 같은 태그를 가진 모든 요소에 스타일·이벤트 적용
  • 웹 접근성을 위해 의미론적(Semantic) 태그 활용 권장

2. 아이디(ID) 선택자

$("#header"); // id="header"
  • 문서 내 단 하나인 요소 지정에 적합
  • 실행 속도가 가장 빠르지만, 재사용에는 불리

3. 클래스(Class) 선택자

$(".content"); // class="content" 전부
  • 디자인·동작을 여러 요소에 일괄 적용
  • BEM(Block–Element–Modifier) 네이밍과 함께 쓰면 유지보수 ↑

4. 속성(Attribute) 선택자

문법 의미 예시 코드
$("[name]") 해당 속성이 존재 $("[required]")
$("[type='text']") 속성 값 정확 일치 $("[type='checkbox']")
$("[alt*='이미지']") 속성 값에 포함 $("[href*='utm_']")
$("[href^='https']") 속성 값으로 시작 $("[data-id^='user_']")
$("[src$='.png']") 속성 값으로 끝남 $("[src$='.svg']")

Tip: 속성 선택자는 비슷한 패턴의 요소를 한 번에 찾아 레이지 로딩·유효성 검사 등에 유용합니다.

비표준·필터 선택자까지 활용하기

선택자 기능 예시
:first, :last 첫 / 마지막 요소 선택
:even, :odd 짝수 / 홀수 인덱스 선택
:visible, :hidden 표시 / 숨김 상태 요소
:checked, :disabled 체크됨 / 비활성화된 폼 요소
$("ul > li:first") 부모 > 자식 구조로 정교한 제어 가능

필터 선택자와 체이닝을 조합하면

$("ul > li:odd").addClass("bg-gray-100").fadeIn();

처럼 한 줄에 선택 → 스타일 → 애니메이션을 끝낼 수 있습니다.

이미지 예시

<img src="banner.jpg" alt="CSS 선택자 예시 이미지" />

alt 속성에 CSS 선택자 키워드를 자연스럽게 포함해 SEO를 강화하세요.

질문 정리

  1. ID·클래스 중 어느 것이 더 빠른가요?
    • ID 선택자가 DOM 트리를 바로 찾으므로 미세하게 빠르지만, 실제 성능 차이는 미미하며 가독성과 유지보수가 더 중요합니다.
  2. 속성 선택자는 성능에 영향을 주지 않나요?
    • 문서 크기가 매우 클 때만 체감될 정도이며, 필요한 요소만 탐색하도록 상위 범위를 제한하면 부담을 줄일 수 있습니다.
  3. CSS3 가상 클래스 :nth-child()도 사용 가능한가요?
    • 네, jQuery가 CSS 표준을 대부분 지원하므로 $("tr:nth-child(odd)")처럼 자유롭게 활용 가능합니다.
  4. 여러 선택자를 결합할 수 있나요?
    • 가능합니다. 예: $("input[type='text'].error:first")는 첫 번째 에러 텍스트 필드를 선택합니다.
  5. Vanilla JS querySelectorAll()로 충분하지 않나요?
    • 최신 브라우저만 대상이면 가능하지만, 크로스 브라우징·체이닝·플러그인 생태계가 필요하다면 jQuery가 더 편리합니다.

카테고리:

업데이트:

댓글남기기

참고