大多数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. curl 命令简介

    curl命令用于在命令行中发送HTTP请求: curl -i -H 'content-type: application/json' -X POST -d '{"name":&qu ...

  2. kali 开启ssh服务

    1.    一.配置SSH参数 修改sshd_config文件,命令为: vi /etc/ssh/sshd_config 将#PasswordAuthentication no的注释去掉,并且将NO修 ...

  3. Linux基础命令---netstat显示网络状态

    netstat netstat指令可以显示当前的网络连接.路由表.接口统计信息.伪装连接和多播成员资格等信息. 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.SUSE.open ...

  4. 前端框架VUE----vue的使用

    一.安装 对于新手来说,强烈建议大家使用<script>引入 二. 引入vue.js文件 我们能发现,引入vue.js文件之后,Vue被注册为一个全局的变量,它是一个构造函数. 三.使用V ...

  5. c# out ref parames的用法

    out ref parames的用法(将值传递转换成引用传递) Out 一般用于返回多个值,在方法体中会清空out变量,侧重于一个方法有多个返回值得时候使用 Ref有进有出,可以在方法体外必须赋初值, ...

  6. android之进度条

    xml引用 <ProgressBar android:id="@+id/pb_progressbar" style="@style/StyleProgressBar ...

  7. zabbix配置短信告警

    zabbix版本:3.0.7 短信服务商:云片网 首先在云片网添加相应签名和模板 参照格式 签名:xxx告警 模板: [xxx告警]故障:#status# 服务器:#host# 发生:#trigger ...

  8. JAVA基础部分 JDK和JRE以及JVM

    第一部分: 一.dos命令 *快捷查看电脑ip: Win + R进入cmd;输入ipconfig/all查看IPv4:192.168.0.xxx(首选); 基本命令: cd进入目录:d: 直接进入盘符 ...

  9. delete指针

    是释放指针所指向的内存,而不是删除指针本身

  10. 比较实用的前端 js框架 ,组件 汇总

    一.js 前端ui框架 Kendo UI 商用收费,组件丰富,界面简洁美观,有jQuery和angular两个js的版本 Webix 商用收费,组件丰富,界面特别美观 JQwidgets 商用收费,丰 ...