[제이쿼리] 자동 실행 함수 (window.onload, $(document).ready())

window.onload

Javascript에서 페이지가 로드되면 자동으로 실행되는 함수를 구현할 때엔 전역 콜백함수인 window.onload함수를 사용합니다.

실행시점

모든 요소들이 로드된 이후에 호출된다.

특징

1. 페이지의 모든 요소들이 로드되어야 호출된다. 
2. 한 페이지에서 하나의 window.onload()함수만 적용된다.

사용법

아래와 같이 익명함수 형태로 사용한다.

window.onload = function () {
	자바스크립트 코드...
}

 

$(document).ready()

jQuery는 자바스크립트의 window.onload 함수의 문제점을 해결하기 위해 $(document).ready() 함수를 제공한다.

 

실행시점

DOM 요소들만 로드되면 호출된다.

특징

1. 외부 리소스 및 이미지 로딩과 상관없이 DOM만 로드되면 바로 실행된다.
2. 중복 사용해도 순서대로 모두 실행된다.

사용법

$(document).ready(function(){

}); 

//생략하면.. 
$().ready(function(){
}); 

//더 생략하면.. 
$(function(){

});

 

Jquery에서 $의 의미는?

$ 의 의미는 jquery에서 사용하겠다는 의미가 내포되어 있습니다.
즉, $를 jquery만 사용하는 것이 아니라 다른 라이브러리에서도 사용할 수 있기 때문이에요.
만약 prototype.js 랑 jquery를 같이 사용하는 경우에는  $가 충돌이 발생하는 것입니다.
함수로 $를 매개변수로 해서 넘기는 것이며 $의 의미는 jquery 객체로 사용이 되는 것이다.

prototype.js 와 jquery로 프로그래밍을 함께 병행하실 때

(function($){

   이 안에서만 jquery를 자유롭게 사용

})(jQuery);