[jQuery] 01. jQuery가 뭐예요?

jQuery는 JavaScript를 더 쉽고 간결하게 사용하기 위해 만들어진 라이브러리입니다. HTML 요소를 선택하고, 이벤트를 등록하고, 화면을 바꾸는 작업을 훨씬 짧은 코드로 작성할 수 있습니다.

예전에는 JavaScript 코드가 길고 복잡했기 때문에, 개발자들이 더 간단하게 작성할 수 있도록 jQuery가 등장했습니다.

1. 왜 jQuery가 필요했을까?

순수 JavaScript로 버튼 클릭 이벤트를 만들면 다음과 같습니다.

📌 순수 JavaScript


document.getElementById("btn").addEventListener("click", function() {
  alert("클릭됨");
});

같은 기능을 jQuery로 작성하면 더 짧아집니다.

📌 jQuery


$("#btn").click(function() {
  alert("클릭됨");
});

코드 길이가 줄어들고 읽기 쉬워집니다. 이처럼 jQuery는 DOM 조작과 이벤트 처리를 간단하게 만들어줍니다.

2. jQuery 연결 방법 (CDN)

jQuery를 사용하려면 먼저 라이브러리를 불러와야 합니다.


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

이 코드를 HTML의 <head> 태그 안이나 </body> 태그 바로 위에 추가하면 됩니다.

3. $()는 무엇인가?

jQuery의 핵심은 $() 입니다.


$("선택자")

$는 함수이며, HTML 요소를 선택합니다. 선택된 요소는 jQuery 객체로 반환됩니다.

예를 들어,


$("#btn")

위 코드는 id가 btn인 요소를 선택합니다. CSS 선택자와 동일한 방식으로 사용합니다.

4. 가장 기본 예제 (Output 포함)

📌 예제 코드


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>

  <button id="btn">클릭하세요</button>

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

</body>
</html>

📌 OUTPUT

브라우저 화면에 "클릭하세요" 버튼이 하나 나타납니다.
버튼을 클릭하면 alert 창이 뜹니다.
alert 창에는 "버튼이 클릭되었습니다." 라는 문구가 표시됩니다.

5. document ready 개념

HTML 문서가 모두 로딩된 후에 코드를 실행하려면 다음과 같이 작성합니다.


$(document).ready(function() {
  // 실행 코드
});

줄여서 이렇게도 사용할 수 있습니다.


$(function() {
  // 실행 코드
});

이 방식은 HTML 요소가 준비된 이후에 실행되도록 보장해줍니다.

6. 핵심 정리

jQuery는 JavaScript를 쉽게 쓰기 위한 라이브러리입니다.
$()는 HTML 요소를 선택하는 함수입니다.
이벤트 처리와 DOM 조작이 간단합니다.
CDN 한 줄로 바로 사용할 수 있습니다.
document ready는 HTML 로딩 완료 후 실행을 의미합니다.

다음 편에서는 선택자(Selector) 완전 정리로 들어가겠습니다.

'Computer Science > JQuery' 카테고리의 다른 글

[jQuery] 05. Ajax(비동기 통신) 완전 정리 (GET / POST / JSON / $.ajax) (0)	2026.03.03
[jQuery] 04. 이벤트(Event) 완전 정리 (click / on / this / preventDefault / 이벤트 위임) (0)	2026.03.02
[jQuery] 03. DOM 조작 완전 정리 (text / html / val / attr / prop) (0)	2026.03.02
[jQuery] 02. 선택자(Selector) 완전 정리 (0)	2026.02.25