<!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>결과물
풀스택eDot
0개의 댓글
