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()方法。

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

通过下方代码验证发现：

使用1：jQuery的$(function){}和2：jquery的$(document).ready(function(){});无论位置放置在哪里，总是优先其余三种方式（原因是：这两种方式是在document加载完成后就执行，后三种是等到整个window页面加载完成后才执行），这两者之间的执行顺序是谁在上方谁优先执行。

使用3：jQuery的$(window).load(function(){});和4:window.onload = function bbb(){}这两种方式，总是优先于<body onload="aaa()">执行。他们两者执行顺序也是根据谁在上方谁先执行。

使用5：<body onload="aaa()">总是最后执行。

重点到了！如果要对未来元素操作的话以上这些对IE浏览器是不管用的。要等未来元素加载完后再执行js的话，我们就要给个定时器达到延迟加载的效果：

$(window).load(function(){

　　setTimeout(function(){

　　　　console.log($(".tbody tr"))

　　　　$(".tbody tr:odd").css("backgroundColor","#F5F6FA");

　　},30)

});

　　

js中页面加载完成后执行的几种方式及执行顺序的更多相关文章

  1. js中页面加载完成后执行的几种方法及执行顺序

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

  2. Javascript中页面加载完成后优先执行顺序

    Javascript中页面加载完成后优先执行顺序 document优先于windowwindow优先于element //document加载完成执行方法体 document.addEventList ...

  3. 关于 第三方接口支付的时候 采用post提交的方式，有两种 一种是通过 curl来进行，一种是通过js当页面加载完后跳转

    这是第一种.通过javascript页面加载完后,对表单采用 post方式提交给 第三方接口----- echo <<<_END<!DOCTYPE html PUBLIC &q ...

  4. js实现 页面加载 完成 后顺序 执行

    function addLoadEvent(func){ var oldonLoad = window.onload; if(typeof window.onload != 'function'){ ...

  5. js页面加载完后执行（document.onreadystatechange 和 document.readyState）

    js页面加载完后执行javascript(document.onreadystatechange 和 document.readyState) document.onreadystatechange ...

  6. 页面加载完毕后调用js方法进行布局操控 已实验

    页面加载完毕后调用js方法进行布局操控 已实验 $(function(){ var check1 = $("[id$=SMS]").is(':checked'); var bl=$ ...

  7. 转:JS线程和JS阻塞页面加载的问题

    前几日写了一篇文章,介绍了js阻塞页面加载的问题.当时是通过例子来验证的.今天,我介绍一下浏览器内核,从原理上介绍一下js阻塞页面加载的原因. 浏览器的内核是多线程的,它们在内核制控下相互配合以保持同 ...

  8. js判断页面加载完毕方法

    判断页面加载完成这个方法是很常见的,下面有三个常用的方法,各有利弊. 一.纯js方法 // (1).页面所有内容加载完成执行 window.onload = function(){ } // (2). ...

  9. 页面加载完成后，触发事件——trigger（）

    <button id="btn">点击我</button> <div id="test"></div> 如果页面 ...

随机推荐

  1. C++必知必会

    C++ Common knowledge Essential Intermediate Programming C++必知必会 [美] StephenC.Dewhurst 著  荣耀 译  人民邮电出 ...

  2. Pythonic 的代码编写方法

    1.模块导入 你是不是经常对调用模块时输入一长串模块索引感到头疼?说实在的,数量少的时候或许还可以勉强忍受,一旦程序规模上去了,这也是一项不容小觑的工程 #Bad import urllib.requ ...

  3. 2017 Multi-University Training Contest - Team 3 Kanade's sum hd6058

    地址:http://acm.split.hdu.edu.cn/showproblem.php?pid=6058 题目: Kanade's sum Time Limit: 4000/2000 MS (J ...

  4. HDU 4746 Mophues（莫比乌斯反演）

    题意:求\(1\leq i \leq N,1\leq j \leq M,gcd(i,j)\)的质因子个于等于p的对数. 分析:加上了对质因子个数的限制. 设\(f(d):[gcd(i,j)=d]\) ...

  5. php 输出 sql语句

    第一种方法 $data = M('news')->field("title,date_format(postdate,'%Y-%m-%d') as postdate,content&q ...

  6. SQL学习笔记之MySQL查询的三层解析

    Mysqld的三层结构: SQL类型: DDL:数据库对象定义语言 对库和表的定义 DML:操作语言 DCL:控制语言 结构化的查询语言:select * from user; 执行该语句时: 1.连 ...

  7. OpenStack之Keystone模块

    一.Keystone介绍 OpenStack Identity(Keystone)服务为运行OpenStack Compute上的OpenStack云提供了认证和管理用户.帐号和角色信息服务,并为Op ...

  8. Could not initialize class sun.awt.X11FontManager 异常问题

    查了很多资料都是建议在  catalina.sh 中增加 -Djava.awt.headless=true \  的配置. 加了没有效果. 后来发现是因为JDK版本问题,将JDK 8换成 JDK 7后 ...

  9. APP开放接口API安全性——Token令牌Sign签名的设计与实现

    在APP开放接口API的设计中,避免不了的就是安全性问题. 一.https协议 对于一些敏感的API接口,需要使用https协议.https是在http超文本传输协议加入SSL层,它在网络间通信是加密 ...

  10. MR案例：基站相关01

    字段解释: product_no:用户手机号: lac_id:用户所在基站: start_time:用户在此基站的开始时间: staytime:用户在此基站的逗留时间. product_no lac_ ...