大多数jQuery实例或教程都告诉我们绑定我们的jQuery代码到$(document).ready事件。虽然$(document).ready 事件在大多数情况下都OK，但是它的解析顺序是在文档准备就绪，但文档中的图片等对象正在下载的时候开始运行的。所以在某些时候使 用$(document).ready事件并不一定能达到我们预期的效果，比如一些视觉效果和动画、拖拽、预读取隐藏图片等…通过使 用$(window).load事件便可以安全的在整个文档都准备就绪之后再开始运行你期望的代码。

$(window).load(function(){
// 将你希望在页面完全就绪之后运行的代码放在这里
});

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

Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法，不过与window.onload方法还是有区别的。

1.执行时间 
        window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 
        $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。 
2.编写个数不同 
         window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个 
         $(document).ready()可以同时编写多个，并且都可以得到执行 
3.简化写法 
         window.onload没有简化写法 
         $(document).ready(function(){})可以简写成$(function(){});

 
 
 

用$(window).load(function(){...})而不用body.onload()的几个理由
首先它们都是在页面所有元素(包括html标签以及引用到得所有图片,Flash等媒体)加载完毕后执行的,这是它们的共同点.

不用body.Onload()理由1：

如果我们想同时加载多个函数,我们必须这样写

<body onload="fn1(),fn2()"></body>看起来极其丑陋,如果用$(window).load()我们可以这样加载多个函数

 
 $(window).load(function() {

            alert("hello,我是jQuery!");

  });

 $(window).load(function() {

        alert("hello,我也是jQuery");

 });
 

不用body.Onload()理由2：

用body.Onload()不能够做到js和html完全分离,这是一个很严重的问题.

另外用$(window).load(function(){...})和body.onload()都存在同样一个问题,因为开始也说到了,它们都需要等到页面的所有内容

加载完毕才执行,但是如果当网速比较慢的时候,加载一个页面往往需要较长的时间(几秒到十几秒不等,甚至更长...),所以我们经常

会遇到页面还没有完全加载完毕而用户已经在操作页面了这种情况,这样页面表现出来的效果就跟我们预期的效果不一样了,

所以在这里我推荐使用$(document).ready(function(){}),或简写为$(function(){})，因为他会在页面的dom元素加载完毕后就执行,

而无需等到图片或其他媒体下载完毕.

但是有时候确实我们有需要等到页面的所有东西都加载完后再执行我们想执行的函数,所以是该使用$(window).load(function(){...})还是

该使用$(function(){})往往需要结合具体需要而作不同的选择.

最后附上一段在所有DOM元素加载之前执行的jQuery代码

<script type="text/javascript">

(function() {

            alert("DOM还没加载哦!");

        })(jQuery)

  </script>

jquery的$(window).load和原生js的window.onload的使用方法：

$(window).load(function() {

    //jquery代码

});
 
window.onload=function(){

   var obj=document.getElementById("TableA").getElementsByTagName("td");

   if(!obj){return false}

   for(var i=0;i<obj.length;i++){

       obj[i].onfocus=function(){this.style.background="#ff0000"}

       obj[i].onblur=function(){this.style.background="";}

   }

}
 

源：http://www.cnblogs.com/Chen-XiaoJun/articles/5829876.html

jQuery中的$(window).load()与$(document).ready()以及jquery $(document).ready() 与window.onload的区别的更多相关文章

  1. Jquery中$(document).ready() 和 JavaScript中的window.onload方法 比较

    Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的.   1.执行时间 win ...

  2. $(window).load(function() {})和$(document).ready(function(){})的区别

    JavaScript 中的以下代码 : Window.onload = function (){// 代码 }  等价于  Jquery 代码如下: $(window).load(function ( ...

  3. $(document).ready()与window.onload的区别，站在三个维度回答问题

    1.执行时机 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行.         $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 2 ...

  4. jQuery（4）—— jQuery中的事件

    jQuery中的事件 [加载DOM] 在常规的JavaScript代码中,通常使用window.onload方法,在jQuery中,使用的是$(document).ready()方法.极大地提高了we ...

  5. jQuery中 end(); 的用法

    jQuery中的end()方法的意思 选取某个元素,查找选取其子元素,然后再回过来选取这个元素.用例子说明了一下: 比如HTML代码: <p><span>Hello</s ...

  6. 深入理解ajax系列第九篇——jQuery中的ajax

    前面的话 jQuery提供了一些日常开发中需要的快捷操作,例如load.ajax.get和post等,使用jQuery开发ajax将变得极其简单.这样开发人员就可以将程序开发集中在业务和用户体验上,而 ...

  7. jQuery中的end()方法

    定义和用法 end() 方法结束当前链条中的最近的筛选操作,并将匹配元素集还原为之前的状态. 以上是官方说法,比较难理解. 还是用一个例子来说明 <!DOCTYPE html> <h ...

  8. js和JQuery中offset等属性对比

    HTML: 内容在滚动条下面 <div id="outerDiv"> <div id="myDiv" class="myDiv&qu ...

  9. jQuery中hover与mouseover和mouseout的区别分析

    本文实例分析了jQuery中hover与mouseover和mouseout的区别.分享给大家供大家参考,具体如下: 以前一直以为在jquery中其实mouseover和mouseout两个事件等于h ...

随机推荐

  1. python pandas简单使用处理csv文件

    这里jira.csv是个大文件 1) >>> import pandas >>> jir=pandas.read_csv(r'C:\Temp\jira.csv') ...

  2. Jersey入门——注解的使用

    本文主要解释Jersey中各种注解的使用 package com.coshaho.learn.jersey; import java.net.URI; import javax.ws.rs.Consu ...

  3. html 基本布局介绍

    1.div默认是纵向排列的,例子如下: <div id="wrap"> <div id="div1">div1</div> ...

  4. 自制TFT-Usart通信小项目资料打包

    2010-05-08 15:05:00 用orcad画的原理图如下.

  5. CentOS7 zabbix服务 简单安装文档

    1. 简介 zabbix是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案. zabbix能监视各种网络参数,保证服务器系统的安全运营:并提供灵活的通知机制以让系统管理员快 ...

  6. Linux：编译安装boost 1.69库

    Boost库是为C++语言标准库提供扩展的一些C++程序库的总称,由Boost社区组织开发.维护.在C++的地位感觉可以和Spring在Java中相比. boost向来有准标准库之称,很多新特性例如智 ...

  7. 前端框架VUE----cli脚手架（框架）

    一.创建vue项目 npm install vue-cli -g #-g全局 (sudo)npm install vue-cli -g #mac笔记本 vue-init webpack myvue # ...

  8. USB开发库STSW-STM32121文件分析（转）

    源: USB开发库STSW-STM32121文件分析

  9. Python笔记 #21# DHNN

    离散型hopfield神经网络.参考自http://web.cs.ucla.edu/~rosen/161/notes/hopfield.html实现的草稿版本: # http://web.cs.ucl ...

  10. 基于RHEL6.3 安装MySQL踩过的坑

    MySQL版本:Percona-Server-5.6.29 OS:RHEL6.3 安装出错 [mysql@oracle ~]$ /home/mysql/scripts/mysql_install_db ...