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