[jQuery] 기본 선택자 (1) - 직접 선택자

선택자

선택자는 HTML 요소를 선택해서 가져오는 역할을 한다. jQuery(제이쿼리)는 이 선택자를 통하여 HTML의 요소를 보다 쉽게 선택하여 동적인 CSS, 이벤트, 애니메이션 등을 적용할 수 있다. 매우 많은 선택자가 존재하며 본글에서는 기본선택자 중에 직접 선택자에 대하여 알아보고자 한다.

 

직접 선택자

구분	종류	사용법	설명
직접 선택자	전체 선택자	$("*")	모든 요소를 선택
	예시	$("*").css("border", "1px solid black");
	아이디 선택자	$("#아이디명")	id 태그에 지정한 값을 선택
	예시	$("#menu").css("border", "1px solid black");
	클래스 선택자	$(".클래스명")	class 태그에 지정한 값을 선택
	예시	$(".category").css("border", "1px solid black");
	요소 선택자	$("요소명")	지정한 요소명과 일치하는 요소들을 선택
	예시	$("h1").css("border", "1px solid black");
	그룹 선택자	$("선택 1, 선택 2, ...")	선택 1, 선택 2 에 지정된 요소들을 한번에 선택
	예시	$("#menu, .category, h1").css("border", "1px solid black");
	종속 선택자	$("p.txt_1") $("p#txt_1")	<p> 태그 중 class 태그가 txt_1 또는 id 태그가 txt_1 인 요소를 선택
	예시	$("p.description").css("border", "1px solid black"); $("p#price").css("border", "1px solid black");

직접 선택자를 사용하여 내가 원하는 요소(태그)를 '직접' 선택하여 CSS 를 비롯한 이벤트, 애니메이션을 적용할 수 있다.

 

 

---

개인 학습을 위해 작성되는 글입니다.

제가 잘못 알고 있는 점에 대한 지적 / 더 나은 방향에 대한 댓글을 환영합니다.

 

 

참조 서적:

자바스크립트 + 제이쿼리 입문 : 정인용