1. jQuery DOM 조작
jQuery는 HTML 문서 탐색, 이벤트 처리, 애니메이션, AJAX 요청 등을 간편하게 할 수 있는 Javascript 라이브러리로, 아래는 jQuery의 주요 DOM 조작 메서드와 예제입니다.
2. jQuery 기본 설정
먼저, jQuery를 사용하기 위해 HTML 문서에 jQuery 라이브러리를 포함시켜야 합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Default-DOM</title>
<script src="../version/jquery-3.7.1.min.js"></script>
</head>
<body>
<h1 id="title">Hello, World</h1>
<button id="changeTitle">제목 변경</button>
<button id="additem">아이템 추가</button>
<ul id="itemList"></ul>
<script>
// jquery code
</script>
</body>
</html>3. jQuery DOM 조작 예제
- 텍스트 변경
버튼 클릭 시 제목을 변경합니다.
$(document).ready(function () {
$("#changeTitle").click(function () {
$("#title").text("제목이 변경되었습니다");
});
});- HTML 추가
버튼 클릭 시 리스트에 아이템을 추가합니다.
// 아이템 추가 기능
$("#addItem").click(function () {
// ID 수정
$("#itemList").append("<li>새로운 아이템</li>");
});- 스타일 변경
CSS 스타일을 변경합니다.
$(document).ready(function () {
$("#changeTitle").click(function () {
$("#title").css({
"color": "blue",
"font-size": "30px",
});
});
});- 클래스 추가 및 제거
클래스를 추가하거나 제거합니다.
$(document).ready(function () {
$("#changeTitle").click(function () {
$("#subscription").toggleClass("highlight");
});
});.highlight {
background-color: yellow;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Default-DOM</title>
<script src="../version/jquery-3.7.1.min.js"></script>
</head>
<style>
.highlight {
background-color: yellow;
}
</style>
<body>
<h1 id="title">Hello, World</h1>
<button id="changeTitle">제목 변경</button>
<button id="addItem">아이템 추가</button>
<ul id="itemList"></ul>
<p id="subscription">hello</p>
<script>
$(document).ready(function () {
// 제목 변경
$("#changeTitle").click(function () {
$("#title").text("제목이 변경되었습니다");
});
// 아이템 추가 기능
$("#addItem").click(function () {
// ID 수정
$("#itemList").append("<li>새로운 아이템</li>");
});
// 스타일 변경
$(document).ready(function () {
$("#changeTitle").click(function () {
$("#title").css({
color: "blue",
"font-size": "30px",
});
});
});
});
// css 클래스 추가
$(document).ready(function () {
$("#changeTitle").click(function () {
$("#subscription").toggleClass("highlight");
});
});
</script>
</body>
</html>
GitHub - jQuicker/jQuery-bloging
Contribute to jQuicker/jQuery-bloging development by creating an account on GitHub.
github.com
LIST
'Back-End > JQuery' 카테고리의 다른 글
| [JQuery] 5장 애니메이션 (0) | 2025.03.18 |
|---|---|
| [JQuery] 4장 JQuery 이벤트 처리 (0) | 2025.03.01 |
| [JQuery] 2장 JQuery 기본 문법 (0) | 2025.02.24 |
| [JQuery] 1장 JQuery는 무엇인가? Jquery세팅법 (1) | 2025.02.16 |