본문 바로가기
카테고리 없음

jQuery 기본 문법

by daily_coming 2024. 9. 10.
반응형

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);
});
    
반응형