jQuery 기본 선택자 — *, tag, .class, #id 완전 정리

 

 

Web Development · jQuery

jQuery 기본 선택자 —
*, tag, .class, #id 완전 정리

CSS와 거의 같지만 코드 안에서 동적으로 쓰는 4가지 선택자

시작 오늘 분석할 코드

같은 HTML에 4번의 jQuery 선택자가 작동하면서 점점 더 좁은 범위로 스타일을 덮어쓴다. 어느 선택자가 어떤 요소를 잡는지가 핵심이다.

$(document).ready(function() { $('*').css('border-style', 'hidden'); // (1) 모두 $('p').css('border', 'dashed thick red'); // (2) p 태그 $('.class1').css('border', 'solid thick green'); // (3) class1 $('#p3').css({'background-color':'purple', 'color': 'white'}); // (4) id=p3 });

실제 출력 미리보기

div0

div1 span1 span2 span3 span4

div2

p1

p2 class1 class2

p3 class1

p4

div3 class2

p

 

색상 의미 — 빨강 점선 = p 태그, 초록 실선 = .class1, 보라 배경 = #p3

---

용어 핵심 키워드

$('*')전체 선택자 — 모든 요소

$('p')태그 선택자 — p 모두

$('.class1')클래스 선택자 — 점(.) + 이름

$('#p3')id 선택자 — 샵(#) + 이름

$(document).readyDOM 로드 완료 후 실행

.css(...)CSS 속성을 동적으로 설정

---

1 4단계로 진행되는 스타일링

네 줄의 코드는 순서대로 실행되며 뒤에 오는 것이 앞을 덮어쓴다.

(1) $('*') — 모든 요소의 border를 hidden으로 → CSS의 border solid thin gray를 일괄 제거

(2) $('p') — 모든 p에만 빨강 점선 다시 표시 (p 4개 + 빈 p 1개)

(3) $('.class1') — class1을 가진 p2, p3에 초록 실선 (p 빨강 덮어씀)

(4) $('#p3') — id=p3에 보라 배경 + 흰색 글씨 추가

---

2 CSS 선택자와 같은 문법

jQuery 선택자는 CSS 선택자 문법을 거의 그대로 따른다. 따라서 CSS를 알면 jQuery 선택자를 거의 다 안다.

jQuery	CSS	의미
$('*')	*	모든 요소
$('p')	p	p 태그 모두
$('.cls')	.cls	cls 클래스
$('#id')	#id	해당 id
$('div p')	div p	div 안의 p (자손)
$('a, b')	a, b	a 또는 b

💡 차이점 — CSS는 정적으로 디자인을 정의하고, jQuery 선택자는 이벤트나 조건에 따라 동적으로 잡아 처리한다.

---

3 다중 클래스 매칭

p2는 class="class1 class2"로 두 클래스를 모두 가진다. $('.class1')은 class1을 포함한 모든 요소를 잡는다 — class1만 가진 p3도, class1과 class2 둘 다 가진 p2도 함께.

• $('.class1') → p2, p3 (class1 포함이면 OK)
• $('.class2') → p2, div3 (class2 포함이면 OK)
• $('.class1.class2') → p2만 (둘 다 가진 것)

---

 

반응형

 

4 .css() — 두 가지 호출 방식

// 방식 A: 한 속성만 — 두 인자 $('p').css('border', 'dashed thick red'); // 방식 B: 여러 속성 — 객체로 전달 $('#p3').css({'background-color': 'purple', 'color': 'white'});

본 코드는 둘 다 사용한다 — (2)(3)은 한 속성만이라 두 인자, (4)는 두 속성이라 객체.

---

5 $(document).ready() — 왜 필요한가

script 태그가 head에 있고, body에 HTML이 있다면 HTML이 아직 그려지기 전에 script가 실행된다. 이때 $('p')를 호출하면 p 태그를 못 찾아 아무 일도 안 일어난다.

$(document).ready(function() { ... })는 "문서가 준비된 다음"에 안의 함수를 실행하라는 뜻이다. 이러면 모든 요소가 만들어진 뒤에 선택자가 작동한다.

⚙ 축약형 — $(function() { ... })도 같은 의미. 더 짧게 자주 쓴다.

---

6 자주 하는 실수

실수	증상	해결
ready() 없이 head에 코드	요소 못 찾음	$(document).ready 안에 둠
.class1 점 빠뜨림	class1이라는 태그를 찾음 (없으니 매칭 0)	점(.) 잊지 말기
# 대신 .	id 매칭 실패	id에는 #
같은 id 여러 개	jQuery는 첫 매치만 잡음	id는 페이지 내 유일
jQuery JS 미로딩	$ is not defined	script 순서 확인

---

7 현대식 대안

오늘날에는 vanilla JS만으로 같은 일을 한다. 더 빠르고 라이브러리 의존도 없다.

// jQuery $('p').css('border', 'dashed thick red'); // vanilla JS document.querySelectorAll('p').forEach(el => { el.style.border = 'dashed thick red'; });

---

핵심 한 줄 요약

$('*')모든 요소

$('tag')태그명 매칭

$('.class')클래스 매칭 — 점 필수

$('#id')id 매칭 — 샵 필수

$(doc).ready()DOM 준비된 다음 실행

.css(key, val)한 속성 — 두 인자 / 객체로 여러 속성

우선순위나중 호출이 먼저를 덮어씀

Tags

#jQuery #선택자 #universal #tag-selector #class-selector #id-selector #ready #css함수 #우선순위 #JS #자바스크립트 #CSS #HTML #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

jQuery, 선택자, universal, tag-selector, class-selector, id-selector, ready, css함수, 우선순위, JS, 자바스크립트, CSS, HTML, 웹개발, 티스토리