티스토리 뷰

it

ready / window.onload와 같은 기능2

ITs Story biaos 2023. 3. 6. 15:27

문서 준비 핸들러 - jQuery ready 함수

: 초기화 기능을 수행하는데 적합한 이벤트 처리기

ready 메서드

- DOM 로드(이미지 로드전) 후 실행할 콜백(callback) 함수 호출

즉. HTML을 DOM트리로 변환한 후 리소스를 다운로드 하기전에 호출

[참고] window.onload = function(){ test(); }

- 전체문서가 모두 로드된 다음 호출되는 이벤트

- 이미지 또는 다른 리소스 다운로드에 많은 시간이 소요되는 경우 실행이 지연되는 효과 발생.

기본문법

$(document).ready(function(){

//DOM이 모두 로드 된 후 실행할 코드 입력

});

축약문법

jQuery(function(){

//DOM이 모두 로드 된 후 실행할 코드 입력

});

한번더 축약 ..

$(function() {

//DOM이 모두 로드 된 후 실행할 코드 입력

});

ready handler

- Script는 Dom요소가 준비가 될때가지 실행을 기다림

- ready handler 는 window.onload와 비슷하지만 window.onload는 이미지를 포함하여 모두 로드될때가지 기다리므로 스크립트 실행이 늦어짐.

- ready handler는 DOM tree가 만들어질 때까지 만 기다림

jQuery가 이러한 모든 작업을 신경씀

개발자는 그냥 사용하기만 하면됨

===============

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>jQuery Exam</title>

<style type="text/css">

span{font-size: 30pt;}

.redtext{color:#F00;} /*#FF0000*/

.italictext{font-style:italic;}

</style>

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<script type="text/javascript">

//$("span").addClass("italictext");

//실행안됨. : 문서가 준비안되서 이시점에 <span>태그를 모름.

/*$(document).ready(test); //문서가 준비되면 test함수를 호출하라. // window.onload = function(){ test(); } 과 비슷함

function test(){

$("span").addClass("italictext");

}*/

$(document).ready(function(){ //이름없는 함수. ( 익명함수 )

$("span").addClass("italictext");

console.log("$가 뭐니 ?\n"+$);

/* 크롬에서 출력 결과

$가 뭐니 ?

function ( selector, context ) {

// The jQuery object is actually just the init constructor 'enhanced'

return new jQuery.fn.init( selector, context, rootjQuery );

} jQuery.html:25

*/

}); //문서가 준비되면 test함수를 호출하라. // window.onload = function(){ test(); } 과 같음

</script>

</head>

<body>

<span>Sample</span>

<script type="text/javascript">

//body끝에서는 문서가 준비되었기때문에 실행됨.

$("span").addClass("redtext");

</script>

</body>

</html>

==========

그래서 문서가 준비된후에 스타일을 적용했기때문에.

정의 해놓은 2개의 스타일이 적용된것을 볼수있습니다.

.redtext{color:#F00;} /*#FF0000*/

.italictext{font-style:italic;}

저작자표시 비영리

'it' 카테고리의 다른 글

수의 표현, 디지털 수 체계  (0) 2023.03.08
2진수를 10진수로 변환  (0) 2023.03.07
입출력 프로그래밍  (0) 2023.03.05
부트 진행과정  (0) 2023.03.05
2계층 WAN 프로토콜  (0) 2023.03.04
댓글