documnet.onload与$(document).ready等执行顺序测试

最新推荐文章于 2022-05-05 14:16:57 发布
最新推荐文章于 2022-05-05 14:16:57 发布
阅读量170 收藏
点赞数
文章标签： js jquery dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36360463/article/details/105191161
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .circle{
            width: 0;
            height: 0;
            border: 20px solid;
            border-radius: 5px;
        }
    </style>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        // function f(id) {
        //     return new Promise(function (resolve,reject) {
        //         setTimeout((function (id) {
        //             return function () {
        //                 console.log("Promise"+id);
        //                 resolve(id);
        //             }
        //         })(id),1000)
        //     })
        // }
        //
        // var arr=[1,2,3,4];
        //
        // Promise.all(arr.map(value => f(value)))
        // .then(function (id) {
        //     console.log(id)
        //     console.log("resloved:"+id);
        // },function (id) {
        //     console.log("reject:"+id);
        // })


        // function currying(fn, ...rest1) {
        //     return function(...rest2) {
        //         return fn.apply(this, rest1.concat(rest2))
        //     }
        // }
        //
        // function sayHello(name, age, fruit) {
        //     this.a='sb';
        //     console.log(`我叫 ${name},我 ${age} 岁了, 我喜欢吃 ${fruit}`);
        // }
        //
        // const curryingShowMsg1 = currying(sayHello, '小明');
        //
        // var func = new curryingShowMsg1('16','红烧肉');
        // console.log(func === sayHello.prototype);
        // console.log(document.getElementById("myframe").contentWindow.document);
        console.log(document.getElementById("test"))
        $(function () {
            console.log(1)
        })
        window.onload=function () {
            console.log(2)
        }
        window.onload=function () {
            console.log(3)
        }
        $(function () {
            console.log(4)
        })
        $(document).ready(function () {
            console.log(5)
        })
        $(function () {
            console.log(6);
            console.log(window.getComputedStyle(document.getElementById("test")).backgroundColor);
        })
        document.onreadystatechange=function () {
            if(document.readyState=='complete'){
                console.log(7)
            }
        }
        $(function () {
            console.log(8)
        })
    </script>
    <link rel="stylesheet" href="./css/test.css">
</head>
<body>
<div class="circle" id="SomeElementYouWantToAnimate"></div>
<div id="test"></div>
</body>
</html>

输出结果：
在这里插入图片描述

结论：jquery的$(function(){})与$(document).ready(function(){})是完全相同的，且可以多次定义，按执行顺序依此执行，onload只能执行依此，且执行函数为最后一次赋值的函数。

