Jquery 준비 함수를 작성하는 방법에는 여러 가지가 있습니다.-프런트엔드 Q&A-php.cn

Jquery 준비 함수를 작성하는 방법에는 여러 가지가 있습니다.

青灯夜游

풀어 주다： 2022-11-25 20:38:08

원래의

1819명이 탐색했습니다.

jquery 준비 함수에는 세 가지 작성 방법이 있습니다. 1. "$(document).ready(function(){//ready code});"를 작성하는 완전한 방법 2. 문서를 생략하는 방법은 " $().ready(function( ){//Ready code});"; 3. document와 Ready()가 모두 생략된 경우 작성 방법 "$(function(){//Ready code});"

Jquery 준비 함수를 작성하는 방법에는 여러 가지가 있습니다.

이 튜토리얼의 운영 환경: windows7 시스템, jquery3.6.1 버전, Dell G3 컴퓨터.

jquery 문서 준비 기능

때때로 HTML 페이지에서 JS 코드를 실행하기 전에 페이지의 모든 Html 내용이 로드될 때까지 기다려야 할 때가 있습니다. 이때 jQuery는 document라는 기능을 제공합니다. 준비되었습니다. 이 문제는 쉽게 해결할 수 있습니다.

예:

<script type="text/javascript">
$(document).ready(function () {
//文档就绪后直接运行的JS代码
});
</script>

로그인 후 복사

$: jquery 로고
onload: 외부 리소스(그림, 문서 등 파일)를 포함하여 페이지의 모든 콘텐츠를 로드합니다.
먼저 모든 콘텐츠와 외부 리소스를 로드합니다. 페이지에서 js 코드 로드
ready(문서 준비 기능): 외부 리소스를 제외하고 페이지의 콘텐츠 로드()
먼저 페이지의 모든 태그 콘텐츠를 로드한 다음 js 코드를 로드합니다. 그리고 마지막으로 외부 리소스를 로드합니다

다음 사례 코드:

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title></title>
		<script src="js/jquery-3.6.1.min.js"></script>
		<script type="text/javascript">
			$(document).ready(
				function() { //文档就绪后直接运行的代码
					function f1() {
						var div1 = document.getElementById("div1");
						div1.innerText = "Hello";
					}
					f1();
				});
		</script>
	</head>
	<body>
		<div id="div1"></div>
	</body>
</html>

로그인 후 복사

HTML 문서가 완전히 로드된 후 HTML 문서의 코드를 실행하려면 jQuery의 Ready() 메서드를 사용하세요. 이렇게 하면 존재하지 않는 요소를 검색할 수 없습니다.

Jquery 준비 함수를 작성하는 방법에는 여러 가지가 있습니다.

jQuery에서는 $(document).ready(function () {})를 다음과 같이 생략할 수 있습니다.

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

로그인 후 복사

코드 크기 측면에서 두 번째 유형이 더 작아서 추천할만한 가치가 있습니다.

위의 jQuery 코드를 사용하는 것으로 볼 때 jQuery는 JS 코드를 더 간단하게 만들고 더 적은 코드를 요구하므로 JS 코드 전체를 더 쉽게 개발하고 유지 관리할 수 있습니다.

요약: 문서 준비 기능을 작성하는 방법에는 세 가지가 있습니다

문서 준비 기능의 첫 번째 작성 형식

$(document).ready(function(){
alert("文档就绪函数第一种书写方法");
})

로그인 후 복사

문서 준비 기능의 두 번째 작성 방법

$().ready(function(){
alert("文档就绪函数第二种书写方法");
})

로그인 후 복사

문서 준비 기능의 세 번째 작성 방법 문서 준비 기능

$(function(){
alert("文档就绪函数第三种书写方法");
})

로그인 후 복사

【 추천 학습: jQuery 동영상 튜토리얼, 웹 프론트엔드 동영상】

위 내용은 Jquery 준비 함수를 작성하는 방법에는 여러 가지가 있습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!