jquery $(document).ready() 와 onload의 차이점은 무엇입니까

차이점: window.onload에는 간단한 작성 방법이 없습니다. 이미지를 포함한 페이지의 모든 요소가 로드될 때까지 기다려야 실행될 수 있습니다. 그리고 "$(document).ready()"는 "$(function(){})"로 축약될 수 있는데, 이는 DOM 구조가 로드될 때까지 기다리지 않고 DOM 구조가 그려진 후에 실행됩니다.

추천 튜토리얼: jquery 비디오 튜토리얼

jquery $(document).ready()와 window.onload의 차이점

1. window.onload는 반드시 wait wait는 이미지를 포함한 페이지의 모든 요소가 로드된 후에만 실행될 수 있습니다. $(document).ready()는 DOM 구조가 그려진 후 로드될 때까지 기다릴 필요 없이 실행됩니다.

2. 쓰기 횟수가 다릅니다.

window.onload는 동시에 여러 번 작성할 수 없습니다.

$(문서). Ready()는 동시에 여러 번 작성할 수 있으며 모두 실행할 수 있습니다

3. 단순화된 작성

window.onload 단순화된 작성이 없습니다

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

지침:

문서를 로드하는 브라우저를 예로 들어 보겠습니다. 페이지가 로드된 후 브라우저는 JavaScript를 통해 DOM 요소에 이벤트를 추가합니다. 일반 JavaScript 코드에서는 주로 window.onload 메서드를 사용하지만, jQuery에서는 $(document).ready() 메서드를 사용합니다.

$(document).ready() 메소드와 window.onload 메소드는 기능은 비슷하지만 실행 시점에 차이가 있습니다. window.onload 메소드는 웹 페이지의 모든 요소(요소의 관련 파일 포함)가 브라우저에 완전히 로드된 후에 실행됩니다. 즉, JavaScript는 현재 웹 페이지의 모든 요소에만 액세스할 수 있습니다. jQuery에서 $(document).ready() 메소드를 통해 등록된 이벤트 핸들러는 DOM이 완전히 준비되면 호출할 수 있습니다. 이 시점에서 웹 페이지의 모든 요소는 jQuery에 액세스할 수 있지만 이것이 해당 요소와 관련된 파일이 다운로드되었다는 의미는 아닙니다.

예를 들어, 웹 페이지의 모든 사진에 특정 동작(예: 사진을 클릭하면 사진을 숨기거나 표시하는 등)을 추가하는 대형 사진 갤러리 웹사이트가 있습니다. window.onload 메서드를 사용하는 경우 사용자는 계속 진행하기 전에 각 이미지가 로드될 때까지 기다려야 합니다. jQuery에서 $(document).ready() 메소드를 사용하여 설정하면 모든 이미지가 다운로드될 때까지 기다리지 않고 DOM이 준비되는 즉시 작동할 수 있습니다. 분명히 웹페이지를 DOM 트리로 구문 분석하는 것은 웹페이지에 관련된 모든 파일을 로드하는 것보다 훨씬 빠릅니다.

또 주의할 점은 $(document).ready() 메소드에 등록된 이벤트는 DOM이 준비된 상태에서만 실행되기 때문에 이때 해당 요소의 관련 파일이 다운로드되지 않을 수 있다는 점입니다. 예를 들어, 이미지와 관련된 HTML을 다운로드하여 DOM 트리로 파싱했지만, 이미지가 아직 로드되지 않았을 가능성이 높으므로 이때 이미지의 높이, 너비 등의 속성이 유효하지 않을 수 있습니다. 시간. 이 문제를 해결하려면 JQuery의 또 다른 페이지 로딩 메소드인 load() 메소드를 사용할 수 있습니다. load() 메서드는 핸들러 함수를 요소의 onload 이벤트에 바인딩합니다. 핸들러 함수가 창 개체에 바인딩된 경우 모든 콘텐츠(창, 프레임, 개체, 이미지 등 포함)가 로드된 후에 트리거됩니다. 요소의 콘텐츠가 로드됩니다. jQuery 코드는 다음과 같습니다.

$(window).load(function () {
    //编写代码
})

JavaScript의 다음 코드와 동일합니다.

window.onload = function () {
    //编写代码
}

웹 페이지에 두 개의 함수가 있다고 가정하면 JavaScript 코드는 다음과 같습니다.

function one() {
    alert("one");
}
function two() {
    alert("two");
}

웹 페이지가 로드되면 하나의 함수가 function과 two는 각각 자바스크립트 코드를 통해 호출됩니다. Function:

window.onload = one;
window.onload = two;

그런데 코드를 실행한 후 문자열 "two" 대화 상자만 나타나는 것을 발견했습니다.

문자열 "one" 대화 상자가 표시되지 않는 이유는 JavaScript의 onload 이벤트가 한 번에 하나의 함수에 대한 참조만 저장할 수 있기 때문입니다. 자동으로 이전 함수를 이후 함수로 덮어쓰므로 추가할 수 없습니다. 기존 행동에.

두 함수의 순차적 트리거 효과를 얻으려면 새로운 JavaScript 메서드를 생성해야만 얻을 수 있습니다. JavaScript 코드는 다음과 같습니다.

window.onload = function () {
    one();
    two();
}

이런 방식으로 작성된 코드는 특정 문제를 해결할 수 있지만 여전히 특정 요구 사항을 충족할 수 없습니다. 예를 들어, 여러 개의 JavaScript 파일이 있고 각 파일은 window.onload 메서드를 사용해야 합니다. 이 경우 위에서 언급한 방법을 사용하여 코드를 작성하는 것은 매우 번거로운 작업입니다. Javascript 공유 onload 이벤트를 참조할 수 있으며 jQuery의 $(document).ready() 메서드는 이러한 상황을 잘 처리할 수 있습니다. $(document).ready() 메서드를 호출할 때마다 기존 동작에 새로운 동작이 추가됩니다. , 이러한 동작 함수는 등록된 순서에 따라 순차적으로 실행됩니다. 예를 들어 다음 jQuery 코드는 다음과 같습니다.

function one() {
    alert("one");
}
function two() {
    alert("two");
}
$(document).ready(function () {
    one();
});
$(document).ready(function () {
    two();
})

코드를 실행하면 "one"이라는 문자열 대화 상자가 나타나고, 이어서 "two"라는 문자열 대화 상자가 나타납니다.

더 많은 프로그래밍 관련 지식을 보려면 다음 페이지를 방문하세요. :

프로그래밍 튜토리얼

! !

위 내용은 jquery $(document).ready() 와 onload의 차이점은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!