웹/자바스크립트

[제이쿼리]$(document).ready(function(){});

개린이9999 2023. 4. 27. 15:33
728x90

jQuery를 사용한 모든 웹페이지는 다음 코드로 시작합니다.

<script>
$(document).ready(function(){

});
</script>

$(document).ready()는 문서가 준비되면 매개변수로 넣은 콜백 함수를 실행하라는 의미입니다.

jQuery 이벤트 메서드 중 하나입니다. 이 메서드는 비슷한 기능을 수행합니다.

<script>
window.onload = function(){

};
</script>

고전 이벤트 모델은 한 번에 하나의 이벤트만 연결할 수 있습니다. 반면에 jQuery의 이벤트 메서드는 표준 이벤트 모델이나

인터넷 익스플로러 이벤트 모델과 마찬가지로 이벤트로 여러개의 함수를 연결할 수 있습니다.

 

아래의 예제는 실행하게되면 문서가 준비되는 순간 경고창 세 개가 연달아 표시됩니다.

<script>
$(document).ready(function(){
	alert("First READY");
});

$(document).ready(function(){
	alert("Second READY");
});

$(document).ready(function(){
	alert("Third READY");
});
</script>

$(document).ready() 메서드는 굉장히 많이 사용되므로 jQuery에서는 간단하게 사용할 수 있는 형태를 제공합니다.

<script>
$(function(){

});
</script>
 

 jQuery를 사용하게 되면 바로 학습하게 되는 Event가 바로 $(document). ready()입니다. 왜 jQuery 배우게 되면 이 Event를 알게 되는 걸까요? 오늘은 jQuery의 대표 기능 중 하나인 $(document). ready() Event를 알아보도록 하겠습니다.

문법

.ready(handler)

 .ready()는 DOM(Document Object Model)이 완전히 불러와지면 실행되는 Event입니다. 일반적으로 브라우저가 HTML을 보여주기 위해서는 먼저 문서 구조를 만들고 만들어진 문서 구조 위에 디자인을 입히는 형식을 취합니다. 이 과정에서 디자인이 입혀지지 않은 상태로 문서 구조가 만들어진 시점에 실행되는 Event가 바로. ready()입니다.

 

 대부분의 브라우저에서는 DOMContentLoaded라는 .ready()와 비슷한 Event를 사용할 수 있습니다. 다만 여기에는 다른 점이 있습니다. 첫 번째. ready() Evnet는 DOMContentLoaded보다 먼저 실행됩니다. 두 번째 DOMContentLoaded는 Event가 한 번만 발생하며. ready() Evnet는 계속 발생합니다.

사용법

$(document).ready(function(){
  // 실행할 기능을 정의해주세요.
});

 일반적으로 사용되는 방법은 위에서 제시한 예제 코드와 같습니다. .ready()를 사용하는 대표적인 코드들은 아래와 같습니다.

$(handler)
$(document).ready(handler)
$("document").ready(handler)

 jQuery 3.0 버전 이후부터는 첫 번째에 해당하는 구문만 사용하는 것을 권장드립니다. .ready() Event는 1.8 버전에서는 deprecated 되었으며 3.0에서는 지원하지 않기 때문입니다.

$(documet).ready() 대신 $()를 사용하자

$(function(){
  // 실행할 기능을 정의해주세요.
});

 

예제 코드

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>$() 예제</title>
    <style>
        p {
            color: blue;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
    <script>
        $(function () {
            $("p").text("DOM이 완성되었습니다. 코드를 작성해주세요!");
        });
    </script>
</head>

<body>
    <p>정의되지 않은 내용</p>
</body>

</html>

 DOM이 완성되면 화면에 정의된 메시지를 보여줍니다.

728x90