js中window.onload 与 jquery中$(document.ready())差别，验证代码例如以下(调换js代码和Jquer代码书写顺序測试。执行结果一样。因此与代码书写位置没关系)：

<html>

<head>

<script type='text/javascript' src='jquery-1.11.1.min.js'></script>

<script type='text/javascript'>

    $(document).ready(function(){

		var myDate = new Date();

		var hours=myDate.getHours();       //获取当前小时数(0-23)

		var minutes=myDate.getMinutes();     //获取当前分钟数(0-59)

		var seconds=myDate.getSeconds();     //获取当前秒数(0-59)

		var milliseconds=myDate.getMilliseconds();    //获取当前毫秒数(0-999)

		console.log("【$(document).ready()】当前时间："+hours+"时"+minutes+"分"+seconds+"秒"+milliseconds+"毫秒");

		console.log("【$(document).ready()】先载入DOM结构,再运行当前JS,后载入大型图片及内容");

    });

   //***************

   window.onload=function(){

	    var myDate = new Date();

		var hours=myDate.getHours();       //获取当前小时数(0-23)

		var minutes=myDate.getMinutes();     //获取当前分钟数(0-59)

		var seconds=myDate.getSeconds();     //获取当前秒数(0-59)

		var milliseconds=myDate.getMilliseconds();    //获取当前毫秒数(0-999)

		console.log("【window.onload】当前时间："+hours+"时"+minutes+"分"+seconds+"秒"+milliseconds+"毫秒");

	    console.log("【window.onload】先载入DOM结构,后载入大型图片及内容,再运行当前JS");

	}

   //***************

</script>

</head>

<body>

	<pre>

		说明：$(document).ready()是在DOM结构载入完后运行的，而window.onload是得在全部文件都载入完后运行的；

		注意差别，一个是DOM载入完。一个是全部文件载入完。

		所谓DOM载入完。就是指DOM模型载入完。也就是指代码载入完。

		两者最大的差别。就是DOM载入完之后。不必再去等对应的图片载入完就能够运行JS代码了。

</pre>

	<img src='img.jpg'/><img src='img1.jpg'/><img src='img2.jpg'/><img src='img3.jpg'/><img src='img4.jpg'/>

	<img src='img.jpg'/><img src='img1.jpg'/><img src='img2.jpg'/><img src='img3.jpg'/><img src='img4.jpg'/>

	<img src='img.jpg'/><img src='img1.jpg'/><img src='img2.jpg'/><img src='img3.jpg'/><img src='img4.jpg'/>

	<img src='img.jpg'/><img src='img1.jpg'/><img src='img2.jpg'/><img src='img3.jpg'/><img src='img4.jpg'/>

	<img src='img.jpg'/><img src='img1.jpg'/><img src='img2.jpg'/><img src='img3.jpg'/><img src='img4.jpg'/>

	<img src='img.jpg'/><img src='img1.jpg'/><img src='img2.jpg'/><img src='img3.jpg'/><img src='img4.jpg'/>

	<img src='img.jpg'/><img src='img1.jpg'/><img src='img2.jpg'/><img src='img3.jpg'/><img src='img4.jpg'/>

	<img src='img.jpg'/><img src='img1.jpg'/><img src='img2.jpg'/><img src='img3.jpg'/><img src='img4.jpg'/>

	<img src='img.jpg'/><img src='img1.jpg'/><img src='img2.jpg'/><img src='img3.jpg'/><img src='img4.jpg'/>

	<img src='img.jpg'/><img src='img1.jpg'/><img src='img2.jpg'/><img src='img3.jpg'/><img src='img4.jpg'/>

	<img src='img.jpg'/><img src='img1.jpg'/><img src='img2.jpg'/><img src='img3.jpg'/><img src='img4.jpg'/>

	</body>

</html>

执行截图：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

总结：

$(document).ready()是在DOM结构载入完后运行的，而window.onload是得在全部文件都载入完后运行的；

所谓DOM载入完，就是指DOM模型载入完，也就是指代码载入完。两者最大的差别。就是DOM载入完之后，不必再去等对应的图片载入完就能够运行JS代码了。

