jquery 준비 함수에는 세 가지 작성 방법이 있습니다. 1. "$(document).ready(function(){//ready code});"를 작성하는 완전한 방법 2. 문서를 생략하는 방법은 " $().ready(function( ){//Ready code});"; 3. document와 Ready()가 모두 생략된 경우 작성 방법 "$(function(){//Ready code});"
이 튜토리얼의 운영 환경: 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에서는 $(document).ready(function () {})
를 다음과 같이 생략할 수 있습니다.
$().ready(function(){}) $(function(){});
코드 크기 측면에서 두 번째 유형이 더 작아서 추천할만한 가치가 있습니다.
위의 jQuery 코드를 사용하는 것으로 볼 때 jQuery는 JS 코드를 더 간단하게 만들고 더 적은 코드를 요구하므로 JS 코드 전체를 더 쉽게 개발하고 유지 관리할 수 있습니다.
요약: 문서 준비 기능을 작성하는 방법에는 세 가지가 있습니다
문서 준비 기능의 첫 번째 작성 형식
$(document).ready(function(){ alert("文档就绪函数第一种书写方法"); })
문서 준비 기능의 두 번째 작성 방법
$().ready(function(){ alert("文档就绪函数第二种书写方法"); })
문서 준비 기능의 세 번째 작성 방법 문서 준비 기능
$(function(){ alert("文档就绪函数第三种书写方法"); })
【 추천 학습: jQuery 동영상 튜토리얼, 웹 프론트엔드 동영상】
위 내용은 Jquery 준비 함수를 작성하는 방법에는 여러 가지가 있습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!