체이닝과 메서드 / 페이지 로드 이벤트 비교
체이닝
동일한 셀렉터에 여러 개의 메서드를 적용하는 과정
$('li[id!="one"]').hide().delay(500).fadeIn(1400);
* 해석 id 속성이 one인 li 요소를 500초 뒤에 fadeIn 효과로 숨긴다.
페이지 준비되었는지 확인하기
jQuery의 .ready() 메서드는 페이지가 코드를 실행할 준비가 되었는지 검사
$(document).ready(function(){
// 여기에 스크립트를 작성한다.
});
load 이벤트 vs .ready() 메서드 vs 닫는 body태그 전에 작성
1. load 이벤트
이 방법은 스크립트가 반드시 로드되어야 하는 리소스에 의존적일 때 사용.
예를 들어 스크립트가 이미지의 크기를 알아야된다면 이미지는 반드시 로드가 되어야 크기를 파악 할 수 있기 때문에
이미지의 크기를 알아야되는 경우 등에 load 이벤트를 사용하는 것이 바람직하다.
2. .ready() 메서드
페이지가 빨리 로드된 것처럼 보이도록 브라우저에 DOM이 로드되자마자 실행되기 때문에 (다른 리소스가 로딩될 때까지 기다리지 않는다.) DOMContentLoaded 이벤트가 지원되면 jQuery는 해당 이벤트에 대한 리스너를 생성한다. 그러나 이 이벤트는 최신 브라우저에서만 지원된다. 구 버전의 브라우저에서는 load이벤트가 발생할 때까지 기다린다.
# document 객체의 ready 이벤트 메서드에 대한 약식 표현
//1
$(function(){
// 여기에 스크립트를 작성한다
});
//2
$(document).ready(){};
* 1이 2의 약식표현임
3. 닫는 body태그 전에 작성
스크립트를 페이지 하단에 닫는 body 태그 전에 작성하면 HTML은 스크립트가 실행되기 전에 DOM에 로드된다.
그러나 사람들이 .ready() 메서드를 많이 활용하는 것을 보게 될 텐데. 이는 스크립트를 페이지의 다른 어딘가로 옮기더라도 실행에 문제가 없기 때문이다.