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 相关文章推荐
extjs grid设置某列背景颜色和字体颜色的实现方法
Sep 06 Javascript
js判断是否为ie的方法小结
Jan 13 Javascript
DOM 事件流详解
Jan 20 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
Apr 16 Javascript
JavaScript判断undefined类型的正确方法
Jun 30 Javascript
基于Javascript实现倒计时功能
Feb 22 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
Apr 15 Javascript
javascript面向对象三大特征之多态实例详解
Jul 24 Javascript
微信小程序和H5页面间相互跳转代码实例
Sep 19 Javascript
nuxt 路由、过渡特效、中间件的实现代码
Nov 06 Javascript
JavaScript实现页面高亮操作提示和蒙板
Jan 04 Javascript
js实现自动锁屏功能
Jun 02 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制作简单的内容采集器的原理分析
2008/10/01 PHP
用PHP的超级变量$_GET获取HTML表单(Form) 数据
2011/05/07 PHP
PHP获取一段文本显示点阵宽度和高度的方法
2015/03/12 PHP
PHP的Yii框架中行为的定义与绑定方法讲解
2016/03/18 PHP
PHP模拟http请求的方法详解
2016/11/09 PHP
PHP实现微信提现功能
2018/09/30 PHP
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
2014/01/14 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
2016/02/21 Javascript
早该知道的7个JavaScript技巧
2016/06/21 Javascript
JS选取DOM元素的简单方法
2016/07/08 Javascript
最佳的JavaScript错误处理实践
2016/07/16 Javascript
JS正则匹配中文的方法示例
2017/01/06 Javascript
js模拟微博发布消息
2017/02/23 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
2018/08/31 Javascript
仿ElementUI实现一个Form表单的实现代码
2019/04/23 Javascript
基于JavaScript实现贪吃蛇游戏
2020/03/16 Javascript
JavaScript事件循环及宏任务微任务原理解析
2020/09/02 Javascript
利用Python抓取行政区划码的方法
2016/11/28 Python
matplotlib绘制动画代码示例
2018/01/02 Python
Python实现图片拼接的代码
2018/07/02 Python
python中68个内置函数的总结与介绍
2020/02/24 Python
基于jupyter代码无法在pycharm中运行的解决方法
2020/04/21 Python
Django返回HTML文件的实现方法
2020/09/17 Python
使用 CSS3 中@media 实现网页自适应的示例代码
2020/03/24 HTML / CSS
html5指南-7.geolocation结合google maps开发一个小的应用
2013/01/07 HTML / CSS
浅谈关于html5中图片抛物线运动的一些心得
2018/01/09 HTML / CSS
欧洲领先的电子和电信零售商和服务提供商:Currys PC World Business
2017/12/05 全球购物
中国汽车租赁行业头部企业:一嗨租车
2019/05/16 全球购物
大门门卫岗位职责
2013/11/30 职场文书
《青海高原一株柳》教学反思
2014/04/25 职场文书
员工薪酬激励方案
2014/06/13 职场文书
老干部座谈会主持词
2015/07/03 职场文书
给校长的建议书作文500字
2015/09/14 职场文书
2016年社区六一儿童节活动总结
2016/04/06 职场文书
几款流行的HTML5 UI框架比较(小结)
2021/04/08 HTML / CSS
对Keras自带Loss Function的深入研究
2021/05/25 Python