JavaScript/jQuery
[jQuery] 직접선택자(2)
2주녘
2024. 6. 26. 09:20
반응형
- h1 요소와 ID가 tit3인 h3 요소의 스타일을 변경하여, 배경색을 하늘색으로, 테두리를 빨간색 점선으로 적용하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>제이쿼리</h1>
<h2>선택자</h2>
<h3 id="tit3">직접선택자</h3>
<h3>인접선택자</h3>
<!-- jquery cdn -->
<script src="http://code.jquery.com/jquery-3.1.0.js"></script>
<script>
$(function(){
// 예제 : 2개를 선택해서 디자인 적용하기
// $('선택자, 선택자2').함수();
$('h1, #tit3')
.css('background-color', '#0ff')
.css('border', '2px dashed #f00');
});
</script>
</body>
</html>
결과
💡 일치선택자
h1에 tit 부분에 배경색과 border 지정하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 class="tit">제이쿼리</h1>
<h1>선택자</h1>
<h3 class="tit">직접선택자</h3>
<!-- jquery cdn -->
<script src="http://code.jquery.com/jquery-3.1.0.js"></script>
<script>
// 일치 선택자
$(function(){
$('h1.tit')
.css('background-color', '#0ff')
.css('border', '2px dashed #f00');
});
</script>
</body>
</html>
결과
💡 연습문제
#wrap 밑에 h1 태그만 선택해서 디자인 적용 background-color yellow border 2px dashed #f00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 연습문제 : #wrap 밑에 h1 태그만 선택해서 디자인 적용
background-color yellow
border 2px dashed #f00
-->
<div id="wrap">
<h1>인접한 관계 선택자</h1>
<p>내용</p>
<section>
<h1>하위 요소 선택자</h1>
<p>내용2</p>
</section>
</div>
<!-- jquery cdn -->
<script src="http://code.jquery.com/jquery-3.1.0.js"></script>
<script>
$('#wrap > h1')
.css('background-color', 'yellow')
.css('border', '2px dashed #f00');
</script>
</body>
</html>
결과
반응형