[jQuery] 기본 선택자 (2) - 인접관계 선택자

인접 관계 선택자

인접 관계 선택자의 경우 직접 선택자로 요소(태그)를 먼저 선택하고 그다음 선택한 요소와 상관이 있는 (가까이에 있다던지 이전 혹은 그다음에 위치하고 있는) 요소를 선택할 때 사용한다.

 

구분	종류	사용법	설명
인접 관계 선택자	부모 요소 선택자	$("선택 요소").parent()	선택한 요소를 감싸고 있는 부모 요소를 선택
	예시	$("#menu").parent();
	상위 요소 선택자	1. $("선택 요소").parents() 2. $("선택 요소").parents("선택 요소")	1. 선택한 요소 기준으로 모든 상위 요소 선택 2. 선택한 요소 기준으로 상위 요소 중 선택한 요소만 선택
	예시	1. $(".example1").parents() 2. $(".example2").parents("span")
	가장 가까운 상위 요소 선택자	$("선택 요소").closest("선택 요소")	선택한 요소 기준으로 가장 가까운 상위 요소만 선택
	예시	$(".exampl1").closest("div")
	하위 요소 선택자	$("기준 요소 선택1 요소 선택2")	기준 요소로 선택한 하위 요소만 선택
	예시	$("#wrap h1") -> #wrap이 포함하는 모든 h1 요소를 선택
	자식 요소 선택자	1. $("선택 요소 > 자식 선택 요소") 2. $("선택 요소").children("자식 선택 요소") 3. $("선택 요소").children()	1&2. 선택한 요소 기준으로 지정한 자식 요소만 선택 3. 선택한 요소 기준으로 모즌 자식 요소를 선택
	예시	$("#wrap > h1") -> wrap 요소 안의 자식 요소 h1 선택 $("#wrap > section") -> wrap 요소 안의 section 요소안의 모든 요소 선택
	이전 요소 선택자	$("선택 요소").prev()	선택한 요소 기준으로 이전에 오는 형제 요소만 선택
	예시	$(".wrap").prev()
	다음 요소 선택자	1. $("선택 요소").next() 2. $("선택 요소1 + 선택 요소2")	1. 선택한 요소 기준으로 다음에 오는 형제 요소만 선택 2. 선택한 요소 기준으로 바로 다음에 오는 선택한 요소만 선택
	예시	1. $(".wrap").next().next() -> 체이닝 형식으로도 가능 2. $(".wrap + span") -> wrap 클래스 바로 다음에 오는 span 태그만 선택
	전체 이전 요소 선택자	$("선택 요소").prevAll()	선택 요소 기준으로 이전에 오는 모든 형제 요소를 선택
	예시	$(".wrap").prevAll()
	전체 다음 요소 선택자	$("선택 요소").nextAll()	선택 요소 기준으로 다음에 오는 모든 형제 요소를 선택
	예시	$(".wrap").nextAll()
	전체 형제 요소 선택자	$("선택 요소").siblings()	선택한 요소의 모든 형제 요소를 선택
	예시	$(".wrap").siblings()
	범위 제한 이전 요소 선택자	$("선택 요소").prevUntil ("범위 제한 선택 요소")	선택한 요소 기준으로 범위 제한 요소까지 전체 형(이전)요소 선택
	예시	$(".title6").prevUntil(".maintitle") -> title6 이전 형제 요소 중 maintitle 까지 선택
	범위 제한 다음 요소 선택자	$("선택 요소").nextUntil ("범위 제한 선택 요소")	선택한 요소 기준으로 범위 제한 요소까지 전체 동생(다음)요소 선택
	예시	$(".title3").nextUntil(".title7") -> title3 이후 형제 요소 중 title7 까지 선택

 

---

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

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

 

 

참조 서적:

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