[JQuery] 2장 JQuery 기본 문법

1. HTML 문서 구조

먼저 JQuery를 사용할 HTML 문서의 기본 구조부터 작성해봅시다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JQuery</title>
    <script src="../version/jquery-3.7.1.min.js"></script>
    <script>
      $(document).ready(function () {
        // Jquery 코드 작성
        $("#handleClick").click(function () {
          $("#ThisText").text("버튼이 클릭되었습니다");
        });
      });
    </script>
  </head>
  <body>
    <h1>JQuery 버튼 클릭시 텍스트 표시</h1>
    <p id="ThisText">여기에 텍스트가 표시됩니다</p>
    <button id="handleClick">클릭</button>
  </body>
</html>

위 예제에 <script> 태그를 사용해 jQuery 라이브러리를 CDN을 통해 포함시켜 JQuery의 모든 기능을 사용할 수 있습니다.

$(document) 부분은 DOM이 완전히 로드된 후 내부의 코드를 실행합니다. 모든 jQuery의 코드는 이 구조 내에 작성해야 합니다.

2. 선택자

JQuery 선택자를 사용해 HTML 요소를 선택할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="../version/jquery-3.7.1.min.js"></script>
    <script>
      $(document).ready(function () {
        // Jquery 코드 작성
        $("#handleClick").click(function () {
          $("#ThisText").text("버튼이 클릭되었습니다");
          $("#ThisText").css("color", "red"); // 클릭시 텍스트 색상을 빨간색으로 변경
        });
      });
    </script>
  </head>
  <body>
    <h1>JQuery 버튼 클릭시 텍스트 표시</h1>
    <p id="ThisText">여기에 텍스트가 표시됩니다</p>
    <button id="handleClick">클릭</button>
  </body>
</html>

3.메서드

jQuery 다양한 메서드를 사용해 HTML 요소를 조작할 수 있습니다.

텍스트 변경

$("#ThisText").text("새로운 텍스트"); // 텍스트 변경

HTML 변경

$("#StrongText").html("<strong>강조된 텍스트</strong>");

CSS 스타일 변경

$("#background").css("background-color", "yellow"); // 배경색 변경

4. 이벤트 처리

jQuery를 사용하면 HTML 요소의 이벤트를 처리할 수 있습니다. 예로 클릭시 버튼이 클릭되었다고 알림이 나타나는 코드를 작성할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>click event</title>
    <script src="../version/jquery-3.7.1.min.js"></script>
  </head>
  <script>
    $(document).ready(function () {
      $("#alertButton").click(function () {
        alert("버튼이 클릭됨!");
      });
    });
  </script>
  <body>
    <button id="alertButton">클릭해보세요</button>
  </body>
</html>

5.Ajax 요청

jQuery를 사용해 Ajax 요청을 보내고 응답을 처리할 수 있습니다.

GET 요청 예제:

 $.get("./data.json", function (data) {
          $("#myText").text(data.message); //서버에서 받은 데이터로 텍스트 변경
})

HTML:

<p id="myText">여기에 데이터가 표시</p>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>click event</title>
    <script src="../version/jquery-3.7.1.min.js"></script>
  </head>
  <script>
    $(document).ready(function () {
      $("#myButton").click(function () {
        $("#myText").text("버튼이 클릭되었습니다!");
        $("#myText").css("color", "blue"); // 텍스트 색상 변경

        // Ajax 예제
      });
      $("#loadData").click(function () {
        $.get("./data.json", function (data) {
          $("#myText").text(data.message);
        }).fail(function () {
          $("#myText").text("데이터를 불러오지 못했습니다");
        });
      });
    });
  </script>
  <body>
    <p id="myText">여기에 데이터가 표시</p>
    <button id="myButton">클릭</button>
    <button id="loadData">데이터 불러오기</button>
  </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] 3장 JQuery DOM 조작 (0)	2025.02.27
[JQuery] 1장 JQuery는 무엇인가? Jquery세팅법 (1)	2025.02.16