javaScritpt学习记录（一）-window.onload = function(){} 与$(document).ready(function(){})区别

来源：互联网发布：电脑windows壁纸编辑：程序博客网时间：2024/05/17 04:46

网上大多数都在介绍$(document).ready(function(){})执行要先于window.onload = function(){} 原因在于前者事当html中的DOM树执行完毕后就执行，而后者是页面所有都执行完毕后才执行。但是也不乏有特殊的情况，这种说法是有问题的。那么接下来我我们看一下JQuery.ready()源码：

 if ( jQuery.browser.msie && window == top ) (function(){ if (jQuery.isReady) return; try { document.documentElement.doScroll("left"); } catch( error ) { 　　　　　　setTimeout( arguments.callee, 0 ); 　　　　　　 return; 　　　　} 　　 // and execute any waiting functions 　　　jQuery.ready(); })(); jQuery.event.add( window, "load", jQuery.ready );

很显然不是网上说法$(document).ready(function(){})先于window.onload 执行是不对的。javaScript虽然为动态弱语言，但是在执行只有依然是雨染堆栈的方式执行的，只有将任务存放近任务执行队列中的任务才能执行。但是意外的情况很少。基本上$(document).ready(function(){})执行比较靠前。

除此之外$(function(){}) 是$(document).ready(function(){ }) 的简写代替页面中的window.onload()（等价于$(window).load(function(){...})）
但是两者有区别:
一、加载的时机
window.onload:必须等到页面内包括图片的所有元素加载完毕后才能执行
$(document).ready(function(){})是DOM的结构绘制完毕就执行，不必等待加载完毕：

举个例子：

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title></title><!-- 引入jquery 文件 --><script type="text/javascript" src="js/jquery.1.3.2.min.js"></script><!-- 引入扩展jquery--><script type="text/javascript" src="js/jquery.extends.js"></script><script type="text/javascript">    // 情形一$(function(){$("#_inp").click(function(){alert("测试成功"); // 成功打印结果});});// 情形二$("#_inp").click(function(){alert("测试成功"); // 无法打印结果});</script></head><body><input id="_inp" type="button" value="测试"/><script type="text/javascript">// 情形三$("#_inp").click(function(){alert("测试成功"); // 成功打印结果});</script></body></html>

已上三种情形可以说明$(document).ready(funciton(){})是一个后执行函数
二、页面存在的数量：
window.onload:不能编辑多个，页面上只能有一个
$(document).ready()可以同时编写多个，并且都可以得到执行

阅读全文

0 0