[JQuery] ready 함수

2024. 11. 13. 13:53

ready

Specify a function to execute when the DOM is fully loaded.
DOM이 완전하게 로드되면 실행할 함수를 지정한다.
ready(handler) , ready 메서드에 콜백함수 지정해라
handler : function() {...}
DOM이 완전하게 로드되면 ready 메서드에 지정한 콜백함수 실행된다.

<script>
    console.log('hello'); // 가능
    $("#my-div").css("backgroundColor", "red"); // 불가능
</script>
<body>
    <div id="my-div">내 div</div>
</body>

다음과 같이 DOM 생성 완료가 아직 안된 상태에서 my-div 가 만들어지지 않았는데, 접근한다? 저 코드는 불가능하다. 스크립트가 위에 있기 때문이다.

    <script>
        function myFunc() {
            $("#my-div").css("backgroundColor", "red");
        }
    </script>
</head>
<body>
    <div id="my-div">

    </div>
    <button onclick="myFunc()">클릭하기</button>
</body>

다음과 같이 버튼을 눌러서 특정 함수를 실행할 경우에는 실행이 된다.

<body>
    <div id="my-div">내 div</div>
</body>
</html>
<script>
    console.log('hello'); // 가능
    $("#my-div").css("backgroundColor", "red"); // 가능
</script>

만일 스크립트를 html 밑에 작성할 경우 실행이 된다. div가 이미 만들어졌고 그 다음에 접근하는 것이기 때문에.

그럼 첫번째 상황일 경우 어떻게 접근해야 할까?

$(document).ready(function() {
   $("#my-div").css("backgroundColor", "red"); // 가능
})

다음과 같이 ready 함수를 쓴다. ready 메서드에 콜백함수는 DOM이 완전하게 로드되면 실행한다.

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById("my-div").style.backgroundColor='red';
}) // 익명함수 형태의 콜백함수, 즉시 실행함수

dom 방식으로는 다음과 같이 작성한다. addEventListener 메서드에 'DOMContentLoaded' 를 이용한다.

$(function() {  //ready랑 똑같음
    $("#my-div").css("backgroundColor", "red");
})

Jquery 버전을 좀 더 간단하게 줄인 코드이다. 위에 ready를 사용한 것의 축약 버전이다. 코드가 짧아서 좋지만 가독성은 떨어지는 편이다.

'JQuery' 카테고리의 다른 글

[JQuery] val메서드, getter, setter (0)	2024.11.18
[JQuery] prev, prevAll, next, nextAll, siblings, even, odd (0)	2024.11.11
[JQuery] $ 메서드와 css 메서드 선택자 (0)	2024.11.08
[JQuery] 세팅과 사용 (1)	2024.11.07

MY_STUDY