页面加载完成事件 -onload的五种写法基础指南_加载使用教程

在js和jquery使用中,经常使用到页面加载完成后执行某一方法。通过整理,大概是五种方式(其中有的只是书写方式不一样)。1:使用jQuery的$(function){};2:使用jquery的$(document).ready(function(){});前两者本质上没有区别,第1种是第2种的简写方式。两个是document加载完成后就执行方法。3:使用j

页面加载完成事件 -onload的五种写法基础指南

在js和jquery使用中,经常使用到页面加载完成后执行某一方法。通过整理,大概是五种方式(其中有的只是书写方式不一样)。

页面加载完成事件 -onload的五种写法基础指南_加载使用教程

1:使用jQuery的$(function){};

2:使用jquery的$(document).ready(function(){});

前两者本质上没有区别,第1种是第2种的简写方式。两个是document加载完成后就执行方法。

3:使用jQuery的$(window).load(function(){});

4:使用window.onload = function(){}

第3种和第4种都是等到整个window加载完成执行方法体。两者也没有区别,只是一个使用dom对象,一个使用jQuery对象。

5:在标签上静态绑定onload事件,<body onload=”aaa()”>等待body加载完成,就会执行aaa()方法。  

那么,这五种方式,执行的先后顺序是怎么样的呢?

通过下方代码验证发现:

  • 使用第一种 jQuery的$(function){} 和第二种 jquery的$(document).ready(function(){});无论位置放置在哪里,总是优先其余三种方式(原因是:这两种方式是在document加载完成后就执行,后三种是等到整个window页面加载完成后才执行),这两者之间的执行顺序是谁在上方谁优先执行。
  • 使用第三种 jQuery的$(window).load(function(){});和第四种 window.onload = function bbb(){}这两种方式,总是优先于<body onload=”aaa()”>执行。他们两者执行顺序也是根据谁在上方谁先执行。
  • 使用第五种 <body onload=”aaa()”>总是最后执行。

代码:

<script type='text/javascript'>

  window.onload = function(){ 
    alert("页面加载完成====》onload"); 
  }

  $(window).load(function(){ 
    alert("jquery===》window load" ); 
  })

  $(document).ready(function () { 
    alert("jquery====》document ready"); 
  });

  $(function(){ 
    alert("jquery====》document onload"); 
  });

  function aaa(){ 
    alert("静态标签====》onload"); 
  }

</script>

<body onload="aaa()"></body>
海计划公众号
(0)
上一篇 2020/03/24 20:14
下一篇 2020/03/26 23:28

