JQuery的ready函数与JS的onload的区别详解


Posted in Javascript onNovember 21, 2013

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

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

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

例子:

<!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>
Javascript 相关文章推荐
jQuery实现个性翻牌效果导航菜单的方法
Mar 09 Javascript
noty ? jQuery通知插件全面解析
May 18 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
Jun 17 Javascript
fullpage.js全屏滚动插件使用实例
Sep 06 Javascript
jQuery判断是否存在滚动条的简单方法
Sep 17 Javascript
AngularJS中的DOM操作用法分析
Nov 04 Javascript
JavaScript之Map和Set_动力节点Java学院整理
Jun 29 Javascript
浅谈vue首屏加载优化
Jun 28 Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
Aug 25 Javascript
在Vue中使用icon 字体图标的方法
Jun 14 Javascript
JavaScript React如何修改默认端口号方法详解
Jul 28 Javascript
避坑之 JavaScript 中的toFixed()和正则表达式
Apr 19 Javascript
js 实现菜单上下显示附效果图
Nov 21 #Javascript
javascript 数组排序函数sort和reverse使用介绍
Nov 21 #Javascript
js拖动div 当鼠标移动时整个div也相应的移动
Nov 21 #Javascript
js获取对象为null的解决方法
Nov 21 #Javascript
tangram框架响应式加载图片方法
Nov 21 #Javascript
使图片旋转的3种解决方案
Nov 21 #Javascript
js单例模式详解实例
Nov 21 #Javascript
You might like
php使用指定编码导出mysql数据到csv文件的方法
2015/03/31 PHP
php实现每日签到功能
2018/11/29 PHP
HTML node相关的一些资料整理
2010/01/01 Javascript
JavaScript中的集合及效率
2010/01/08 Javascript
js select常用操作控制代码
2010/03/16 Javascript
js全屏显示显示代码的三种方法
2013/11/11 Javascript
深入理解JS addLoadEvent函数
2016/05/20 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
2016/08/23 Javascript
微信开发 微信授权详解
2016/10/21 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
2016/11/29 Javascript
Bootstrap CSS布局之图像
2016/12/17 Javascript
简单实现js倒计时功能
2017/02/13 Javascript
JavaScript函数的4种调用方法实例分析
2019/03/05 Javascript
vue实现鼠标移入移出事件代码实例
2019/03/27 Javascript
详解nodejs http请求相关总结
2019/03/31 NodeJs
vue计算属性+vue中class与style绑定(推荐)
2020/03/30 Javascript
python学习必备知识汇总
2017/09/08 Python
centos6.5安装python3.7.1之后无法使用pip的解决方案
2019/02/14 Python
浅谈Python中eval的强大与危害
2019/03/13 Python
Python button选取本地图片并显示的实例
2019/06/13 Python
Python列表与元组的异同详解
2019/07/02 Python
解决django中ModelForm多表单组合的问题
2019/07/18 Python
利用ImageAI库只需几行python代码实现目标检测
2019/08/09 Python
python实现银行实战系统
2020/02/26 Python
使用HTML5 Geolocation实现一个距离追踪器
2018/04/09 HTML / CSS
翻新二手苹果产品的网络领导者:Mac of all Trades
2017/12/19 全球购物
中国跨镜手机配件批发在线商店:TVC-Mall
2019/08/20 全球购物
美国最大最全的亚洲购物网站:美国亚米网(Yamibuy)
2020/05/05 全球购物
数据库基础的一些面试题
2012/02/25 面试题
吃空饷专项治理工作实施方案
2014/03/04 职场文书
《真想变成大大的荷叶》教学反思
2014/04/14 职场文书
小学班长竞选演讲稿
2014/04/24 职场文书
2016参观监狱警示教育活动心得体会
2016/01/15 职场文书
2019年大学毕业生个人自我鉴定范文大全
2019/03/21 职场文书
解决redis批量删除key值的问题
2022/03/23 Redis
详解ZABBIX监控ESXI主机的问题
2022/06/21 Servers