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的面向对象方法以及差别
Mar 31 Javascript
jQuery替换字符串(实例代码)
Nov 13 Javascript
Java/JS获取flash高宽的具体方法
Dec 27 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
May 12 Javascript
javascript鼠标滑动评分控件完整实例
May 13 Javascript
对Js OOP编程 创建对象的一些全面理解
Jul 26 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
Aug 10 Javascript
浅谈手写node可读流之流动模式
Jun 01 Javascript
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
Aug 25 Javascript
从零开始封装自己的自定义Vue组件
Oct 09 Javascript
vue组件通信传值操作示例
Jan 08 Javascript
jquery.pager.js分页实现详解
Jul 29 jQuery
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/10/09 PHP
解析php下载远程图片函数 可伪造来路
2013/06/25 PHP
Java中final关键字详解
2015/08/10 PHP
学习YUI.Ext 第四天--对话框Dialog的使用
2007/03/10 Javascript
List all the Databases on a SQL Server
2007/06/21 Javascript
JavaScript 继承机制的实现(待续)
2010/05/18 Javascript
菜鸟学习JavaScript小实验之函数引用
2010/11/17 Javascript
基于jquery的横向滚动条(滑动条)
2011/02/24 Javascript
js字符串转换成数字与数字转换成字符串的实现方法
2014/01/08 Javascript
Jquery Ajax方法传值到action的方法
2014/05/11 Javascript
JS获取当前页面名称的简单实例
2016/08/19 Javascript
XMLHttpRequest Level 2 使用指南
2016/08/26 Javascript
微信小程序--组件(swiper)详细介绍
2017/06/13 Javascript
浅谈JS封闭函数、闭包、内置对象
2017/07/18 Javascript
vue-cli构建项目使用 less的方法
2017/10/04 Javascript
解决vue项目打包后提示图片文件路径错误的问题
2018/07/04 Javascript
vue2.0 路由模式mode=&quot;history&quot;的作用
2018/10/18 Javascript
jquery.pager.js实现分页效果
2019/07/29 jQuery
JavaScript实现电灯开关小案例
2020/03/30 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
2020/08/13 Javascript
使用Python的Twisted框架实现一个简单的服务器
2015/04/16 Python
实例Python处理XML文件的方法
2015/08/31 Python
使用Python实现租车计费系统的两种方法
2018/09/29 Python
ubuntu 16.04下python版本切换的方法
2019/06/14 Python
Python MOCK SERVER moco模拟接口测试过程解析
2020/04/13 Python
关于iframe跨域使用postMessage的实现
2019/10/29 HTML / CSS
土耳其玩具商店:Toyzz Shop
2019/08/02 全球购物
Fox Racing官方网站:越野摩托车和山地自行车装备和服装
2019/12/23 全球购物
C/C++程序员常见面试题一
2012/12/08 面试题
门卫班长岗位职责
2013/12/15 职场文书
企业军训感想
2014/02/07 职场文书
文秘应聘自荐书范文
2014/02/18 职场文书
超市工作总结范文2014
2014/12/19 职场文书
社区环境卫生倡议书
2015/04/29 职场文书
golang switch语句的灵活写法介绍
2021/05/06 Golang
前端JavaScript大管家 package.json
2021/11/02 Javascript