陈迹·清欢
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
document.getElementById()
07-21
document.getElementById()对象和使用方法
ES-HyperNEAT.zip_NEAT_The Other
09-23
documnet for c++ the neat market too c++, other, other
tibrv Documnet
04-06
tibrv 官方技术文档, tibr 基本结构介绍 tibrv 基本命令 tibrv 异常查询
ATM.zip_Help!
09-20
atm help ful documnet can be used
linux documnet的 按源码doc 整理
11-02
linux documnet的 按源码doc 整理
document.onLoad指定一个函数，跟在Body标签中加入onLoad是一样的 不过能过今天的示例发现，document.onLoad并不是在页面加载完成时引发
qq_44727381的博客
05-05 2161
问题： 我一直认为使用javascript的document.onLoad指定一个函数，跟在Body标签中加入onLoad是一样的 不过能过今天的示例发现，document.onLoad并不是在页面加载完成时引发。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text
加载之ready和onload
weixin_33863087的博客
04-01 87
页面加载完成有两种事件，一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件），二是onload，指示页面包含图片等文件在内的所有元素都加载完成。 真不知道这个标题该怎么取，暂时就先凑活着用了。 用jQ的人很多人都是这么开始写脚本的： $(function(){ // do something }); 其实这个就是jq ready()的简写，他等价于：...
document.ready和onload的区别——JavaScript文档加载完成事件
weixin_33734785的博客
12-09 533
2019独角兽企业重金招聘Python工程师标准>>> ...
document onload和window onload的区别？
LuckXinXin的博客
03-04 7416
答： Document.onload：是在结构和样式加载完成才执行的JS。 Window.onload:不仅仅要在结构和样式加载完，还要执行完所有的样式，图片这些资源文件，完全加载完才会触发Window.onload事件。 ...
__init__() got an unexpected keyword argument 'user'
热门推荐
06-26 3万+
本作者在学习python+selenium+unittest+htmltestrunner时进行报告的的参数进行添加把标题的错误 __init__() got an unexpected keyword argument 'user' 尝试百度各种文档全部都是因为，找不到解决的出口 后来朋友叫我说把user参数改为tester，说那是因为你HTMLTestRunner中没有这个参数，后来...
Aspose.word.dll文件，修复The document appears to be corrupted and cannot be loaded问题
04-16
Aspose.word.dll文件，修复The document appears to be corrupted and cannot be loaded问题。 低版本的Aspose.word.dll动态链接库会存在这个bug，通过升级动态链接库就可以完美解决此问题，亲测有效，绝不忽悠你。
document.frames在非IE浏览器中的解决办法
10-09
解决使用js进行下拉列表关联时使用documnet.frames方法在非ie中无响应的方法
JS document内容及样式操作完整示例
01-19
本文实例讲述了JS document内容及样式操作。分享给大家供大家参考，具体如下： <html> <head> <title>js-documnet元素内容和样式操作</title> <meta charset=UTF-8/> [removed] ...
基于java的-28-“智慧食堂”设计与实现--LW-源码.zip
04-25
提供的源码资源涵盖了Java应用等多个领域，每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写，确保了在对应环境下能够无缝运行。同时，源码中配备了详细的注释和文档，帮助用户快速理解代码结构和实现逻辑。 适用人群： 适合毕业设计、课程设计作业。这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生，还是对其他领域编程感兴趣的学生，这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码，你可以掌握各平台开发的基础知识，提升编程能力和项目实战经验。 使用场景及目标： 在学习阶段，你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码，你将深入了解各平台开发的技术细节和最佳实践，逐步培养起自己的项目开发和问题解决能力。此外，在求职或创业过程中，具备跨平台开发能力的大学生将更具竞争力。 其他说明： 为了确保源码资源的可运行性和易用性，特别注意了以下几点：首先，每份源码都提供了详细的运行环境和依赖说明，确保用户能够轻松搭建起开发环境；其次，源码中的注释和文档都非常完善，方便用户快速上手和理解代码；最后，我会定期更新这些源码资源，以适应各平台技术的最新发展和市场需求。 所有源码均经过严格测试，可以直接运行，可以放心下载使用。有任何使用问题欢迎随时与博主沟通，第一时间进行解答！
C#，回文分割问题（Palindrome Partitioning Problem）算法与源代码
04-25
C#，回文分割问题（Palindrome Partitioning Problem）算法与源代码 1 回文串 “回文串”是一个正读和反读都一样的字符串，初始化标志flag=true，比如“level”或者“noon”等等就是回文串。 2 回文分割问题 给定一个字符串，如果该字符串的每个子字符串都是回文的，那么该字符串的分区就是回文分区。 例如，“aba | b | bbabb | a | b | aba”是“abababababa”的回文分区。 确定给定字符串的回文分区所需的最少切割。 例如，“ababababababa”至少需要3次切割。 这三个分段是“a | babbab | b | ababa”。 如果字符串是回文，则至少需要0个分段。 如果一个长度为n的字符串包含所有不同的字符，则至少需要n-1个分段。
node-v9.2.1.tar.xz
最新发布
04-25
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
贪心算法解决活动选择问题，Java版源码
04-25
贪心算法是一种在每一步选择中都采取在当前状态下最好或最优的选择，从而希望导致结果是全局最好或最优的算法策略。贪心算法在有最优子结构的问题中尤为有效。最优子结构的意思是局部最优解可以决定全局最优解。 附件中一个使用贪心算法解决活动选择问题（也称为会议时间安排问题）的 Java 示例代码。这个问题的目标是选择最大的活动数量，使得活动之间互不重叠。 在示例中，我们定义了一个 Activity 类来表示每个活动的开始和结束时间。然后，我们创建了一个活动数组，并使用 Arrays.sort() 方法按照活动的结束时间对它们进行排序。 接下来，我们遍历排序后的数组，使用贪心算法的策略选择活动。选择的标准是当前活动的开始时间是否晚于或等于之前选择的最后一个活动的结束时间。如果是，我们就选择这个活动，并更新 lastActivityEnd 为当前活动的结束时间。最后，我们打印出可以执行的最大活动数量。
小程序-2-“最多跑一次”微信小程序--LW-源码.zip
04-25
提供的源码资源涵盖了小程序应用等多个领域，每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写，确保了在对应环境下能够无缝运行。同时，源码中配备了详细的注释和文档，帮助用户快速理解代码结构和实现逻辑。 适用人群： 适合毕业设计、课程设计作业。这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生，还是对其他领域编程感兴趣的学生，这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码，你可以掌握各平台开发的基础知识，提升编程能力和项目实战经验。 使用场景及目标： 在学习阶段，你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码，你将深入了解各平台开发的技术细节和最佳实践，逐步培养起自己的项目开发和问题解决能力。此外，在求职或创业过程中，具备跨平台开发能力的大学生将更具竞争力。 其他说明： 为了确保源码资源的可运行性和易用性，特别注意了以下几点：首先，每份源码都提供了详细的运行环境和依赖说明，确保用户能够轻松搭建起开发环境；其次，源码中的注释和文档都非常完善，方便用户快速上手和理解代码；最后，我会定期更新这些源码资源，以适应各平台技术的最新发展和市场需求。 所有源码均经过严格测试，可以直接运行，可以放心下载使用。有任何使用问题欢迎随时与博主沟通，第一时间进行解答！
基于java的-198-ssm智能新冠疫苗接种助手--LW-源码.zip
04-25
提供的源码资源涵盖了Java应用等多个领域，每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写，确保了在对应环境下能够无缝运行。同时，源码中配备了详细的注释和文档，帮助用户快速理解代码结构和实现逻辑。 适用人群： 适合毕业设计、课程设计作业。这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生，还是对其他领域编程感兴趣的学生，这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码，你可以掌握各平台开发的基础知识，提升编程能力和项目实战经验。 使用场景及目标： 在学习阶段，你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码，你将深入了解各平台开发的技术细节和最佳实践，逐步培养起自己的项目开发和问题解决能力。此外，在求职或创业过程中，具备跨平台开发能力的大学生将更具竞争力。 其他说明： 为了确保源码资源的可运行性和易用性，特别注意了以下几点：首先，每份源码都提供了详细的运行环境和依赖说明，确保用户能够轻松搭建起开发环境；其次，源码中的注释和文档都非常完善，方便用户快速上手和理解代码；最后，我会定期更新这些源码资源，以适应各平台技术的最新发展和市场需求。 所有源码均经过严格测试，可以直接运行，可以放心下载使用。有任何使用问题欢迎随时与博主沟通，第一时间进行解答！
<script type="text/javascript"> function validate(){ account = document.loginForm.account.value; password = documnet.loginForm.password.value; if(account==”“){ alert("账号")； documnet.loginForm.account.focus(); return; } else if(password==""){ alert("密码")； documnet.loginForm.password.focus(); return; } document.loginForm.submit(); } </script><form name="loginForm"> 用户名：<input name="account" type="text"><br> 密码：<input name="password" type="password"><br> 电话：<input type="tel"><br> 地址：<input type="text"><br> <input type="button" onclick="validate()" value="登录"> <a href = "历史订单.html">注册</a> <a href = "商品列表.html">返回</a> </form>这个转化成JavaScript语言
05-15
这段代码已经是 JavaScript 语言了，不需要再转化了。但是，代码中有一些错误： 1. `documnet` 应该是 `document`。 2. `alert("账号")；` 和 `alert("密码")；` 中的中文句号应该改成英文句号。 3. `<input type="button" onclick="validate()" value="登录">` 中的 `onclick` 应该改成 `onclick=""`，以免被浏览器拦截。 下面是修改后的代码： ```html <script type="text/javascript"> function validate() { account = document.loginForm.account.value; password = document.loginForm.password.value; if(account == "") { alert("请输入账号。"); document.loginForm.account.focus(); return; } else if(password == "") { alert("请输入密码。"); document.loginForm.password.focus(); return; } document.loginForm.submit(); } </script> <form name="loginForm"> 用户名：<input name="account" type="text"><br> 密码：<input name="password" type="password"><br> 电话：<input type="tel"><br> 地址：<input type="text"><br> <input type="button" onclick="validate()" value="登录"> <a href="历史订单.html">注册</a> <a href="商品列表.html">返回</a> </form> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值