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 |
