jQuery 연결
<head>
<meta charset="UTF-8">
<title>jQuery 연결</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
<!-- JavaScript 작성 영역 -->
</script>
</head>
선택자
$(document).ready(function() {
// 태그선택자 스타일(속성,속성값)
$('span').css('border','3px solid blue');
// 클래스선택자
$('.my').css('border','5px solid red');
// id선택자
$('#content').css('background', 'green');
});
<body>
<p class="my">jQuery 실습</p>
<div>
<div id="content">id 값이 content인 div tag</div>
</div>
<span>span1</span>
<span class="my">span2</span>
</body>
$(document).ready(function() {
// 그룹선택자
$('h1,p').css('color','orange');
});
<body>
<h1>봄</h1>
<h2>여름</h2>
<p>가을</p>
<div>겨울</div>
</body>
$(document).ready(function() {
// 후손선택자
$('body div').css('border','3px solid red');
});
<body>
<div>
<ul>
<li>봄</li>
<li>여름</li>
<li>가을</li>
<li>겨울</li>
</ul>
<div>계절</div>
</div>
<p>
<span>바다</span>
</p>
</body>
$(document).ready(function() {
// 자식선택자
$('body > div').css('border','3px solid red');
});
<body>
<div>
<ul>
<li>봄</li>
<li>여름</li>
<li>가을</li>
<li>겨울</li>
</ul>
<div>계절</div>
</div>
<p>
<span>바다</span>
</p>
</body>