迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 >

在 jQuery 中创建页面加载事件

作者:迹忆客 最近更新:2023/03/13 浏览次数:

带有 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>

上面的代码将在页面完全加载时提醒消息。见输出:

jQuery 页面加载警报

让我们尝试另一个示例来显示页面完全加载后的当前时间。参见示例:

<!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>

页面完全加载后,上面的代码将显示当前时间。见输出:

页面加载时的 jQuery

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便