jQuery 기본 문법
1. jQuery 시작하기
jQuery는 JavaScript 라이브러리로, HTML 문서의 탐색, 이벤트 처리, 애니메이션, Ajax 등의 기능을 간단하게 구현할 수 있게 해줍니다. 먼저 jQuery를 사용하려면 jQuery 라이브러리를 포함해야 합니다.
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
이제 $(document).ready()
를 사용하여 DOM이 완전히 로드된 후 코드를 실행할 수 있습니다.
$(document).ready(function() {
// jQuery 코드 작성
console.log("DOM이 로드되었습니다.");
});
2. 선택자 (Selectors)
jQuery는 CSS 스타일의 선택자를 사용하여 HTML 요소를 쉽게 선택할 수 있습니다.
$("p")
: 모든<p>
태그 선택$(".class-name")
: 클래스가class-name
인 요소 선택$("#id-name")
: id가id-name
인 요소 선택$("div p")
:<div>
내의 모든<p>
태그 선택
$(document).ready(function() {
$("p").css("color", "red"); // 모든 p 태그의 텍스트 색상을 빨간색으로 변경
$("#my-id").css("font-size", "20px"); // 특정 id의 요소에 글꼴 크기 적용
$(".my-class").hide(); // 특정 클래스의 요소를 숨김
});
3. 이벤트 처리
jQuery는 다양한 이벤트를 처리할 수 있는 메서드를 제공합니다. 대표적인 이벤트로는 click
, hover
, submit
, keydown
등이 있습니다.
$(document).ready(function() {
// 클릭 이벤트 처리
$("#click-button").click(function() {
alert("버튼이 클릭되었습니다!");
});
// 마우스를 올렸을 때
$(".hover-div").hover(function() {
$(this).css("background-color", "yellow");
}, function() {
$(this).css("background-color", "");
});
// 폼 제출 이벤트 처리
$("#my-form").submit(function(event) {
event.preventDefault(); // 폼 제출 시 페이지 리로드 방지
alert("폼이 제출되었습니다.");
});
});
4. HTML 조작
jQuery를 사용하면 DOM 요소의 내용을 쉽게 변경하거나 추가할 수 있습니다. text()
, html()
, val()
메서드를 사용하면 요소의 내용을 읽거나 쓸 수 있습니다.
// 텍스트 내용 변경
$("#my-text").text("새로운 텍스트");
// HTML 내용 변경
$("#my-html").html("<b>강조된 텍스트</b>");
// 입력 필드 값 변경
$("#my-input").val("새로운 값");
5. 클래스 및 CSS 조작
jQuery는 HTML 요소에 CSS 스타일을 적용하거나 클래스를 추가, 제거, 토글할 수 있는 다양한 메서드를 제공합니다.
$(document).ready(function() {
// CSS 스타일 변경
$("#my-box").css("background-color", "blue");
// 클래스 추가 및 제거
$("#my-box").addClass("highlight");
$("#my-box").removeClass("highlight");
// 클래스 토글 (클래스가 있으면 제거, 없으면 추가)
$("#toggle-button").click(function() {
$("#my-box").toggleClass("highlight");
});
});
6. 요소 추가 및 제거
jQuery는 DOM에 요소를 동적으로 추가하거나 제거할 수 있습니다. append()
, prepend()
, after()
, before()
메서드를 사용하여 요소를 원하는 위치에 추가할 수 있습니다.
$(document).ready(function() {
// 요소 추가
$("#my-list").append("<li>새로운 항목 추가</li>");
$("#my-list").prepend("<li>처음에 추가된 항목</li>");
// 요소 제거
$("#remove-item").click(function() {
$("#my-list li:last").remove(); // 마지막 리스트 항목 제거
});
});
7. 애니메이션 효과
jQuery는 요소를 숨기거나 나타내는 등의 애니메이션 효과를 쉽게 적용할 수 있는 메서드를 제공합니다. 대표적인 메서드로는 hide()
, show()
, slideDown()
, slideUp()
, fadeIn()
, fadeOut()
등이 있습니다.
$(document).ready(function() {
// 숨기기 및 나타내기
$("#hide-button").click(function() {
$("#my-div").hide();
});
$("#show-button").click(function() {
$("#my-div").show();
});
// 슬라이드 애니메이션
$("#slide-button").click(function() {
$("#my-div").slideToggle();
});
// 페이드 애니메이션
$("#fade-button").click(function() {
$("#my-div").fadeToggle();
});
});
8. Ajax
jQuery의 $.ajax()
메서드는 비동기 요청을 보내고 서버에서 데이터를 받아오는 기능을 제공합니다. 또한 $.get()
와 $.post()
메서드를 통해 HTTP 요청을 간편하게 처리할 수 있습니다.
$(document).ready(function() {
// GET 요청
$("#load-data").click(function() {
$.get("https://jsonplaceholder.typicode.com/posts/1", function(data) {
$("#data-container").html("<p>" + data.title + "</p>");
});
});
// POST 요청
$("#submit-data").click(function() {
$.post("https://jsonplaceholder.typicode.com/posts",
{
title: "새로운 게시물",
body: "내용",
userId: 1
}, function(data) {
$("#data-container").html("<p>게시물 ID: " + data.id + "</p>");
});
});
});
9. 반복문
jQuery에서 반복적으로 HTML 요소를 처리하고 싶을 때는 each()
메서드를 사용합니다. 이는 배열 또는 객체를 순회할 때도 사용할 수 있습니다.
$(document).ready(function() {
$("li").each(function(index) {
$(this).text("리스트 항목 " + (index + 1));
});
});
10. 체이닝 (Chaining)
jQuery의 체이닝 기능을 사용하면 여러 메서드를 연속으로 호출할 수 있습니다. 이렇게 하면 코드를 더욱 간결하게 작성할 수 있습니다.
$(document).ready(function() {
$("#my-div").css("color", "red").slideUp(2000).slideDown(2000);
});