HOWTO · jQuery
jQuery에서 페이지 내 로드 이벤트 만들기
이 튜토리얼은 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>
위의 코드는 페이지가 완전히 로드되면 현재 시간을 표시합니다. 출력 참조:
