jQuery에서 페이지 내 로드 이벤트 만들기
load 이벤트가 있는 on() 메서드는 jQuery에서 페이지 내 로드 이벤트를 생성하는 데 사용됩니다. 이 튜토리얼은 jQuery에서 페이지 내 로드 이벤트를 생성하는 방법을 보여줍니다.
jQuery에서 페이지 내 로드 이벤트 만들기
이전에 jQuery에는 페이지 로드 또는 document.ready 이벤트로 작동하는 load() 함수가 있었지만 이 메서드는 jQuery 버전 1.8에서 더 이상 사용되지 않으며 버전 3.0에서 제거되었습니다. 이제 on() 메서드를 load 이벤트와 함께 사용하여 페이지가 완전히 로드되면 작업을 수행할 수 있습니다.
load 이벤트가 있는 on() 메소드는 스타일시트, 이미지, 비디오 등을 포함하여 페이지에 모든 것이 로드될 때 작동합니다.
on() 메서드의 구문은 다음과 같습니다.
$(window).on('load', functionforOnPageLoad() )
페이지가 완전히 로드될 때 함수가 호출되는 위치입니다. 예를 들어 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<title> jQuery On Page Load </title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"> </script>
</head>
<body>
<script type="text/javascript">
$(window).on('load', AlertMessage());
function AlertMessage() {
alert("Hello This is Page is fully loaded");
}
</script>
</body>
</html>
위의 코드는 페이지가 완전히 로드되면 메시지를 경고합니다. 출력 참조:
페이지가 완전히 로드되면 현재 시간을 표시하는 다른 예를 시도해 보겠습니다. 예를 참조하십시오.
<!DOCTYPE html>
<html>
<head>
<title> jQuery On Page Load </title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"> </script>
</head>
<body>
<p> The current Time is: </p>
<span class="date"></span>
<script type="text/javascript">
$(window).on('load', ShowCurrentTime());
function ShowCurrentTime() {
document.querySelector("span").textContent = new Date();
}
</script>
</body>
</html>
위의 코드는 페이지가 완전히 로드되면 현재 시간을 표시합니다. 출력 참조:
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook