코딩이 즐겁다

[jQuery] $(document).ready() 개념과 사용법 갓벽 가이드 본문

Jquery

[jQuery] $(document).ready() 개념과 사용법 갓벽 가이드

코즐 2025. 3. 10. 07:00
반응형
반응형

 

$(document).ready()란?

$(document).ready()는 HTML 문서가 완전히 로드되고 DOM이 준비된 후 실행되는 이벤트입니다. 즉, 웹 페이지의 요소들이 모두 불러와진 뒤에 JavaScript 코드를 실행할 수 있도록 도와줍니다.

 

 

기본 사용법

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

✅ 간략하게 줄여서 사용하는 방법:

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

 

 

왜 $(document).ready()가 필요할까?

만약 $(document).ready() 없이 jQuery 코드를 작성하면, DOM 요소가 아직 로드되기 전에 스크립트가 실행될 수 있습니다. 예를 들어, <script> 태그가 <body>의 <div>보다 먼저 실행되면 jQuery가 요소를 찾지 못할 수도 있습니다.

❌ 잘못된 코드 (아직 DOM이 로드되지 않음)

<!DOCTYPE html>
<html lang="ko">
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $("#btn").click(function() {
            alert("버튼 클릭!");
        });
    </script>
</head>
<body>
    <button id="btn">클릭</button>
</body>
</html>

 

✅ 올바른 코드 ($(document).ready() 사용)

<!DOCTYPE html>
<html lang="ko">
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#btn").click(function() {
                alert("버튼 클릭!");
            });
        });
    </script>
</head>
<body>
    <button id="btn">클릭</button>
</body>
</html>

 

$(document).ready()는 중복 실행 가능한가?

같은 페이지에서 여러 개의 $(document).ready()를 작성하면 순서대로 모두 실행됩니다.

$(document).ready(function() {
    console.log("첫 번째 ready 실행!");
});

$(document).ready(function() {
    console.log("두 번째 ready 실행!");
});

 

$(document).ready() 없이 사용하는 방법

만약 <script> 태그를 </body> 태그 바로 위에 두면 $(document).ready() 없이도 동작할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button id="btn">클릭</button>

    <script>
        $("#btn").click(function() {
            alert("버튼 클릭!");
        });
    </script>
</body>
</html>

이렇게 하면 브라우저가 <script>를 실행할 때 이미 DOM이 완전히 로드된 상태이므로 문제없이 작동합니다.

 

반응형
저작자표시 비영리 변경금지

'Jquery' 카테고리의 다른 글

[jQuery] $(document).ready() vs window.onload 차이 갓벽 가이드  (13) 2025.03.10
[jQuery] 마우스 더블 클릭 이벤트의 모든 것 갓벽 가이드  (18) 2025.03.09
[jQuery] click 이벤트 활용의 모든 것 갓벽 가이드  (19) 2025.03.08
jquery 란, 제이쿼리 사용 방법 갓벽 가이드  (55) 2025.02.27
'Jquery' Related Articles more