简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > 프런트엔드 Q&A > 본문

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

青灯夜游
풀어 주다： 2022-11-25 20:38:08
원래의
1790명이 탐색했습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
javascript jquery
원천：php.cn
이전 기사："+" CSS 선택기란 무엇입니까? 다음 기사：vue는 요소가 가시 영역에 있는지 어떻게 확인합니까?
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
Javascript/Jquery를 사용하여 버튼 없이 양식 제출 JavaScript 함수를 호출하고 JQUERY/PHP를 사용하여 양식을 실행하여 버튼 없이 양식을 제출하려고 합니다. 페이지를 다시 로드하지 않고 백엔드에서 양...
에서 2024-04-06 14:54:03
0
2
421
jquery를 사용하여 HTML 데이터 테이블에서 선택되지 않은 행의 값을 검색하는 방법 버튼을 클릭하지 않은 모든 행의 값을 얻으려고합니다. 예를 들어, 첫 번째 행의 버튼을 클릭했을 때 클릭되지 않은 행의 값을 검색하고 싶습니다. vartable=...
에서 2024-04-05 09:26:49
0
1
1418
최종 사용자의 현재 선택에 따라 선택 상자에서 선택한 옵션을 이동하려면 jquery 스크립트가 필요합니다. 최종 사용자가 선택 상자 요소를 통해 항목의 순위를 지정할 수 있는 HTML 페이지가 있습니다. 간단한 데모를 보려면 바이올린을 참조하세요: https://jsf...
에서 2024-04-04 18:40:04
0
1
3528
북마크를 통해 순수 CSS로 요소를 만들었습니다. 생성되었으나 표시되지 않음 내 코드는 다음과 같습니다: g=document.createElement('div');g.setAttribute("id","divcon...
에서 2024-04-04 17:27:27
0
1
417
Safari/Firefox iOS에서 양식 데이터를 보낼 수 없습니다. 이는 iOS의 Safari/Firefox를 제외한 모든 플랫폼에서 작동합니다: jQuery("#gform_1").one('submit',func...
에서 2024-04-04 12:53:48
0
1
303
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！