인접관계 선택자는 직접 선택자로 요소를 먼저 선택하고 그 다음 선택한 요소와 해당 위치에 따른 요소를 선택할 때 사용하게 됩니다.
예제 문법
$("h1").next().css("color","red")
$("h1").parent().css("color","blue")
가족관계 선택자
자손선택 : 부모요소 > 자손요소
후손선택 : 조상요소 후손요소
동위선택1 : 형요소 + 동생요소 - 바로뒤의 동생만
동위선택2 : 형요소 ~ 동생요소 - 뒤의 모든 동생
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리 선택자</title>
<script src="jquery-1.12.0.min.js"></script>
<script>
//준비구문 : 문서객체를 먼저 읽고 스트립트 구문 실행
$(document).ready(function(){
$('div > ul > li').css('color','blue');
$('div li').css('textDecoration','underline');
$('h3 + p').css('color','red');
$('h3 ~ p').css('textDecoration','underline');
});
</script>
</head>
<body>
<div><!--기준-->
<ul><!--자손,후손-->
<li>리스트태그</li><!--후손-->
<li>리스트태그</li>
</ul>
</div>
<h3>제목태그</h3><!--동위-->
<p>문단태그</p><!--동위-->
<p>문단태그</p>
</body>
</html>
부모 요소 선택자는 선택한 요소를 감싸고 있는 부모 요소를 선택합니다. 하위 요소 선택자는 기준요소로 선택한 하위 요소만 선택합니다. 자식요소 선택자는 선택된 요소를 기준으로 지정한 자식 요소만 선택합니다. 형(이전) 선택자는 선택한 요소를 기준으로 바로 이전 형제 요소만 선택합니다. 그리고 동생(다음) 요소 선택자는 선택한 요소를 기준으로 다음 형제 요소만 선택합니다.
댓글