jQuery - $(document).ready() 대신 $()를 사용하자

 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이 완성되면 화면에 정의된 메시지를 보여줍니다.

반응형

댓글

Designed by JB FACTORY