JQuery的ready函数与JS的onload的区别详解
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的区别详解的更多相关文章
- js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
1 escape()函数 定义和用法 escape() 函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串. 语法 escape(string) 参数 描述 string 必需.要被转义或 ...
- javascript函数setInterval和setTimeout的使用区别详解
setTimeout和setInterval的使用 这两个方法都可以用来实现在一个固定时间段之后去执行JavaScript.不过两者各有各的应用场景. 方 法 实际上,setTimeout和setIn ...
- 学习 easyui 之二：jQuery 的 ready 函数和 easyloader 的加载回调函数
Ready 事件不一定 ready 使用 easyloader 的时候,必须要注意到脚本的加载时机问题,easyloader 会异步加载模块,所以,你使用的模块不一定已经加载了.比如下面的代码. &l ...
- jQuery中$(function(){})与(function($){})(jQuery)、$(document).ready(function(){})等的区别详解
1.(function($) {…})(jQuery); 1).原理: 这实际上是匿名函数,如下: function(arg){…} 这就定义了一个匿名函数,参数为arg 而调用函数时,是在函数后面写 ...
- jQuery height()、innerHeight()、outerHeight()函数的区别详解
参考来源:http://www.jb51.net/article/84897.htm 代码示例(可复制到编辑器直接打开): <!DOCTYPE html> <html lang=&q ...
- jquery的offset().top和js的offsetTop的区别，以及jquery的offset().top的实现方法
jquery的offset().top和js的offsetTop的区别,以及jquery的offset().top的实现方法 offset().top是JQ的方法,需要引入JQ才能使用,它获取的是你绑 ...
- jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解
jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...
- 微信JS接口汇总及使用详解
这篇文章主要介绍了微信JS接口汇总及使用详解,十分的全面.详尽,包含分享到朋友圈,分享给朋友,分享到QQ,拍照或从手机相册中选图,识别音频并返回识别结果,使用微信内置地图查看位置等接口,有需要的小伙伴 ...
- js对象浅拷贝和深拷贝详解
js对象浅拷贝和深拷贝详解 作者:i10630226 字体:[增加 减小] 类型:转载 时间:2016-09-05我要评论 这篇文章主要为大家详细介绍了JavaScript对象的浅拷贝和深拷贝代码,具 ...
随机推荐
- 关于JS中查看当前节点的兄弟节点的使用
<tr> <td align="center"><input style="width: 20px;" type="ch ...
- .NET aspx页面中的按钮无法响应事件
原因只有一个,页面中存在多个form标签.按Ctrl+F,找到多余的删掉即可
- 解决 oracle 错误ORA-01033
数据库在导入数据的过程中,意外关机.重启机器后,pl/sql-developer不能登录数据库,报错ORA-01033:oracle initializationor shutdown in prog ...
- log4net 生成多个空文件问题
使用 log4net 的伙伴,相信很多人会遇到我现在这个问题 ,一般项目需求,便于管理和查找原因,会让项目的日志文件分类记录,然而会出现很多空日志, 出现这个问题的原因通常是我们web.config配 ...
- （多对象）Json转换成List
写的不好,请大家见谅. 1.Json 格式{"packages":[{“type”:”aaa”}],"zone_packages":[{"ticket ...
- amCharts 破解
官网下载 http://www.amcharts.com 然后找到amcharts.js , 打开搜索关键字 “utm_source=swf&utm_medium=demo&utm_c ...
- iOS9中将图片保存到照片中的某个相册的方法说明
iOS9中将图片保存到照片中的某个相册的方法说明 在App中很经常遇到的就是用户点击某张图片后将图片保存到本地,下面介绍下iOS中保存图片的一些东西 1.首先,在iOS中把图片保存到系统照片是比较简单 ...
- 认识<img>标签，为网页插入图片
在网页的制作中为使网页炫丽美观,肯定是缺少不了图片,可以使用<img>标签来插入图片. 语法: <img src="图片地址" alt="下载失败时的替 ...
- C#(WinForm)上传图片保存到数据库和从数据库读取图片显示到窗体
//浏览图片 private void btnUp_Click(object sender, EventArgs e) { OpenFileDialog ofd = new OpenFileDialo ...
- Delphi PChar与String互转
1.String转化成PChar 例: var str: string; pStr:PChar; ... pStr := PChar(str); 2.PChar转String 例: var pStr: ...