JQuery

Jin·2025년 5월 8일

jQuery는 DOM을 더 쉽게 조작할 수 있도록 도와주는 도구

DOM 이란

Document Object Model
HTML 문서를 트리 구조로 표현한 객체 모델
브라우저는 HTML을 파싱해서 태그마다 객체로 만들어서 내부적으로 트리 구조로 관리한다.
만약 아래와 같은 HTML이 있다.

 <div id="box">Hello</div>

브라우저는 이것을 아래의 트리구조로 이해한다.

document
└── html
    └── body
        └── div (id="box")
            └── "Hello"

우리가 코드로 이것을 건드릴 수 있게 해주는 것이 DOM이다.

잉 리액트도 DOM인가 뭔가 아니냐?

리액트는 가상 DOM(virtual DOM)을 사용한다.
가상 DOM은 실제 DOM을 복제한 가벼운 자바스크립트 객체 트리이다.
React, Vue같은 친구들은 가상 DOM을 사용해서 최소한의 변경만 실제 DOM에 적용해 빠르게 렌더링한다.
(리액트로 예시를 들자면 JSX로 가상 DOM을 만들고 렌더링을 하면 새로운 가상 DOM 트리가 생성된다 그러고 나서 이전 가상 DOM과 새 가상 DOM을 비교해서 차이점을 찾아 필요한 부분만 실제 DOM에 반영시키는 방식으로 효율적으로 빠르게 업데이트를 한다.)

사실 일반 DOM은 무겁고 느리다.. 변경할 때마다 렌더링이 발생하고 브라우저가 복잡한 작업을 수행하기 때문이다.

그럼에도 JQuery 쓰는 이유

다양한 브라우저에서 동작
쉬운 API를 통해 HTML 문서 탐색과 조작 가능
이벤트 처리, 애니메이션, Ajax 등을 훨씬 더 간단하게 만듦
함수에 별도의 이름을 붙이면 같은 기능이 필요할 때마다 해당 함수를 실행가능 (재사용성)
😀

만약 js만 써서 DOM을 건드리려면 이렇게 길게 써야한다.

document.getElementById("myDiv").style.display = "none";

하지만 jQuery를 쓰면

$("#myDiv").hide();

이렇게 더 간단하다.

사용법

다운로드 링크

1. compressed를 다운받는다.
compressed는 jquery-1.11.min.js 이런식으로 min이 적혀있다.
2. 프로젝트에 지정한다.

나는 걍 귀찮아서 libs 폴더에 넣었다.
3. HTML 파일 또는 아래 코드를 포함시킨다.

<script src = "libs/jquery-3.5.1.min.js"></script>

사실 인터넷을 사용가능한 환경이면 CDN 쓰면된다.
이 또한 HTML 파일 또는 아래에 포함시키면 된다.

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

기본 문법

$(선택자).동작();

예제

백문이 불여일견 예제를 보고 배워보자

(1) 문서 준비 완료 시 실행

  $(document).ready(function() {
  // 문서가 준비되면 실행될 코드
});

예... 콜백함수입니다...

(2) 요소 선택해서 텍스트 바꾸기

$("#myDiv").text("새로운 텍스트");
$(".myClass").html("<b>굵은 글씨</b>");

(3) 클릭 이벤트

$("#btn").click(function() {
  alert("버튼이 클릭되었습니다!");
});

(4) 스타일 변경

$("p").css("color", "red");

(5) 숨기기 / 보이기

$("#box").hide();     // 숨김
$("#box").show();     // 보임
$("#box").toggle();   // 토글

(6) Ajax 요청

$.get("data.json", function(data) {
  console.log(data);
});

$.post("submit.php", { name: "홍길동" }, function(response) {
  alert("서버 응답: " + response);
});

(7) 전체 코드 예시

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>나의 첫 웹페이지</title>
    <script src="/libs/jquery-3.5.1.min.js"></script>
    <script>
      $(document).ready(function () {
        // 모든 .babo 클래스 요소의 텍스트 변경
        $(".babo").text("바보 아니다");

        // 첫 번째 p 태그만 텍스트 다르게 바꾸기
        $(".babo").eq(0).text("나 바보 아님");

        // 색상 바꾸기
        $(".babo").css("color", "blue");

        // h1 클릭하면 숨기기
        $("#hello").click(function () {
          $(this).hide();
        });
      });
    </script>
  </head>
  <body>
    <h1 id="hello">Hello, world!</h1>
    <p class="babo">1</p>
    <p class="babo">2</p>
    <p class="babo">3</p>
  </body>
</html>