jQuery - DOM 조작
jQuery는 웹 페이지의 Document Object Model(DOM)을 쉽고 효율적으로 조작할 수 있는 강력한 기능을 제공합니다. 이번 포스팅에서는 jQuery를 사용한 DOM 조작의 기본적인 방법들을 알아보겠습니다.
DOM 요소 선택
jQuery를 사용하면 CSS 스타일의 선택자를 이용하여 DOM 요소를 쉽게 선택할 수 있습니다.
예제: ID로 요소 선택하기
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<p id="first">첫 번째 문단입니다.</p>
<script>
$(document).ready(function(){
$("#first").css("color", "red");
});
</script>
</body>
</html>이 예제에서는 ID가 first인 <p> 태그의 텍스트 색상을 빨간색으로 변경합니다.
요소 내용 및 속성 조작
jQuery를 사용하여 요소의 내용(text, html) 또는 속성을 쉽게 변경할 수 있습니다.
예제: 텍스트 및 HTML 내용 변경하기
$(document).ready(function(){
$("#first").text("새로운 텍스트"); // 텍스트 변경
$("#first").html("<b>새로운 HTML</b>"); // HTML 변경
});예제: 속성 변경하기
$(document).ready(function(){
$("a").attr("href", "https://www.example.com");
});이 예제에서는 모든 <a> 태그의 href 속성을 https://www.example.com으로 변경합니다.
요소 추가 및 삭제
DOM에 새로운 요소를 추가하거나 기존 요소를 삭제하는 것도 jQuery를 사용하면 매우 간단합니다.
예제: 요소 추가하기
$(document).ready(function(){
$("#first").append("<p>새로운 문단 추가</p>"); // 기존 요소 끝에 추가
$("#first").prepend("<p>문단 앞에 추가</p>"); // 기존 요소 시작 부분에 추가
});예제: 요소 삭제하기
$(document).ready(function(){
$("#first").remove(); // 요소 삭제
});클래스 및 스타일 조작
jQuery를 사용하면 클래스를 추가, 제거, 토글할 수 있으며, CSS 스타일을 동적으로 조작할 수도 있습니다.
예제: 클래스 조작하기
$(document).ready(function(){
$("#first").addClass("highlight"); // 클래스 추가
$("#first").removeClass("highlight"); // 클래스 제거
$("#first").toggleClass("highlight"); // 클래스 토글
});예제: CSS 스타일 변경하기
$(document).ready(function(){
$("#first").css("color", "blue"); // CSS 스타일 변경
});이 포스팅에서는 jQuery를 사용한 DOM 조작의 기본적인 방법들을 살펴보았습니다. 요소 선택, 내용 및 속성 변경, 요소 추가 및 삭제, 그리고 클래스 및 스타일 조작 등 다양한 방법들을 통해 웹 페이지를 동적으로 변경할 수 있습니다. 이러한 기법들을 익히면 jQuery를 통해 웹 페이지를 더 효과적으로 제어할 수 있게 됩니다.
'JQuery' 카테고리의 다른 글
| JQuery - 유틸리티 함수 (2) | 2024.01.28 |
|---|---|
| jQuery - AJAX 통신 (0) | 2024.01.28 |
| JQuery - 애니메이션 및 효과 (0) | 2024.01.28 |
| jQuery - 이벤트 핸들링 (1) | 2024.01.28 |
| jQuery - 기본 사용법 및 개념 (0) | 2024.01.27 |
댓글