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. 新闻web小酌

    首页如上 类图如下: 添加新闻的方法(dao): public boolean Add(News news) { boolean flag=false; Connection con =getConn ...

  2. 本文实例汇总了C#中@的用法，对C#程序设计来说有不错的借鉴价值。

    具体如下: 一 字符串中的用法 1.学过C#的人都知道C# 中字符串常量可以以@ 开头声名,这样的优点是转义序列“不”被处理,按“原样”输出,即我们不需要对转义字符加上 \ (反斜扛),就可以轻松co ...

  3. Android定时器功能实现方法

    在Android开发中,定时器一般有以下3种实现方法: 1.采用Handler与线程的sleep(long)方法 2.采用Handler的postDelayed(Runnable, long)方法 3 ...

  4. web-请求无缓存

    <head><META HTTP-EQUIV="pragma" CONTENT="no-cache"><META HTTP-EQU ...

  5. flash与php 交互（as传参给php）

    一种 不传参 直接读取PHP文件 btn.addEventListener(MouseEvent.CLICK,loadTxt);function loadTxt(evt:MouseEvent):voi ...

  6. android-'Using 1.7 requires compiling with Android 4.4 (KitKat); currently using API 8'

    解决的方案是将jdk1.7制定的版本定制为jdk.6.即 在eclipse中,右键项目->Properties->Java Compiler->enable "projec ...

  7. aborb（）程序结束形式

    abort()与exit()的区别?         分类:             MFC              2011-01-04 14:13     2233人阅读     评论(0)   ...

  8. JavaScript 目标装配式编程(Target Assemble Programming)

    TAP概述 脚本中一切皆对象,若还以传统模式思考编程模式,那简直是对不起脚本解释器的强大支持:我们应该以最接近人类操作方式的来表达人的意图. 更接近工作实践的方式,比如游戏中,一个人物一个角色,人物的 ...

  9. 最全CSS3选择器

    一,CSS3 选择器分类 二,选择器语法 1,基本选择器语法 选择器 类型 功能描述 *  通配选择器  选择文档中所以HTML元素 E  元素选择器 选择指定类型的HTML元素 #id  ID选择器 ...

  10. cxf框架使用(一)

    1.创建调用接口 @WebService public interface IQueryBusinessService { public @WebResult(name="QueryBusi ...