JQuery 편집하기 (부분)

== 설치 및 사용법 ==

=== CDN을 통한 설치 ===

가장 간단한 방법은 '''[[CDN]](Content Delivery Network)'''을 이용하는 것이다.

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>
<head>
    <title>jQuery 예제</title>
    <!-- jQuery 3.x 최신 버전 -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    
    <!-- 또는 Google CDN -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    
    <!-- 또는 Microsoft CDN -->
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.7.1.min.js"></script>
</head>
<body>
    <h1>jQuery 테스트</h1>
    <script>
        $(document).ready(function() {
            console.log('jQuery 로드 완료!');
        });
    </script>
</body>
</html>
</syntaxhighlight>

=== 파일 다운로드 ===

jQuery 공식 사이트(jquery.com)에서 '''jquery-3.x.x.min.js''' 파일을 다운로드하여 사용할 수도 있다.

<syntaxhighlight lang="html">
<script src="js/jquery-3.7.1.min.js"></script>
</syntaxhighlight>

=== npm을 통한 설치 ===

'''[[Node.js]]''' 환경에서는 [[npm]]을 통해 설치할 수 있다.

<syntaxhighlight lang="bash">
npm install jquery
</syntaxhighlight>

<syntaxhighlight lang="javascript">
// CommonJS
const $ = require('jquery');

// ES6 모듈
import $ from 'jquery';
</syntaxhighlight>

=== Document Ready ===

jQuery 코드는 반드시 '''DOM이 완전히 로드된 후'''에 실행되어야 한다. 이를 위해 '''$(document).ready()'''를 사용한다.

<syntaxhighlight lang="javascript">
// 방법 1: 전체 문법
$(document).ready(function() {
    // jQuery 코드
});

// 방법 2: 축약 문법 (가장 많이 사용)
$(function() {
    // jQuery 코드
});

// 방법 3: arrow function 사용
$(() => {
    // jQuery 코드
});
</syntaxhighlight>