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 Eval 函数使用
Mar 23 Javascript
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
Feb 03 Javascript
单元选择合并变色示例代码
May 26 Javascript
seajs模块之间依赖的加载以及模块的执行
Oct 21 Javascript
jquery easyui validatebox remote的使用详解
Nov 09 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
Feb 15 Javascript
JavaScript基本类型值-Number类型
Feb 24 Javascript
SeaJS中use函数用法实例分析
Oct 10 Javascript
原生JS实现$.param() 函数的方法
Aug 10 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
Sep 14 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
Sep 18 Javascript
JS原生实现轮播图的几种方法
Mar 23 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
phpmyadmin 常用选项设置详解版
2010/03/07 PHP
php 网上商城促销设计实例代码
2012/02/17 PHP
PHP数组传递是值传递而非引用传递概念纠正
2013/01/31 PHP
php结合md5实现的加密解密方法
2016/01/25 PHP
javascript 带有滚动条的表格,标题固定,带排序功能.
2009/11/13 Javascript
jQuery实现类似滑动门切换效果的层切换
2013/09/23 Javascript
js中的preventDefault与stopPropagation详解
2014/01/29 Javascript
JS实现3D图片旋转展示效果代码
2015/09/22 Javascript
AngularJS入门教程之AngularJS模型
2016/04/18 Javascript
vue.js+boostrap项目实践(案例详解)
2016/09/21 Javascript
js输入框使用正则表达式校验输入内容的实例
2017/02/12 Javascript
jQuery插件zTree实现获取一级节点数据的方法
2017/03/08 Javascript
React diff算法的实现示例
2018/04/20 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
2019/06/27 Javascript
微信小程序开发常见问题及解决方案
2019/07/11 Javascript
解决vue-cli 打包后自定义动画未执行的问题
2019/11/12 Javascript
Node.js API详解之 os模块用法实例分析
2020/05/06 Javascript
python定时检查启动某个exe程序适合检测exe是否挂了
2013/01/21 Python
python使用matplotlib画饼状图
2018/09/25 Python
使用Python进行目录的对比方法
2018/11/01 Python
Django处理多用户类型的方法介绍
2019/05/18 Python
seek引发的python文件读写的问题及解决
2019/07/26 Python
Python如何使用turtle库绘制图形
2020/02/26 Python
翻转数列python实现,求前n项和,并能输出整个数列的案例
2020/05/03 Python
python和js交互调用的方法
2020/06/23 Python
深入了解Python enumerate和zip
2020/07/16 Python
python和opencv构建运动检测器的实现
2021/03/03 Python
Space NK美国站:英国高端美妆护肤商城
2017/05/22 全球购物
英国鹦鹉店:Parrot Essentials
2018/12/03 全球购物
MAC Cosmetics巴西官方网站:M·A·C彩妆
2019/04/18 全球购物
银行实习生自我鉴定范文
2013/09/19 职场文书
《自然之道》教学反思
2014/02/11 职场文书
抗洪救灾先进集体事迹材料
2014/05/26 职场文书
2014高考励志标语
2014/06/05 职场文书
2015年国庆节慰问信
2015/03/23 职场文书
困难补助申请报告
2015/05/19 职场文书