在 jQuery 中创建页面加载事件
带有 load
事件的 on()
方法用于在 jQuery 中创建页面加载事件。本教程演示如何在 jQuery 中创建页面加载事件。
在 jQuery 中创建页面加载事件
以前,jQuery 有函数 load()
,它用作页面加载或 document.ready
事件,但此方法在 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>
页面完全加载后,上面的代码将显示当前时间。见输出:
相关文章
在 JavaScript 中从字符串中获取第一个字符
发布时间:2023/03/24 浏览次数:93 分类:JavaScript
-
在本文中,我们将看到如何使用 JavaScript 中的内置方法获取字符串的第一个字符。
在 JavaScript 中获取字符串的最后一个字符
发布时间:2023/03/24 浏览次数:141 分类:JavaScript
-
本教程展示了在 javascript 中获取字符串最后一个字符的方法
在 JavaScript 中进行日期相减
发布时间:2023/03/24 浏览次数:199 分类:JavaScript
-
本文介绍了如何在 JavaScript 中使用简单的函数和变量来获得两个日期之间的差异。