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对象的浅拷贝和深拷贝代码,具 ...
随机推荐
- 9.7noip模拟试题
题目名称 日历游戏 最大公约数 密码 英文代号 calendar gcd pasuwado 输入文件名 calendar.in gcd.in pasuwado.in 输出文件名 calendar.ou ...
- 简单图片banner轮播
/**************[css]****************/ <style type="text/css"> *{margin:0px; ...
- (转)PHP函数set_magic_quotes_runtime()的作用
新手经常遇到的问题是特殊字符提交的时候提示数据库错误,今天给大家介绍一个set_magic_quotes_runtime函数,来帮助我们过滤里面的内容 php函数 set_magic_quotes_r ...
- XML 标记使用的特殊字符对应内置实体
下表为 XML 标记使用的字符列出了五种内置实体. 实体 实体引用 含义 lt < <(小于号) gt > >(大于号) amp & &(“and”符) a ...
- iOS9 中的一些适配问题
1.URL scheme白名单:在info文件中加入LSApplicationQueriesSchemes(Array),添加需要的scheme,如微信:weixin.wechat 支付宝:alipa ...
- Oracle Pl/SQL编程基础
Pl/SQL简介 提高应用程序的运行性能, 提供模块化的程序设计, 自定义标示符, 具有过程语言控制结构, 良好的兼容性, 处理运行错误. Pl/SQL语言基础 sql是关系数据库的基本操作语言. s ...
- mysql 字符串拼接函数CANCAT()与GROUP_CANCAT()
1.CONCAT() 拼接单行字符串 select concat(‘100’,user_id) from table1; select concat('11','22','33'); 结果 11223 ...
- __PUBLIC__模板文件路径配置
__PUBLIC__ 默认指向 项目文件下的Public文件夹 注意: __PUBLIC__不是一个常量,只在模板中进行替换,__ROOT__是一个常量 项目文件路径 defined('__PUBLI ...
- Phalcon 的分流bootstrap 设计 主程序入口
<?php use \Phalcon\DI\FactoryDefault as PhDi; error_reporting(E_ALL); date_default_timezone_set(' ...
- 转:使用Jazz Automation编写自动化测试
Jazz Automation介绍 Jazz Automation是一个测试框架,构建它的目的是为所有类型的Web系统或者静态网站自动化同时加速验收/功能测试.它还能够容易地实现自动化集成测试.以前的 ...