HTML 페이지가 로드된 후 특정 js_javascript 기술을 구현하는 두 가지 방법

js 메서드:

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

다음은 jQuery 파일을 참조해야 하는 jQuery 메소드입니다.

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

또는 약어

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

$(function(){
var userName="xiaoming";
alert(userName);
})

dom이 로드될 때 완료되자마자(window.onload보다 먼저) 실행할 수 있습니다. .ready()는 같은 페이지에 여러 번 나타날 수 있습니다.

PS: 이 둘의 주요 차이점은

window.onload:

문서가 완전히 다운로드될 때입니다. 브라우저 window.onload 이벤트는 다음 경우에만 트리거됩니다. 이는 페이지의 모든 요소가 js에 대해 작동 가능하다는 것을 의미하며, 이는 페이지의 모든 요소가 로드될 때까지 실행되지 않음을 의미합니다. 이러한 상황은 로딩 순서를 고려할 필요가 없기 때문에 기능적 코드를 작성하는 데 매우 유리합니다. ,

$(document).ready{ }:

은 DOM이 완전히 준비되어 사용할 준비가 되면 호출됩니다. 이는 스크립트에서 모든 요소에 액세스할 수 있다는 의미이기도 하지만 모든 관련 파일이 다운로드되었다는 의미는 아닙니다. 즉, HMTL이 다운로드되어 DOM 트리로 구문 분석된 후에 코드가 실행됩니다.

예를 들어보세요:

갤러리를 나타내는 페이지가 있다고 가정해 보겠습니다. 이 페이지에는 jQuery를 통해 이러한 이미지를 숨기거나 표시하거나 조작할 수 있습니다. 온로드 페이지를 통해 인터페이스를 설정하는 경우 사용자는 이 페이지를 사용하기 전에 각 이미지가 다운로드될 때까지 기다려야 합니다. 더 나쁜 것은 기본 동작(예: 링크)이 있는 요소에 동작이 약간 추가되면 사용자 상호 작용으로 인해 예기치 않은 결과가 발생할 수 있다는 것입니다. 그러나 $(document).ready(){ }를 설정하려고 시도하면 인터페이스가 더 일찍 올바른 동작으로 준비됩니다.

$(document).ready(){ }를 사용하는 것이 일반적으로 onload 이벤트 핸들러를 사용하는 것보다 낫지만 지원 파일이 아직 완료되지 않았을 수 있으므로 이미지와 같은 속성과 같은 것이 있다는 점을 분명히 해야 합니다. 현재 높이와 너비가 반드시 유효한 것은 아닙니다.

참고: 페이지 하단에 js를 배치하고 defer="defer"를 사용하면 문제가 발생합니다. 위의 기능을 사용하는 것이 더 좋습니다!