JQuery的ready函数与JS的onload的区别详解

最新推荐文章于 2019-10-13 11:41:37 发布

悄悄小土豆

最新推荐文章于 2019-10-13 11:41:37 发布

阅读量502

点赞数

分类专栏： Jquery JS

JS 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

Jquery

3 篇文章 0 订阅

订阅专栏

JQuery的ready函数与JS的onload的区别：
1.执行时间
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

2.编写个数不同
window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个
$(document).ready()可以同时编写多个，并且都可以得到执行

3.简化写法
window.onload没有简化写法
$(document).ready(function(){})可以简写成$(function(){});

例子：

复制代码代码如下:

 
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
 
 "http://www.w3.org/TR/html4/loose.dtd"> 
 
 <html xmlns="http://www.w3.org/1999/xhtml"> 
 
 <head> 
 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
 <title>ready和js中的onload的区别</title> 
 
 <script type="text/javascript" src="jquery-core/jquery-1.8.0.js"></script> 
 
 <script type="text/javascript"> 
 
 //js中window对象的onload属性执行jsFunction1函数 
 
 window.οnlοad=jsFunction1; 
 
 //js中window对象的onload属性执行jsFunction2函数 
 
 window.οnlοad=jsFunction2; 
 
 //jquery的ready方法执行jqFunction1函数 
 
 $(document).ready(jqFunction1); 
 
 //jquery的ready方法执行jqFunction2函数 
 
 $(document).ready(jqFunction2); 
 
 //jsFunction1函数 
 
 function jsFunction1(){ 
 
 alert("jsFunction1"); 
 
 } 
 
 //jsFunction2函数 
 
 function jsFunction2(){ 
 
 alert("jsFunction2"); 
 
 } 
 
 //jqFunction1函数 
 
 function jqFunction1(){ 
 
 alert("jqFunction1"); 
 
 } 
 
 //jqFunction2函数 
 
 function jqFunction2(){ 
 
 alert("jqFunction2"); 
 
 } 
 
 </script> 
 
 </head> 
 
 <body> 
 
 <h1>ready和js中的onload的区别</h1> 
 
 </body> 
 
 </html>