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 点击按钮弹出另一页,选择值后,返回到当前页
May 26 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
Sep 08 Javascript
jQuery EasyUI之DataGrid使用实例详解
Jan 04 Javascript
Bootstrap选项卡与Masonry插件的完美结合
Jul 06 Javascript
bootstrap fileinput 上传插件的基础使用
Feb 17 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
Mar 30 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
Dec 09 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
May 07 Javascript
Async/Await替代Promise的6个理由
Jun 15 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
Jul 27 Javascript
js获取url页面id,也就是最后的数字文件名
Sep 25 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
Nov 17 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世纪万年历
2006/12/06 PHP
php读取mysql的简单实例
2014/01/15 PHP
PHP 中 Orientation 属性判断上传图片是否需要旋转
2015/10/16 PHP
Laravel框架实现定时发布任务的方法
2018/08/16 PHP
php ZipArchive实现多文件打包下载实例
2019/10/31 PHP
php array_map()函数实例用法
2021/03/03 PHP
javascript权威指南 学习笔记之变量作用域分享
2011/09/28 Javascript
jQuery实现用方向键控制层的上下左右移动
2013/01/13 Javascript
利用JQuery动画制作滑动菜单项效果实现步骤及代码
2013/02/07 Javascript
鼠标经过显示二级菜单js特效
2013/08/13 Javascript
js带按钮的提示框可供选择示例代码
2013/09/17 Javascript
JavaScript中对循环语句的优化技巧深入探讨
2014/06/06 Javascript
jquery中$(#form :input)与$(#form input)的区别
2014/08/18 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
2015/08/07 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
2015/10/21 Javascript
JavaScript设计模式经典之工厂模式
2016/02/24 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
2017/06/08 jQuery
微信小程序实现人脸识别
2018/05/25 Javascript
微信小程序select下拉框实现源码
2019/11/08 Javascript
使用python编写脚本获取手机当前应用apk的信息
2014/07/21 Python
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
2017/08/08 Python
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
Python3 串口接收与发送16进制数据包的实例
2019/06/12 Python
Python调用Windows命令打印文件
2020/02/07 Python
推荐值得学习的12款python-web开发框架
2020/08/10 Python
用python批量下载apk
2020/12/29 Python
毕业自我鉴定范文
2013/11/06 职场文书
咖啡店的创业计划书,让你hold不住
2014/01/03 职场文书
幼儿园家长工作总结2015
2015/04/25 职场文书
秋菊打官司观后感
2015/06/03 职场文书
2021-4-5课程——SQL Server查询【3】
2021/04/05 SQL Server
pytorch实现手写数字图片识别
2021/05/20 Python
css实现两栏布局,左侧固定宽,右侧自适应的多种方法
2021/08/07 HTML / CSS
Go中的条件语句Switch示例详解
2021/08/23 Golang
Python中如何处理常见报错
2022/01/18 Python
oracle delete误删除表数据后如何恢复
2022/06/28 Oracle