문서의 구조를 담당하는 것이 HTML이고 디자인적인 표현을 담당하는 것이 CSS라고 한다면 JavaScript가 하는 일은 동적으로 수정하여 웹 화면에 인터랙션을 주는 게 주 목적이라고 할 수 있습니다. 사용자의 행동에 따라 실시간으로 웹에 어떠한 변화가 일어나는 상황을 만들어, 동적인 웹 페이지를 작성하는 것이 목표입니다.
# Contents
- 선택자
- css()
- attr
- 탐색 구문
- 이벤트 연결
- 애니메이션
- 다양한 명령어들
# 선택자
jQuery로 특정 요소를 선택하는 기본구문은 아래와 같습니다.
$("선택할 요소")
jQuery 선택자의 쌍따옴표 안의 선택 요소는 기존의 CSS 선택자와 동일합니다.
# css()
css() 구문을 사용하여 선택된 요소의 CSS 속성을 변경하는 법을 알아보도록 하겠습니다. 해당 구문은 다음과 같습니다.
$("선택자").css({"속성명": "속성 값"})
중간에 콤마를 사용하여 변경하고자 하는 속성명과 속성 값을 추가할 수 있습니다.
# attr()
attr() 구문을 이용해 HTML 문서에서 선택된 요소의 attr 속성을 변경해 보겠습니다. 해당 구문은 다음과 같습니다.
$("선택자").attr({"속성명": "속성 값"})
중간에 콤마를 사용하여 변경하고자 하는 속성명과 속성 값을 추가할 수 있습니다.
먼저 예제코드를 보도록 하겠습니다. 첫번째로 index.html 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./css/reset.css" />
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<button class="btn1">이미지 속성 변경 1</button>
<button class="btn2">이미지 속성 변경 2</button>
<div class="frame">
<img src="./img/img1.jpg" alt="img1" />
</div>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="./script/app.js"></script>
</html>
다음은 JavaScript 코드입니다.
$(document).ready(() => {
let btn1 = $(".btn1");
let btn2 = $(".btn2");
btn1.on("click", changeAttr("./img/img1.jpg"));
btn2.on("click", changeAttr("./img/img2.jpg"));
});
function changeAttr(resource) {
return function () {
console.log(resource);
$(".frame img").attr({ src: resource });
};
}
버튼을 클릭하게 되면 해당 프레임 안의 사진이 src 경로가 변경되면서 이미지가 바뀌는 것을 확인할 수 있습니다.
# 탐색 구문
이전 절에서는 jQuery를 이용하여 기본적인 HTML 요소의 선택 및 CSS 속성의 변경법에 대해 알아봤습니다. 이번 절에서는 기존 선택자에 jQuery가 제공하는 다양한 탐색 구문을 활용하여 원하는 요소를 더욱 디테일하게 선택하는 법을 배우겠습니다.
$("선택자").children()
$("선택자").parent()
$("선택자").siblings()
$("선택자").find()
$("선택자").eq()
$("선택자").next()
$("선택자").prev()