大多数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. 【Alpha版本】冲刺阶段——Day5

    [Alpha版本]冲刺阶段--Day5 阅读目录 今日进展 问题困难 明日任务 今日贡献量 站立式会议 TODOlist [今日进展] 完成登录类代码 public void LOGIN() { co ...

  2. php小数加减精度问题，比特币计算精度问题

    php小数加减精度问题,比特币计算精度问题 在php开发时,有小数加减的场景.结果发现不能够等于预想的值,bccomp比较二个高精确度数字.语法: int bccomp(string left ope ...

  3. android studio 添加get,set方法快捷方式

    android studio 添加get,set方法快捷方式

  4. jquery遍历获取每一行数据进行对比

    $("#dtlTable tr:gt(0)").each(function(i){ var orderQtyBy = $("input[name='orderQtyBys ...

  5. echarts报错Can't get dom width or height

    echarts图无法显示 一直报错Can't get dom width or height 原因:显示echarts图的div要设置宽高 报错前: <div class="left_ ...

  6. 使用准现网的数据，使用本地的样式脚本，本地调试准现网页面（PC适用）

    原理: 本地逻辑,重新渲染 步骤: 1.安装插件:Tampermonkey 度盘:https://pan.baidu.com/s/1bpBVVT9 2.设置: 点击插件-->仪表盘 添加脚本 将 ...

  7. Linux环境nginx的安装

    安装Nginx前需要编译环境和库文件支持: 1.安装make: yum -y install openssl openssl-devel yum -y install gcc automake aut ...

  8. mysql日志种类、二进制日志模式、mysqlbinlog解析二进制日志

    mysql日志的种类 二进制日志(binary log):记录数据更新的操作,mysqlbinlog 可查看二进制日志文件 错误日志(error log):记录mysql服务进程mysqld的启动.关 ...

  9. elasticsearch配置文件详解

    来自:http://www.searchtech.pro/articles/2013/02/18/1361194291548.html elasticsearch的config文件夹里面有两个配置文 ...

  10. go开发工具及安装使用(Liteide)Liteide-centos6.8 安装

    开发工具介绍 LiteIDE https://github.com/visualfc/liteide/blob/master/liteidex/deploy/welcome/zh_CN/readme. ...