《锋利的JQuery》翻开没看几页，就遇到了这个神奇的问题，之前在橙旭园学习的时候，JQuery只教了一些基础的，像链式操作等，那时以为这个和window.onload()差不多一模一样，现在才发现差的蛮多的，来整理下：

0：$(document).ready 等价于 $(function(){}

1：$(document).ready可以有多个，而window.onload()只有一个，后面的会覆盖前面的。

<script>

        $(document).ready(

            console.log("$1")

        );

        $(document).ready(

            console.log("$2")

        )

        window.onload = function(){

            console.log("win1");

        }

        window.onload = function(){

            console.log("win2");

        }
　　　　window.onload = fucntion(){
　　　　　　func1();
　　　　　　func2();
}//可以用这种方式来添加多个就绪事件
</script>

实现结果：

2：$(document).ready:是DOM结构绘制完毕后就执行，不必等到加载完毕。 意思就是DOM树加载完毕，就执行，不必等到页面中图片或其他外部文件都加载完毕。例如有一张图片，DOM结构已经为它预留好位置了，但还在加载，这个时候就能够给它绑定方法了

window.onload:是页面所有元素都加载完毕，包括图片啊表格等所有元素，如果页面太大，或者用户带宽过小，就可能会出现无响应情况

这一点就使得$(document).ready比window.onload运行得更早一些

举例：

<script>
var btn = document.getElementById("btn");
window.onload = function(){
var pic = document.querySelector("img");
console.log(pic.alt);
}
$(document).ready(
console.log( $("img").alt)
)
</script>
<body>
<button onclick="ale()" id="btn">点击提示</button>
<img src="https://img3.mukewang.com/5c830c2e0001022510241024-140-140.jpg" alt="pic">
</body>
 

可以看到，在$(document).ready中pic的alt属性还未定义

（前面一个才是$(document).ready，从这里也可以再次发现它比window.onload执行的早噢）

以下为前端大佬们的补充

3.要解决例2中的问题，可以使用Jquery 中另一个关于页面加载的方法 ---load() 方法。 Load() 方法会在元素的 onload 事件中绑定一个处理函数。如果处理函数绑定给 window 对象，则会在所有内容 ( 包括窗口、框架、对象和图像等 ) 加载完毕后触发，如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发。（来源https://www.cnblogs.com/fengchaoran/p/7493803.html）

    $(window).load(function(){})
　　 window.onload = function(){}
　　//这两个是一样的

注意：不要不要在$(document).ready()里绑定load事件

只有当在这个元素完全加载完之前绑定load的处理函数,才会在他加载完后触发。如果之后再绑定就永远不会触发了。所以不要在$(document).ready()里绑定load事件，因为jQuery会在所有DOM加载完成后再绑定load事件。

根据不同的浏览器（Firefox 和 IE），如果图像已被缓存，则也许不会触发 load 事件。

4..在原生JS中，监听DOM执行的事件为DOMContentLoaded，不过此方法只能通过 DOM2 级方式添加，即采用addEventListener()/attachEvent() 方式添加才能够使用。（来自https://blog.csdn.net/lwx931449660/article/details/86096415）

随机推荐

  1. SpringSecurity-ChannelProcessingFilter的作用

    ChannelProcessingFilter决定的是web请求的通道,即http或https. 在springsecurity配置文件中添加这样一行 <intercept-url patter ...

  2. C++11--随机数引擎和随机数分布<random>

    /* 随机数引擎: * 有状态的随机数发生器,生成在预定义的最大小值之间的随机数 * 不是真正的随机数--伪随机 */ int main () { std::default_random_engine ...

  3. 【事务隔离级别】数据库事务隔离级别-UNDERSTANDING ISOLATION LEVELS

    参考链接:ISOLATION LEVELS ISOLATION LEVELS In a database system, concurrent transactions are processed i ...

  4. ubuntu16.04 彻底卸载MySQL

    以MySQL- 5.7.18为例: sudo apt-get autoremove --purge mysql-server-5.7 #sudo apt-get remove mysql-server ...

  5. 数据仓库与ODS

    1. 引言 本篇主要讲述操作数据存储(ODS)系统产生的背景.定义.特点,以及它与数据仓库的区别.在前两篇,笔者介绍了什么是数据仓库?为什么需要数据仓库?数据仓库系统的体系结构是什么?因此可能在读者心 ...

  6. DockerFile服务

    Dockerfile分为四部分:基础镜像信息.镜像创建者信息.镜像操作指令.容器启动执行指令. 一.Dockerfile的书写规则及指令使用方法 Dockerfile的指令是忽略大小写的,建议使用大写 ...

  7. centos6.8下l2tp客户端xl2tpd的安装配置

    环境: DigitalOcean centos6.8作为l2tp客户端 ros6.43.8作为l2tp服务端 1.安装xl2tp和ppp rpm -ivh http://mirrors.yun-idc ...

  8. java中，什么是方法的重载？需要满足什么条件？两同三不同指的什么？

    方法重载需要满足以下几个条件: 在同一个类中 方法的名称相同 参数列表不同 方法重载有以下特点: 与访问修饰符和返回值类型无关 与异常无关 方法重载的作用: 传递不同的参数实现相同的效果 所谓两同,就 ...

  9. Jmeter（二十）Beanshell or JSR223

    有关Beanshell和JSR223组件的部分,早就想写一大篇幅随笔进行记录,苦于不知如何去描述这两部分的内容,一直在修改随笔. 介绍一下Beanshell: Beanshell是轻量级Java,支持 ...

  10. Shell IF条件判断解析

    IF条件判断 1.基本语法: if [ command ]; then #符合该条件执行的语句 fi2.扩展语法: if [ command ];then #符合该条件执行的语句 elif [ com ...