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 深拷贝函数
Dec 04 Javascript
namespace.js Javascript的命名空间库
Oct 11 Javascript
JS将表单导出成EXCEL的实例代码
Nov 11 Javascript
js校验表单后提交表单的三种方法总结
Feb 28 Javascript
javascript轻量级模板引擎juicer使用指南
Jun 22 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
Aug 28 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
Dec 10 Javascript
js生成随机数(指定范围)的实例代码
Jul 10 Javascript
Angular2利用组件与指令实现图片轮播组件
Mar 27 Javascript
vue中过滤器filter的讲解
Jan 21 Javascript
监听element-ui table滚动事件的方法
Mar 26 Javascript
js消除图片小游戏代码
Dec 11 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
ThinkPHP控制器里javascript代码不能执行的解决方法
2014/11/22 PHP
php实现遍历文件夹的方法汇总
2017/03/02 PHP
Packer 3.0 JS压缩及混淆工具 下载
2007/05/03 Javascript
起点页面传值js,有空研究学习下
2010/01/25 Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
2013/04/11 Javascript
jquery动态更换设置背景图的方法
2014/03/25 Javascript
对之前写的jquery分页做下升级
2014/06/19 Javascript
浅谈Javascript的静态属性和原型属性
2015/05/07 Javascript
js实现带圆角的多级下拉菜单效果
2015/08/28 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
2016/10/05 Javascript
vue实现可增删查改的成绩单
2016/10/27 Javascript
angularjs路由传值$routeParams详解
2020/09/05 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
2019/04/28 Javascript
Node.js操作MongoDB数据库实例分析
2020/01/19 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
2020/07/30 Javascript
[04:00]黄浦江畔,再会英雄——完美世界DOTA2 TI9应援视频
2019/07/31 DOTA
为Python的web框架编写MVC配置来使其运行的教程
2015/04/30 Python
深入浅析python中的多进程、多线程、协程
2016/06/22 Python
Python的Tornado框架实现图片上传及图片大小修改功能
2016/06/30 Python
使用Python将数组的元素导出到变量中(unpacking)
2016/10/27 Python
Mac 上切换Python多版本
2017/06/17 Python
Python3实现简单可学习的手写体识别(实例讲解)
2017/10/21 Python
轻松实现TensorFlow微信跳一跳的AI
2018/01/05 Python
Django中的cookie和session
2019/08/27 Python
修改 CentOS 6.x 上默认Python的方法
2019/09/06 Python
Python+Kepler.gl轻松制作酷炫路径动画的实现示例
2020/06/02 Python
keras 多任务多loss实例
2020/06/22 Python
django haystack实现全文检索的示例代码
2020/06/24 Python
css3中检验表单的required,focus,valid和invalid样式
2014/02/21 HTML / CSS
法国设计制造的扫帚和刷子:Andrée Jardin
2018/12/06 全球购物
戴尔新加坡官网:Dell Singapore
2020/12/13 全球购物
新学期标语
2014/06/30 职场文书
解放思想演讲稿
2014/09/11 职场文书
九一八事变演讲稿范文
2014/09/14 职场文书
2014年学校财务工作总结
2014/12/06 职场文书
父亲去世追悼词
2015/06/23 职场文书