您可能感兴趣的内容

  • HiPDF小白攻略_在线一体化免费PDF处理工具

    HiPDF小白攻略 官方网址:https://www.hipdf.com/ 简介描述:在线一体化免费PDF处理工具 HiPDF是一款免费的一站式PDF工具集合,它能让您随心所欲玩转…

    2020/03/11
  • Vue 计算属性简析基础入门_属性小白指南

    Vue ComputedVue 开发人员必然使用过计算属性(Computed Properties):你可以像绑定 data 属性一样在模板中绑定计算属性;计算属性一般依赖一个或多个 data 属性,并返回它们复杂逻辑下的状态;当这些依赖属性变更时,模版中绑定的计算属性也会随之更新。那问题来了,vue 是怎么实现这个机制的呢? 我看了一篇外文是讲解 comp

    2020/03/20
  • js模块化总结小白知识_模块化零基础入门

    从前端打包的历史谈起在很长的一段前端历史里,是不存在打包这个说法的。那个时候页面基本是纯静态的或者服务端输出的, 没有 AJAX,也没有 jQuery。Google 推出 Gmail 的时候(2004 年),XMLHttpRequest, 也就是我们俗称的 AJAX被拾起的时候,前端开发者开始往页面里插入各种库和插件,我们的 js 文件程指数倍的开始增加了。

    2020/03/30
  • pexels小白教程_顶级免费高清无版权摄影图片素材库

    pexels小白教程 官方网址:https://www.pexels.com/ 简介描述:顶级免费高清无版权摄影图片素材库 做网站或者设计海报都需要用到一些高清图片,虽说搜索引擎可…

    2020/03/06
  • 21世纪教育指南教程_试题,课件,教案,学案、资源

    21世纪教育指南教程 官方网址:https://www.21cnjy.com/ 简介描述:试题,课件,教案,学案、资源 国内排名前列的中小学教育资源网,提供全国中小学各版本教材的课…

    2020/03/11
  • js 多个异步的并发控制小白指南_异步基础入门

    请实现如下的函数,可以批量请求数据,所有的URL地址在urls参数中,同时可以通过max参数 控制请求的并发度。当所有的请求结束后,需要执行callback回调。发请求的函数可以直接使用fetch。function sendRequest (urls: string[], max: number, callback: () => void) {}fetch

    2020/03/30
  • 什么是HTML5前端开发?需要学哪些技术?小白帮助_前端攻略教程

    什么是HTML5前端开发?前端开发一般指网页开发,前端开发是从网页制作上演变过来的,网页上软件化的交互形式都是基于前段技术实现的。程序员指从事程序开发、维护的专业人员,其中程序员可以分为设计和编码两个部分。HTML5前端的发展前景可观,可以从事的工作也很多,比如:web前端开发工程师、HTML5开发工程师、web APP开发工程师、Java开发工程师等。那么

    2020/03/29
  • React 新 Context API小白攻略_react零基础入门

    它更符合工程化, 不再是实验性的, 现在它是一流的API! 并且它还使用了 RENDER PROP!你在react官网上听说过 context API?如果你听说过, 你会像许多人那样,因为看过官网的文档,而害怕直接使用它么:该搜索结果第一个显示“为何不用使用Context”.不会激发对context API.的大量信心 .为了使事情更加受关注,搜索结果这部

    2020/04/05
  • form表单文件上传菜鸟教程multipart/form-data文件上传_文件菜鸟教程下载

    form表单的enctype属性:规定了form表单数据在发送到服务器时候的编码方式application/x-www-form-urlencoded:默认编码方式multipart/form-data:指定传输数据为二进制数据,例如图片、mp3、文件text/plain:纯文本的传输。空格转换为“+”,但不支持特殊字符编码。多部件请求体POST / HTT

    2020/04/03
  • 程序员改行创业使用指南程序猿如何变为创业狗_创业指南教程

    来源:http://www.sohu.com/a/249203319_100091628作者:五五我一直有个创业梦,在大公司工作一年后,便辞职和几位同学创业,两年后团队解散,第一次创业以失败告终。之后我回到二线城市当程序员,完成买房结婚等大事。我之前不后悔浪费两年时间去创业,可等买房时农村的父母掏空积蓄,自己拿不出钱时真后悔了。于是我按住自己不安分的心:先谋

    2020/04/03
  • 基于screen.width的伪响应式开发入门攻略_width基础教程

    作者:张鑫旭(@张鑫旭) 链接:http://www.zhangxinxu.com/wordpress/2016/06/pseudo-response-layout-base-on-screen-width/一、站在用户的角度看问题一个用户,访问一个web页面的真实场景是怎样的呢?下面是某用户访问某站点的一个场景:1. 小明打开了自己的电脑,访问了鑫空间-鑫

    2020/03/24
  • 优秀程序员的代码经验总结使用指南_经验入门教程

    这是一篇值得收藏起来,隔三差五就拿来重读的文章!因为作者向你保证,他“遇到的所有糟糕的代码,都是因为没采纳这些实践经验。而任何一段优秀的代码,都采纳了至少部分实践经验。”还等什么?赶快看看这些经验就是什么吧?我已经写了20年代码了,在此期间曾与17个团队共事过,使用不同的语言做过数百个项目。这些项目从最简单的博客网站,到支持每秒3000多次请求的API,还有

    2020/03/26
  • 为什么程序员工作的这么累?教程视频_工作基础知识入门

    最近是真的累了。不知不觉之间,已经两三个星期没有锻炼,感觉身体很难受,接下来的日子必须强制自己按时锻炼,按时休息,不然真的是不知道哪天就挂了。过去一年多,我仗着自己年轻的身体,对计算机的热情,在工作上多使用蛮力,仿佛一个使用朴素算法实现的程序,吭哧吭哧跑个不停。一开始,朴素算法还能在指定的工作时间内完成任务;后来任务越来越多,工作时间之内肯定没法完成,我开始

    2020/04/05
  • NES.css入门基础_一款像素风格的 CSS 库

    NES.css入门基础 官方网址:https://bcrikko.github.io/NES.css GitHub:https://github.com/BcRikko/NES.c…

    2020/03/06
  • weavesilk入门知识_基于HTML5的在线绘图特效平台

    weavesilk入门知识 官方网址:http://weavesilk.com/ 简介描述:基于HTML5的在线绘图特效平台 感觉它是个绘画的网站,不管你在网站上画了什么,估计有“…

    2020/03/08
  • 大头网菜鸟攻略_Js网页特效代码

    大头网菜鸟攻略 官方网址:http://www.datouwang.com/ 简介描述:Js网页特效代码 大头网为网页前端人员提供建站常用的网页特效,内容涵盖焦点图,导航菜单,幻灯…

    2020/03/06