[jQuery] 선택자

보통 html에의 해 작성한 스타일의 경우 '정적이다' 라고 표현하지만 제이쿼리를 통해서 동적으로 스타일을 적용이 가능해졌다

 

예시) 

 

See the Pen Untitled by yeojinho (@yeojinho) on CodePen.

 

 

제이쿼리에서 CSS의 선택자 기본형

 

1. 선택한 요소에 지정한 스타일을 적용함
$("CSS선택자").css("스타일 속성명", "값");

2. 선택한 요소에 지정한 속성을 적용함
$("CSS선택자").css("속성명", "값");

 

 

기본 선택자의 종류

 

 

구분	종류	사용법	설명
직접 선택자	전체 선택자	$("*")	모든 요소를 선택
	아이디 선택자	$("#아이디명")	id 속성에 지정한 값을 가진요소 선택
	클래스 선택자	$(".클래스명")	class 속성에 지정한 값을 가진 요소 선택
	요소 선택자	$("요소명")	지정한 요소명과 일치하는 요소들만 선택
	그룹 선택자	$("선택1, 선택2, 선택 3, .. 선택n")	선택1 ~ 선택n까지 지정된 요소들을 한번에 선택
	종속 선택자	$("p.txt_1") $("p#txt_1")	<p> 요소중 class 값이 txt_1인 요소또는 id값이 txt_1인 요소를 선택

 

 

구분	종류	사용법	설명
인접 관계 선택자	부모 요소 선택자	$("요소 선택").parent()	선택한 요소의 부모 요소를 선택
	상위 요소 선택자	$("요소 선택").parent()	선택한 요소의 상위 요소를 모두 선택
	가장가까운 상위 요소 선택자	$("요소 선택").clossest("div")	선택한 요소의 상위 요소 중 가장 가까운 <div>만 선택
	하위 요소 선택자	$("요소 선택 하위 요소")	선택한 요소에 지정한 하위 요소 선택
	자식 요소 선택자	$("요소 선택>자식요소")	선택한 요소를 기준으로 자식 관계에 지정한 요소만 선택
	자식 요소들 선택자	$("요소 선택").children()	선택한 요소의 모든 자식 요소를 선택
	형 요소 선택자	$("요소 선택").prev()	선택한 요소의 바로 이전 요소 선택
	형 요소들 선택자	$("요소 선택").prevAll()	선택한 요소의 이전 요소 모두를 선택
	지정 형 요소들 선택자	$("요소 선택").prevUntill("요소명")	선택한 요소부터 지정한 이전의 요소까지 모두 선택
	동생 요소 선택자	$("요소 선택").next() $("요소 선택+다음요소")	선택한 요소의 다음 요소를 선택
	동생 요소들 선택자	$("요소 선택").nextAll()	선택한 요소의 다음 요소 모두를 선택
	지정 동생 요소들 선택자	$("요소 선택").nextUntil("h2")	선택한 요소부터 지정한 요소의 다음 요소까지 모두 선택
	전체 형제 요소 선택자	$(".box_1").siblings()	class 값이 box_1인 요소의 형제 요소 전체 선택