大多数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. linux下怎么删除名称带空格的文件

    linux下怎么删除名称带空格的文件-rm 'mysql bin.000005' 用引号把文件名括起来 某些情况下会出现名称带空格的文件, 如果想要删除的话,直接用rm mysql bin.00000 ...

  2. C# 选项卡控件

    选项卡控件,它提供一系列操作按钮,单击不同的按钮可以在各个页面之间进行切换. 在Windows Form应用程序中,选项卡控件即“TebPage”控件,它公开“TebPage”属性,表示一个由“Tab ...

  3. system call filters failed to install; check the logs and fix your configuration or disable system call filters at your own risk

    elasticsearch启动时遇到的错误 这个是elasticsearch配置文件的问题. 解决办法: 在elasticsearch.yml配置文件中 添加     bootstrap.system ...

  4. python之常量和变量

    局部和全局变量: # name='lhf' # def change_name(): # # global name # name='帅了一比' # print('change_name',name) ...

  5. nmap扫描验证多种漏洞

    nmap在Kali Linux中是默认安装的.它不仅可以用来确定目标网络上计算机的存活状态,而且可以扫描各个计算机的操作系统.开放端口.服务,还有可能获得用户的证书. 命令结构: nmap -sS - ...

  6. 前端异步的一种方法库：axios

    关于axios,其实原本在做开发的几年里并不知道,一直使用的也都是jquery的ajax.后来因为一个同事的述说,我才知道有这么个库,基于promise的http库. 看来,以前的我确实比较井底之蛙了 ...

  7. mysql执行计划查看工具explain

    在优化sql语句时,我们经常会用到explain语句,这里对explain语句做一个详细的总结说明. The EXPLAIN statement provides information about ...

  8. php+redis，延迟任务 实现自动取消订单，自动完成订单

    简单定时任务解决方案:使用redis的keyspace notifications(键失效后通知事件) 需要注意此功能是在redis 2.8版本以后推出的,因此你服务器上的reids最少要是2.8版本 ...

  9. Pycharm创建Django项目并访问Django

    Pycharm创建Django项目并访问Django 一.Django插件 如果没有Django插件,需要先安装Django插件. 1,首先点击Default Settings,打开设置页面: 2,打 ...

  10. linux 实时显示网速bash

    执行方法先授权再运行 chmod +x shi.sh脚本+网卡名称 ./shi.sh ens33 #!/bin/bash while [ "1" ] do eth=$1 RXpre ...