> 웹 프론트엔드 > JS 튜토리얼 > JS 및 jQuery 문서가 로드될 때 코드를 작성하는 방법은 무엇입니까?

JS 및 jQuery 문서가 로드될 때 코드를 작성하는 방법은 무엇입니까?

yulia
풀어 주다: 2018-09-13 18:00:05
원래의
1207명이 탐색했습니다.


HTML에는 실행 순서가 있으며 기본값은 하향식 실행입니다. 따라서 js 코드가 html 코드 아래에 있으면 정상적으로 실행될 수 있지만, js 코드가 html 코드 위에 있으면 정상적으로 실행될 수 없습니다. 이때 문서가 로드될 때까지 기다려야 합니다.

1. jQuery 프레임워크를 도입하지 않고 네이티브 JS 코드만 작성할 때는 윈도우 객체의 onload 이벤트를 사용해야 합니다

window.onload = function(){
  //要执行的js代码段  
}
로그인 후 복사
# 🎜🎜# (참고: 사용시 window.onload를 onload로 직접 줄여서 쓸 수도 있지만 모호함과 불필요한 오류를 방지하기 위해 window를 작성하는 것이 가장 좋습니다)

2. jQuery를 도입할 때, 여러 가지 방법으로 작성할 수 있는데, 여기에 가장 복잡한 방법 중 하나(다른 쓰기 방법은 기본적으로 이것의 변형임)와 가장 일반적인 두 가지 쓰기 방법이 있습니다.

1. 방법:

(function($,window,document,undefined){
    //要执行的js代码段
})(jQuery,window,document);
로그인 후 복사

(1) 처음에 세미콜론을 사용하는 목적은 다른 파일의 명령문 마지막 줄에 오류가 없기 때문에 병합된 구문이 병합되는 것을 방지하는 것입니다. 여러 파일이 압축되거나 병합되지 않도록 할 수 있으므로 이 세미콜론을 쓸 필요가 없습니다.)

(2) 이는 일반적으로 익명 함수의 자체 실행입니다. Node.js 라이브러리는 내부 변수

🎜🎜#(3)을 보호하기 위해 이것을 사용합니다. 형식 매개변수의 $는 jQuery의 약어입니다. 여기서 $도 사용합니다. $Variable 충돌을 피하기 위한 jQuery 객체는 여러 플러그인이 정상적으로 실행될 수 있도록 보장합니다(jQuery만 도입된 경우에는 이 내용을 작성할 필요가 없습니다).

(4). window 및 document는 각각 전역 환경에 있으며 함수 본문의 window 및 document는 실제로 전역 창 또는 문서 객체가 아닌 지역 변수입니다. 이렇게 하면 성능이 향상되고 범위 쿼리 시간이 단축될 수 있다는 장점이 있습니다(함수 본문에서 창이나 문서 개체를 여러 번 호출해야 하는 경우 창이나 문서 개체를 매개 변수로 전달하는 것이 매우 필요합니다. 이 두 객체는 ​​코드에서 사용되지 않으므로 이 두 매개변수를 전달할 필요가 없습니다)

(5) undef를 사용하는 이유:

①Because undefed입니다. 윈도우의 속성. 지역 변수로 선언된 후 함수에 undefine과 비교되는 다른 변수가 있는 경우 프로그램은 윈도우 아래에서 undefine을 검색할 필요가 없으므로 프로그램의 성능을 향상시킬 수 있습니다.

②undefine은 일부 이전 버전에서 지원되지 않으며, 직접 사용할 경우 오류가 발생합니다. js 프레임워크에서는 호환성 문제를 고려해야 하므로 형식 매개변수 undefine


2이 추가됩니다. 더 일반적으로 사용되는 작성 방법:

$(document).ready(function(){
    //要执行的js代码段
});
로그인 후 복사
# 🎜🎜# (참고: ① js 프레임워크로 jQuery만 도입할지 확실하지 않은 경우 코드의 $를 다음과 같은 매개변수 형식으로 전달할 수 있습니다. 복잡한 글쓰기, ② 코드 내 문서 생략 가능)

#🎜🎜 #3. 가장 간단한 작성 방법:

$(function(){
    //要执行的js代码段
});
로그인 후 복사

(참고: 자세한 내용은 위 방법과 동일합니다. )

3. 요약: 문서를 로드한 후 작성하는 방법에는 여러 가지가 있을 수 있으므로 실제 상황과 개인 습관에 따라 사용해야 합니다.

위 내용은 JS 및 jQuery 문서가 로드될 때 코드를 작성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