js中window.onload 与 jquery中$(document.ready()) 測试的更多相关文章

  1. JS的window.onload与JQuery的$(document).ready(function(){})的区别

    前段时间去面试被问及JS的加载(onload)与jQuery中加载(ready)方法的区别,瞬时懵逼了,关于这个知识点平时还真没怎么注意. 最近先来无事便查了一下资料, onload 事件(W3c上给 ...

  2. JS中的onload与jQuery中的ready差别

    jQuery的运行机制(onload与ready的差别) 结论得出前自行測试: 为了測试是否真如所说的那样,所以在页面插入了20000张照片,照片数量少得不出什么结论,所以改用console.log( ...

  3. window.onload、DOMContentLoaded和$(document).ready()

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  4. jQuery中$(function(){})与(function($){})(jQuery)、$(document).ready(function(){})等的区别详细讲解

    1.(function($) {…})(jQuery); 1).原理: 这实际上是匿名函数,如下: function(arg){…} 这就定义了一个匿名函数,参数为arg 而调用函数时,是在函数后面写 ...

  5. jQuery中$(function(){})与(function($){})(jQuery)、$(document).ready(function(){})等的区别详细讲解 ----转载

    1.(function($) {-})(jQuery); 1).原理: 这实际上是匿名函数,如下: function(arg){-} 这就定义了一个匿名函数,参数为arg 而调用函数时,是在函数后面写 ...

  6. jQuery中$(function(){})与(function($){})(jQuery)、$(document).ready(function(){})等的区别详解

    1.(function($) {…})(jQuery); 1).原理: 这实际上是匿名函数,如下: function(arg){…} 这就定义了一个匿名函数,参数为arg 而调用函数时,是在函数后面写 ...

  7. jq中$(function(){})和js中window.onload区别

    先看下执行代码: $(function(){   console.log("jq");}) $(function(){   console.log("jq1") ...

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

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  9. javascript的window.onload()方法和jQuery的$(document).ready()的对比

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

随机推荐

  1. Linux 编译升级 FFmpeg 步骤

    如果服务器已经安装了一个 Ffmpeg 的话,比如已安装在 /usr/local/ffmpeg 目录.Linux下版本升级步骤如下: 1.下载 ffmpeg-*.tar.gz到 Ffmpeg 官网 h ...

  2. Eclipse启动的时候提示：Failed to load JavaHL Library

    版本信息: Eclipse Project Release Notes Release 4.7.3 启动提示: Subclipse talks to Subversion via a Java API ...

  3. Hibernate的持久化对象配置

    定义Pojo对象和**.hbm.xml文件 -1 对于每一个需要持久化的对象都需要创建一个Pojo类定义,Hibernate要求POJO类定义中必须有一个no-argument的构造方法,便于Hibe ...

  4. 学习PyQuery库

    学习PyQuery库 好了,又是学习的时光啦,今天学习pyquery 来进行网页解析 常规导入模块(PyQuery库中的pyquery类) from pyquery import PyQuery as ...

  5. Linux 命令大全 - 管理文件和目录的命令

    1.pwd 显示当前目录 该命令的英文解释为print working directory(打印工作目录).输入pwd命令,Linux会输出当前目录. 2.cd 命令用来改变所在目录 cd / 转到根 ...

  6. Selenium加载Chrome/Firefox浏览器配置文件

    Selenium启动浏览器时,默认是打开一个新用户,不会加载原有的配置以及插件.但有些时候我们可能需要加载默认配置. 一.Chrome浏览器 1.在Chrome浏览器的地址栏输入:chrome://v ...

  7. robotframework使用requestsLibrary进行接口测试

    一.定义 接口测试:接口测试通常是系统之间交互的接口,或者某个系统对外提供的一些接口服务 分类:RESTful.webservice接口 二.安装 进入C:\Pyhon27\scripts 先要安装r ...

  8. 大数据学习——服务器定期上传nginx日志到hdfs

    需求:按照所学知识完成如下: 服务器定期上传nginx日志到hdfs 提示: Hdfs的创建文件夹命令: Hadoop fs -mkdir /文件夹名称 Hdfs的上传命令: Hadoop fs -p ...

  9. Leetcode 300.最长上升子序列

    最长上升子序列 给定一个无序的整数数组,找到其中最长上升子序列的长度. 示例: 输入: [10,9,2,5,3,7,101,18] 输出: 4 解释: 最长的上升子序列是 [2,3,7,101],它的 ...

  10. 【java】基础语法

    集合   单线程 并发 Lists ArrayList——基于泛型数组 LinkedList——不推荐使用 Vector——已废弃(deprecated) CopyOnWriteArrayList—— ...