JQuery的ready函数与JS的onload的区别：
1.执行时间
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

2.编写个数不同
window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个
$(document).ready()可以同时编写多个，并且都可以得到执行

3.简化写法
window.onload没有简化写法
$(document).ready(function(){})可以简写成$(function(){});

在我以前的开发中，一般用到javascript，我都是采用jquery的模式，也就是大多数时候，第一行写的是：

$(document).ready(function(){

…

});

这个时候，不一定要等所有的js和图片加载完毕，就可以执行一些方法，不过有些时候，必须要等所有的

元素都加载完毕，才可以执行一些方法的时候，比如说，部分图片或者什么其他方面还没有加载好，这个时候，点击某些按钮，会导致出现意外的情况，这个时候，就

需要用到:

$(window).load(function() {

…

});

eg:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>ready和js中的onload的区别</title>

<script type="text/javascript" src="jquery-core/jquery-1.8.0.js"></script>

<script type="text/javascript">

//js中window对象的onload属性执行jsFunction1函数

window.onload=jsFunction1;

//js中window对象的onload属性执行jsFunction2函数

window.onload=jsFunction2;

//jquery的ready方法执行jqFunction1函数

$(document).ready(jqFunction1);

//jquery的ready方法执行jqFunction2函数

$(document).ready(jqFunction2);

//jsFunction1函数

function jsFunction1(){

alert("jsFunction1");

}

//jsFunction2函数

function jsFunction2(){

alert("jsFunction2");

}

//jqFunction1函数

function jqFunction1(){

alert("jqFunction1");

}

//jqFunction2函数

function jqFunction2(){

alert("jqFunction2");

}

</script>

</head>

<body>

<h1>ready和js中的onload的区别</h1>

</body>

</html>

JQuery的ready函数与JS的onload的区别详解的更多相关文章

  1. js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解

    1 escape()函数 定义和用法 escape() 函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串. 语法 escape(string) 参数 描述 string 必需.要被转义或 ...

  2. javascript函数setInterval和setTimeout的使用区别详解

    setTimeout和setInterval的使用 这两个方法都可以用来实现在一个固定时间段之后去执行JavaScript.不过两者各有各的应用场景. 方 法 实际上,setTimeout和setIn ...

  3. 学习 easyui 之二：jQuery 的 ready 函数和 easyloader 的加载回调函数

    Ready 事件不一定 ready 使用 easyloader 的时候,必须要注意到脚本的加载时机问题,easyloader 会异步加载模块,所以,你使用的模块不一定已经加载了.比如下面的代码. &l ...

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

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

  5. jQuery height()、innerHeight()、outerHeight()函数的区别详解

    参考来源:http://www.jb51.net/article/84897.htm 代码示例(可复制到编辑器直接打开): <!DOCTYPE html> <html lang=&q ...

  6. jquery的offset().top和js的offsetTop的区别，以及jquery的offset().top的实现方法

    jquery的offset().top和js的offsetTop的区别,以及jquery的offset().top的实现方法 offset().top是JQ的方法,需要引入JQ才能使用,它获取的是你绑 ...

  7. jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解

    jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...

  8. 微信JS接口汇总及使用详解

    这篇文章主要介绍了微信JS接口汇总及使用详解,十分的全面.详尽,包含分享到朋友圈,分享给朋友,分享到QQ,拍照或从手机相册中选图,识别音频并返回识别结果,使用微信内置地图查看位置等接口,有需要的小伙伴 ...

  9. js对象浅拷贝和深拷贝详解

    js对象浅拷贝和深拷贝详解 作者:i10630226 字体:[增加 减小] 类型:转载 时间:2016-09-05我要评论 这篇文章主要为大家详细介绍了JavaScript对象的浅拷贝和深拷贝代码,具 ...

随机推荐

  1. MediaCodec文档翻译

    MediaCodec|文档翻译 classoverView mediacodec类可以用来调用系统底层的编码/解码软件. mediacodec一般是这么用的: MediaCodec codec = M ...

  2. android 中Log - 简单使用

    例如,我们可以使用'Log.d'进行Debug,在java代码中输入Log.d(String tag, String message),tag为自己命名的tag,message为待输出的信息.然后打开 ...

  3. excel - 统计字符个数综合案例

    本文通过一个综合的案例来介绍excel统计字符数的一些方法和思路,供大家参考和学习. 下图是一个excel数据源截图,我们逐一讲解不同条件的统计字符数. 第一,统计A2所有的字符数,不论是汉字和数字. ...

  4. ReetrantLock Synchronized Atomic的性能对比

    之前看到了一篇帖子关于Lock和Synchronized的性能,写的是Lock比Synchronized的性能要好,可是,我试了下,结果却不是这样的,我所使用的JDK的版本是1.7,可能跟原帖作者用的 ...

  5. UVA 10254 - The Priest Mathematician (dp | 汉诺塔 | 找规律 | 大数)

    本文出自   http://blog.csdn.net/shuangde800 题目点击打开链接 题意: 汉诺塔游戏请看 百度百科 正常的汉诺塔游戏是只有3个柱子,并且如果有n个圆盘,至少需要2^n- ...

  6. Python正则表达式+自创口诀

    重新学习了Python正则表达式,看了一些很好的学习博客,向大家推荐这个. 感谢作者@AstralWind 博客地址:http://www.cnblogs.com/huxi/archive/2010/ ...

  7. 面向对象设计模式之Interpreter解释器模式（行为型）

    动机:在软件构建过程中 ,如果某一特定领域的问题比较复杂,类似的模式不断重复出现,如果使用普通的编程方式来实现将面临非常频繁的变化.在这种情况下,将特定领域的问题表达为某种语法规则的句子,然后构建一个 ...

  8. 如何用angularjs制作一个完整的表格之四__自定义ng-model标签的属性使其支持input之外的html元素

    有的时候我们需要为非input类型的元素添加ng-model来实现双向的数据绑定,从而减少冗余代码,那么可以尝试一下的方式 例如:我页面中使用了contenteditable这个属性来实现用户可直接编 ...

  9. [转]JS继承的5种实现方式

    参考链接: http://yahaitt.iteye.com/blog/250338 虽说书上都讲过继承的方式方法,但这些东西每看一遍都多少有点新收获,所以单独拿出来放着. 1. 对象冒充 funct ...

  10. python:UnboundLocalError: local variable 'xxx' referenced before assignment

    近来一直都在学习python语言,偶然在伯乐在线看到2017年京东C/C++的面试题.就打算用python+ST3 IDE顺便敲下面试题代码. 原题 C语言: #include <stdio.h ...