jQuery 인접 선택자

삼전·2023년 5월 30일
0

jQuery

목록 보기
2/15
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- CDN으로 jQuery 라이브러리 연결하기 - https://cdnjs.com/libraries/jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

</head>
<body>
	<div>
		<h1 id="first">인접 선택자</h1>
		<h1 class="one">children 선택자</h1>
		<h1 class="one">next선택자</h1>
		<h4>prev 선택자</h4>
		<h4>parent 선택자</h4>
		<h3><b>sibling 선택자</b></h3>
		<h2>후손, 자손 선택자</h2>
	</div>
	<script>
		$(function(){
			//**인접 선택자**
			//children(): 자손을 선택한다.
			$('div').children().css('color', 'red');
			$('div').children('.one').css('background-color', 'lightblue')
			// next() : 다음을 선택한다.
			$('h4').next().css('border', '1px solid hotpink')
			$('.one').prev().css('background', 'yellow')
			$('b').parent().css('font-size', '3em');
			//siblings() : 형제를 선택한다
			$('h4').siblings().css('color', 'blue');
		})
	</script>
</body>
</html>

결과물

profile
풀스택eDot

0개의 댓글