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 相关文章推荐
javascript英文日期(有时间)选择器
May 02 Javascript
javascript:void(0)的真正含义实例分析
Aug 20 Javascript
JS 密码强度验证(兼容IE,火狐,谷歌)
Mar 15 Javascript
JavaScript.Encode手动解码技巧
Jul 14 Javascript
jQuery查看选中对象HTML代码的方法
Jun 17 Javascript
jQuery中ScrollTo用法示例
Sep 04 Javascript
javascript 解决浏览器不支持的问题
Sep 24 Javascript
ionic2 tabs使用 Modal底部tab弹出框
Dec 30 Javascript
JavaScript创建对象的七种方式全面总结
Aug 21 Javascript
微信小程序页面缩放式侧滑效果的实现代码
Nov 15 Javascript
vue 根据选择条件显示指定参数的例子
Nov 09 Javascript
详解ECMAScript2019/ES10新属性
Dec 06 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控制用户的浏览器--ob*函数的使用说明
2007/03/16 PHP
PHP 向右侧拉菜单实现代码,测试使用中
2009/11/03 PHP
使用Sphinx对索引进行搜索
2013/06/25 PHP
php url路由入门实例
2014/04/23 PHP
详解WordPress中简码格式标签编写的基本方法
2015/12/22 PHP
ThinkPHP使用Ueditor的方法详解
2016/05/20 PHP
php版银联支付接口开发简明教程
2016/10/14 PHP
jQuery+.net实现浏览更多内容(改编php版本)
2013/03/28 Javascript
关于删除时的提示处理(确定删除吗)
2013/11/03 Javascript
JavaScript创建一个object对象并操作对象属性的用法
2015/03/23 Javascript
Javascript如何判断数据类型和数组类型
2016/06/22 Javascript
js中 计算两个日期间的工作日的简单实例
2016/08/08 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
2019/05/17 jQuery
VUE写一个简单的表格实例
2019/08/06 Javascript
解决layer.confirm选择完之后消息框不消失的问题
2019/09/16 Javascript
[47:46]完美世界DOTA2联赛 Magma vs GXR 第三场 11.07
2020/11/10 DOTA
Python Web开发模板引擎优缺点总结
2014/05/06 Python
Python制作爬虫采集小说
2015/10/25 Python
用Python的Flask框架结合MySQL写一个内存监控程序
2015/11/07 Python
python 将字符串转换成字典dict的各种方式总结
2018/03/23 Python
pandas series序列转化为星期几的实例
2018/04/11 Python
python中的单引号双引号区别知识点总结
2019/06/23 Python
Web页面中八种创建多列等高(等高列布局)的实现技术
2012/12/24 HTML / CSS
浅析HTML5:'data-'属性的作用
2018/01/23 HTML / CSS
携程英文网站:Trip.com
2017/02/07 全球购物
德国家用电器购物网站:Premiumshop24
2019/08/22 全球购物
银行服务感言
2014/03/01 职场文书
宣传口号大全
2014/06/16 职场文书
中学生爱国演讲稿
2014/09/05 职场文书
领导干部作风建设总结
2014/10/23 职场文书
2014年房地产销售工作总结
2014/12/01 职场文书
离婚被告代理词
2015/05/23 职场文书
Python离线安装openpyxl模块的步骤
2021/03/30 Python
python 统计代码耗时的几种方法分享
2021/04/02 Python
SpringCloud Alibaba项目实战之nacos-server服务搭建过程
2021/06/21 Java/Android
详解Python类和对象内容
2021/06/22 Python