ready
원문 링크 
http://api.jquery.com/ready/
개요 : DOM 전체가 로드되면 기능이 실행됩니다.
- .ready( handler )
- handler DOM 이 준비되면 실행될 기능(function).
JavaScript는 페이지가 렌더링되면 코드를 실행하기 위해 "load" 이벤트를 제공하고 있지만, 이미지들이 모두 내려받아지는 것과 같이 페이지 표시 준비가 완벽하게 모두 끝났을 때까지 발생하지 않습니다. 대부분의 경우, DOM 계층 구조가 완전히 구축된 직후에 이 스크립트를 실행할 수 있습니다. 핸들러를 .ready() 함수에 전달하면 DOM 이 준비된 후에 그 함수가 반드시 실행됩니다. 따라서 이 함수는 다른 이벤트 핸들러를 추가하거나 또 다른 jQuery 코드를 위치시키기에 최적의 장소가 됩니다. CSS 스타일 속성값에 의존하는 스크립트를 사용하면 스크립트를 참조하기 전에 외부 스타일시트 또는 임베디드 스타일의 요소를 참조하는 것이 아주 중요합니다.
마지막 구절이 무슨 말인지 좀 애매하네요. CSS 를 이용해서 무슨 작업을 하는 스크립트를 작성하게 되면, 그때는 스타일시트를 유심히 보고 잘 찾아써야 한다는 정도로 보면 될까요?
로드가 완료된 다음에 할 수 있는 작업을 하려면 (예를 들어, 이미지 크기가 필요한), load 이벤트 대신에 핸들러에 위치시켜야 합니다.
.ready()함수는 일반적으로<body onload="">와 동시에 사용하기에는 부적합 합니다. 만약load를 반드시 사용해야 한다면,.ready()를 사용하지 않거나,load이벤트에 연결할 jQuery의.load()함수를 사용하거나 images와 같은 보다 구체적인 항목에 사용해야 합니다.
아래 구문 3가지는 모두 동일한 것입니다.
$(document).ready(handler)-
$().ready(handler)(this is not recommended) $(handler)
$(document).bind("ready", handler) 형태도 있습니다. 이 예문은 한가지 예외를 제외하고는 위 코드들과 동일하게 작동합니다. ready 이벤트가 실행될 준비가 되었고 .bind("ready") 를 시도해도 이것은 실행되지 않습니다. 이런 식으로 준비된 Ready 핸들러는 위의 세가지 방법에 의해 바인딩된 후에 실행되게 됩니다.
.ready() 함수는 document 요소로 호출할 수 있습니다. 그래서 선택자를 생략할 수도 있습니다.
.ready() 함수는 일반적으로 anonymous 기능 형태로 사용할 수 있습니다.
$(document).ready(function() {
// Handler for .ready() called.
});아래 예제도 사용 가능합니다.
$(function() {
// Handler for .ready() called.
});만약 .ready() 함수가 DOM 이 초기화 된 후에 호출되었다면, 전달된 새로운 핸들러는 그 즉시 실행이 됩니다.
Aliasing the jQuery Namespace
다른 JavaScript 라이브러리와 같이 사용해야 한다면, $.noConflict() 함수를 사용하여 네임스페이스의 충돌을 피할 수 있습니다. 이 함수를 호출하면, $ 표현은 더 이상 사용하지 못합니다. $ 대신 jQuery 라고 대신 명시적으로 사용해야 합니다. 하지만, .ready() 함수에 전역변수 jQuery 를 인자로 핸들러에 전달하면 사용할 수 있습니다. 이 의미는 다른 코드에 영향을 주지않고 .ready() 핸들러에서 객체명을 새로 명명해서 사용할 수 있다는 얘기입니다. 아래 예제를 보시면 간단하게 이해하실 수 있습니다.
jQuery(document).ready(function($) {
// Code using $ as usual goes here.
});function($)로 받았기 때문에 이 함수 안에서는 이제 $를 사용할 수 있게 된다는 얘기입니다.
예 제
DOM이 모두 로드되면 메시지를 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>p { color:red; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function () {
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>
</head>
<body>
<p>Not loaded yet.</p>
</body>
</html>미리보기
짜잔 로드된 후에 텍스트가 뿌려졌습니다. 별거 아니에요. 그쵸?
주저리 주저리 설명이 길었지만 핵심은 문서가 로드되고 실행시키고 싶은게 있으면 이 함수를 사용하라는 얘기네요. body의 onload 함수네요. 대신 더 안정적이다라는 거구요. 사실 onload함수가 좀 불안정하긴 하죠.
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| submit(), 폼 전송 이벤트 (1) | 2012.03.09 |
|---|---|
| select(), 텍스트 드래그 이벤트 (2) | 2012.03.09 |
| scroll(), 스크롤 이벤트 (3) | 2012.03.06 |
| resize(), 사이즈 바꾸기 (0) | 2012.03.06 |
| one(), 이벤트 발생하면 바인딩 자동해제 (0) | 2012.02.24 |
| on(), 이벤트 바인딩 하기 (0) | 2012.02.24 |
| off(), 이벤트 해제하기 (0) | 2012.02.24 |
| jQuery API - mouseup(), 마우스를 눌렀다 뗄 때 (0) | 2012.01.13 |