jQuery - $(문서) 간의 차이점은 무엇입니까?준비 완료 및 $($).load?

jQuery - $(문서) 간의 차이점은 무엇입니까?준비 완료 및 $($).load?

사이의 차이점은 무엇입니까?

$(document).ready(function(){
 //my code here
});

그리고.

$(window).load(function(){
  //my code here
});

---

그리고 저는 다음 사항을 확인하고 싶습니다.

$(document).ready(function(){

}) 

그리고.

$(function(){

}); 

그리고.

jQuery(document).ready(function(){

});

똑같습니다.

그들 사이에 어떤 차이점과 유사점이 있는지 말씀해 주시겠습니까?

$(document).ready(function() {
  // executes when HTML-Document is loaded and DOM is ready
  console.log("document is ready");
});


$(window).load(function() {
  // executes when complete page is fully loaded, including all frames, objects and images
  console.log("window is loaded");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

3.0 버전 쿼리

변경 사항 중단: .load(), .unload() 및 .error()가 제거되었습니다.

이러한 메서드는 이벤트 작업을 위한 바로 가기이지만 몇 가지 API 제한이 있었습니다.이벤트.load()아약스와 충돌하는 방법.load()방법.그.error()메서드를 사용할 수 없습니다.window.onerrorDOM 방법이 정의된 방식 때문입니다.이러한 이름으로 이벤트를 첨부해야 하는 경우.on()방법(예: 변경)$("img").load(fn)로.$(img).on("load", fn).¹

$(window).load(function() {});

다음으로 변경해야 합니다.

$(window).on('load', function (e) {})

다음은 모두 동일합니다.

$(function(){
}); 

jQuery(document).ready(function(){
});

$(document).ready(function(){
});

$(document).on('ready', function(){
})

document.readyjQuery 이벤트이며, DOM이 준비될 때 실행됩니다. 예를 들어 모든 요소가 검색/사용될 수 있지만 모든 콘텐츠가 필요한 것은 아닙니다.
window.onload이미지 등이 로드될 때 나중에(또는 최악/최악의 경우 동시에) 화재가 발생합니다.예를 들어 이미지 차원을 사용하는 경우 이를 대신 사용하려는 경우가 많습니다.

관련 질문도 읽어 보십시오.
$(window).load()와 $(문서)의 차이입니다.준비된 기능

이 세 가지 기능은 동일합니다.

$(document).ready(function(){

}) 

그리고.

$(function(){

}); 

그리고.

jQuery(document).ready(function(){

});

여기서$정의에 사용됩니다.jQuery맘에 들다$=jQuery.

이제 차이점은

• $(document).ready다음 시간에 실행되는 jQuery 이벤트입니다.DOM로드되므로 문서 구조가 준비되면 실행됩니다.
• $(window).load페이지에 이미지, 이미지 등이 포함된 것처럼 전체 콘텐츠가 로드된 후 이벤트가 발생합니다.

jQuery API 문서에서

JavaScript가 제공하는 반면load페이지가 렌더링될 때 코드를 실행하기 위한 이벤트입니다. 이 이벤트는 이미지와 같은 모든 자산이 완전히 수신될 때까지 트리거되지 않습니다.대부분의 경우 DOM 계층 구조가 완전히 구성되는 즉시 스크립트를 실행할 수 있습니다.처리기 전달 대상.ready()DOM이 준비된 후에 실행되도록 보장되므로, 일반적으로 다른 모든 이벤트 핸들러를 연결하고 다른 jQuery 코드를 실행하는 데 가장 적합합니다.CSS 스타일 속성 값에 의존하는 스크립트를 사용하는 경우 스크립트를 참조하기 전에 외부 스타일시트를 참조하거나 스타일 요소를 포함하는 것이 중요합니다.

코드가 로드된 자산에 의존하는 경우(예: 이미지 치수가 필요한 경우), 코드는 다음을 위한 핸들러에 배치되어야 합니다.load이벤트를 대신합니다.

---

두 번째 질문에 대한 대답 -

아니요, 충돌 없음 모드에서 jQuery를 사용하지 않는 한 동일합니다.

:$(document).ready()그리고.$(window).load()는 수는내부포코다니드입에 입니다.$(window).load()전체 페이지(이미지, 프레임, 스타일시트 등)가 로드되면 실행되는 반면, 문서 준비 이벤트는 모든 이미지, 프레임 등이 로드되기 전에 실행되지만 전체 DOM 자체가 준비된 후에 실행됩니다.

---

$(document).ready(function(){

}) 

그리고.

$(function(){

});

그리고.

jQuery(document).ready(function(){

});

위의 3가지 코드는 차이가 없습니다.

동일하지만 다른 JavaScript Framework에서 바로 가기 이름으로 동일한 달러 기호 $를 사용하는 경우 충돌이 발생할 수 있습니다.

jQuery.noConflict();
jQuery.ready(function($){
 //Code using $ as alias to jQuery
});

$(document).ready(function(e) { 
    // executes when HTML-Document is loaded and DOM is ready  
    console.log("page is loading now"); 
});

$(document).load(function(e) { 
    //when html page complete loaded
    console.log("completely loaded"); 
});

준비 이벤트는 항상 html 페이지만 브라우저에 로드되고 기능이 실행될 때 실행됩니다.그러나 페이지에 대한 모든 페이지 내용이 브라우저에 로드될 때 로드 이벤트가 실행됩니다. ...jquery 스크립트에서 noconflict() 메서드를 사용할 때 $ 또는 jQuery를 사용할 수 있습니다.

달러(약)load는 DOM과 페이지의 모든 콘텐츠(모든 것)가 CSS, 이미지 및 프레임처럼 완전히 로드될 때 실행되는 이벤트입니다.한 가지 가장 좋은 예는 실제 이미지 크기를 얻거나 사용하는 모든 세부 정보를 얻는 것입니다.

달러(약)ready()는 DOM이 로드되고 스크립트에 의해 조작될 준비가 되면 코드가 실행되어야 함을 나타냅니다.jQuery 스크립트를 실행하기 위해 이미지가 로드될 때까지 기다리지 않습니다.

<script type = "text/javascript">
    //$(window).load was deprecated in 1.8, and removed in jquery 3.0
    // $(window).load(function() {
    //     alert("$(window).load fired");
    // });

    $(document).ready(function() {
        alert("$(document).ready fired");
    });
</script>

달러(약)$($) 이후에 발생한 부하입니다.준비가 된

$(document).ready(function(){

}) 
//and 
$(function(){

}); 
//and
jQuery(document).ready(function(){

});

위의 3은 동일하며 $는 jQuery의 별칭입니다. 다른 JavaScript Framework에서 동일한 달러 기호 $를 사용할 경우 충돌이 발생할 수 있습니다.충돌이 발생할 경우 jQuery 팀에서 충돌 없는 솔루션을 제공합니다. 자세한 내용은 다음과 같습니다.

달러(약)로드는 1.8에서 더 이상 사용되지 않으며 jquery 3.0에서 제거되었습니다.

언급URL : https://stackoverflow.com/questions/8396407/jquery-what-are-differences-between-document-ready-and-window-load