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 相关文章推荐
js客户端快捷键管理类的较完整实现和应用
Jun 08 Javascript
jquery 判断滚动条到达了底部和顶端的方法
Apr 02 Javascript
网页中表单按回车就自动提交的问题的解决方案
Nov 03 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
Nov 17 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
Mar 06 Javascript
JS实现数组简单去重及数组根据对象中的元素去重操作示例
Jan 05 Javascript
JSONP原理及应用实例详解
Sep 13 Javascript
JSX在render函数中的应用详解
Sep 04 Javascript
Echarts地图添加引导线效果(labelLine)
Sep 30 Javascript
解决node终端下运行js文件不支持ES6语法
Apr 04 Javascript
Node.js API详解之 assert模块用法实例分析
May 26 Javascript
如何在Vue.JS中使用图标组件
Aug 04 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 cron中的批处理
2008/09/16 PHP
PHP 登录完成后如何跳转上一访问页面
2014/01/14 PHP
PHP实现股票趋势图和柱形图
2015/02/07 PHP
PHP经典面试题之设计模式(经常遇到)
2015/10/15 PHP
php reset() 函数指针指向数组中的第一个元素并输出实例代码
2016/11/21 PHP
PHP图片裁剪与缩放示例(无损裁剪图片)
2017/02/08 PHP
php根据地址获取百度地图经纬度的实例方法
2019/09/03 PHP
CSS+JS构建的图片查看器
2006/07/22 Javascript
javascript:以前写的xmlhttp池,代码
2008/05/18 Javascript
使用EXT实现无刷新动态调用股票信息
2008/11/01 Javascript
javascript调试说明
2010/06/07 Javascript
jquery实现类似淘宝星星评分功能有截图
2014/09/15 Javascript
简介JavaScript中的push()方法的使用
2015/06/09 Javascript
javascript深拷贝的原理与实现方法分析
2017/04/10 Javascript
Node.js readline 逐行读取、写入文件内容的示例
2018/03/01 Javascript
简单的vuex 的使用案例笔记
2018/04/13 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
2018/07/16 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
2018/08/03 Javascript
一个小时快速搭建微信小程序的方法步骤
2019/04/15 Javascript
layui异步加载table表中某一列数据的例子
2019/09/16 Javascript
vue控制多行文字展开收起的实现示例
2019/10/11 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
2020/07/14 Javascript
Python入门及进阶笔记 Python 内置函数小结
2014/08/09 Python
Python创建日历实例
2014/08/21 Python
python 实现tar文件压缩解压的实例详解
2017/08/20 Python
keras模型保存为tensorflow的二进制模型方式
2020/05/25 Python
Python中pass的作用与使用教程
2020/11/13 Python
记一次python 爬虫爬取深圳租房信息的过程及遇到的问题
2020/11/24 Python
英国轻奢珠宝品牌:Astley Clarke
2016/12/18 全球购物
Crucial英睿达法国官网:内存条及SSD固态硬盘升级
2018/07/13 全球购物
医学生个人求职信范文
2013/09/24 职场文书
旅游网创业计划书
2014/01/31 职场文书
高三毕业典礼主持词
2014/03/27 职场文书
校园学雷锋广播稿
2014/10/08 职场文书
2014年个人工作总结模板
2014/12/15 职场文书
详解Java实践之建造者模式
2021/06/18 Java/Android