jQuery_jquery에서 문서와 창, 로드 및 준비의 차이점에 대한 자세한 설명

JavaScript를 사용해 본 아이들은 window 객체와 document 객체를 알아야 하고, load 이벤트와 Ready 이벤트도 들어봤을 것입니다. 물론 Xiaocai도 그것을 잘 알고 있다고 생각합니다. 최근에 그는 그것이 사실이 아니라는 것을 깨달았습니다.

먼저 윈도우와 문서에 대해 이야기해보자. 직관적으로 말하면 윈도우는 브라우저 윈도우를 나타내고, 문서는 브라우저 윈도우에 로드되는 DOM 요소를 나타낸다. 최상위 개체입니다.

둘의 차이점은 무엇인가요? 지금 브라우저가 있고 그 안에 로드된 페이지가 매우 길어서 한 화면을 초과한다고 가정하면 당연히 이때 $(window).height() 및 $(가 나타납니다. document). height()가 같지 않으면 창이 항상 크기 때문에 문서의 높이는 창의 높이보다 커야 합니다. 아래 사진을 참조하세요:

로드 이벤트와 준비 이벤트에 대해 이야기해 보겠습니다(여기서는 로드 및 준비는 jQuery 이벤트를 참조하세요. 아래도 동일합니다).

먼저 로드에 대해 이야기해 보겠습니다. 로드 이벤트는 주로 기본 window.onload를 대체하는 데 사용됩니다.

·창문 개체 위에. 예를 들어 $(window).load(fn);.

· URL이 포함된 요소(이미지, 스크립트, 프레임, iframe). 예를 들어 $("img").load(fn);.

또한 다음과 같은 요소에 대한 로드 이벤트가 없습니다. $(document).load(fn); 이는 잘못된 쓰기이므로 전혀 실행되지 않습니다.

페이지가 실행되기 전에 로드 이벤트가 완전히 로드되어야 합니다. 소위 완전 로드는 DOM 구조가 로드될 뿐만 아니라 모든 링크 참조도 로드된다는 의미입니다. 예를 들어, 페이지에 많은 수의 사진이 있는 경우 각 사진이 완전히 로드될 때까지 기다려야 합니다.

가장 중요한 점은 jQuery 공식 문서에 로드 이벤트의 브라우저 간 호환성이 매우 좋지 않다고 명시되어 있다는 것입니다(브라우저 간 일관되거나 안정적으로 작동하지 않습니다). Xiaocai 테스트 후 Google Chrome은 $(window).load(fn);만 지원하는 반면 Firefox는 $(window).load(fn); 및 $("img").load(fn);을 지원합니다.

따라서 꼭 필요한 경우가 아니면 로드 이벤트를 사용하지 않는 것이 좋습니다.

마지막으로 Ready 이벤트는 $(window).ready(fn);, $(document).ready(fn);, $(“div”)와 같은 모든 요소에 추가될 수 있습니다. .ready(fn ); 등.

ready 이벤트에서는 페이지를 완전히 로드할 필요가 없으며 DOM 구조를 트리거하기 위해 로드하기만 하면 됩니다.

여러 개의 준비된 이벤트를 동시에 등록할 수 있으며, 실행 시 등록된 순서대로 실행됩니다. 서로 다른 요소의 Ready 이벤트를 등록하더라도 순서대로 실행되므로 주의하세요. 예를 들어 다음 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

$(window).ready(함수(){
경고("창");
});
$(문서).ready(함수(){
경고("문서");
});
$("div").ready(함수(){
경고("div");
});

상식적으로는 div가 먼저 로드되어야 하므로, 가장 먼저 Alert("div")가 실행되고 그 다음에 Alert("document") 또는 Alert("window");가 실행되지만, 아쉽게도 Alert( "div")는 마지막으로 실행된 것입니다. 따라서 동일한 요소에 Ready 이벤트가 등록되어 있는지 여부에 관계없이 등록된 순서대로 실행됩니다.

마지막 항목인 준비 이벤트는 window.onload(또는 )와 충돌합니다. window.onload(또는 )를 사용하면 다음과 같은 문제가 발생합니다. 준비 이벤트가 실행되지 않습니다.

많은 논의 끝에 $(document).ready(fn);가 가장 좋은 호환성과 보안을 갖고 있다는 것이 입증되었습니다. 그런 필요성이 있다면 이 방법을 사용해 보세요.