JavaScript与jQuery中——文档就绪函数的区别

一、文档就绪函数

1. JavaScript 的文档就绪函数
   

   <script>
       window.onload = function() {
           alert("欢迎！")
       }
   </script>

2. jQuery 中的文档就绪函数
   

   // 写法1
   <script>
       $(document).ready(function() {
           alert("欢迎！")
       })
   </script>
   
   // 写法2
   <script>
       $(function() {
           alert("欢迎！")
       })
   </script>

执行以上的代码，咱们能够得知，JavaScript 的 window.onload=function(){// 执行代码} 和 jQuery 的文档就绪函数 $(document).ready(function(){// 执行函数}) 是等同的运行效果。可是两者也有不一样，下面本人就其区别与各位分享一下。

二、window.onload 与 $(document).ready()的区别

	window.onload	$(document).ready()
执行时机	必须等网页中全部内容加载完后（包括图片）才能执行	网页中全部DOM结构绘制完后就执行
函数编写个数	不能编写多个，例如： window.onload=function(){}; window.onload=function(){}; 此时第二个覆盖第一个	能同时编写多个，例如： $(document).ready(function(){})； $(document).ready(function(){})； 两个函数都执行
简化写法	无	$()

对两者区别的简单说明以下：
（1）在执行时机上，window.onload 表示页面全部内容所有加载完成后执行，$(document).ready() 表示页面全部 DOM 元素加载完成后执行。例如，有一个图片标签<img src="aa.jpg"/>，JavaScript 的 window.onload 要等 aa.jpg 整个图片加载完后才能执行注册事件中的函数，可是 jQuery 的文档就绪函数要等<img></img>标签对加载完成就能够执行了，也就是只须要解析到此处的页面控件是一个图片标签对便可，不用等图片显示完。
（2）函数编写个数主要体现为是覆盖仍是追加。下面经过一个简单实例来对比。

先写一个JavaScript 程序，里面有 window.onload 注册事件，分别打印不一样的数据，代码以下：

<script>
    window.onload = function() {
        alert("aa")
    };
    window.onload = function() {
        alert("bb")
    };
</script>

执行结果以下：

咱们发现，代码执行后，首先弹出bb提示框，并未弹出 aa 提示框，说明 JavaScript 的 window.onload 不能编写多个函数，若是编写多个函数，后写的会覆盖前面的。

如今咱们用jQuery编写一样的程序，代码以下：

<script>
    $(document).ready(function() {
        alert("aa")
    });

    $(document).ready(function() { alert("bb") });

</script>

执行结果以下：

根据执行结果能够看到，代码经过使用 jQuery 的文档就绪函数打印了两组数据，程序先打印了第一条数据 aa，接着又打印了第二条数据 bb，说明jQuery的文档就绪函数能够有多个。若是有多个文档就绪函数，那么执行顺序就是从第一条数据开始，逐条进行打印，不会像 window.onload 那样出现覆盖状况。
（3）简化写法属于语法规范。window.onload 没有简写形式；$(document).ready(function(){// 执行代码})的简写形式为$(function(){// 执行代码})，在开发中使用简写形式较多。