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 获取select(多选下拉)中所选值的示例代码
Aug 02 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
Nov 13 Javascript
js设置组合快捷键/tabindex功能的方法
Nov 21 Javascript
jquery实现在光标位置插入内容的方法
Feb 05 Javascript
基于JavaScript创建动态Dom
Dec 08 Javascript
分享12个实用的jQuery代码片段
Mar 09 Javascript
JavaScript弹出对话框的三种方式
Mar 23 Javascript
全面解析Angular中$Apply()及$Digest()的区别
Aug 04 Javascript
浅谈js内置对象Math的属性和方法(推荐)
Sep 19 Javascript
Vue.js 2.5新特性介绍(推荐)
Oct 24 Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
May 16 Javascript
解决ant Design中Select设置initialValue时的大坑
Oct 29 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 上一篇,下一篇文章实现代码与原理说明
2010/05/09 PHP
php gd2 上传图片/文字水印/图片水印/等比例缩略图/实现代码
2010/05/15 PHP
php通过ajax实现双击table修改内容
2014/04/28 PHP
一款js和css代码压缩工具[附JAVA环境配置方法]
2010/04/16 Javascript
js中的如何定位固定层的位置
2014/06/15 Javascript
jQuery实现类似老虎机滚动抽奖效果
2015/08/06 Javascript
简单纯js实现点击切换TAB标签实例
2015/08/23 Javascript
jQuery遍历DOM节点操作之filter()方法详解
2016/04/14 Javascript
Vue+Vux项目实践完整代码
2017/11/30 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
2020/04/13 Javascript
[02:58]魔廷新尊——痛苦女王至宝语音台词节选
2020/06/14 DOTA
python中__call__方法示例分析
2014/10/11 Python
Python实现将n个点均匀地分布在球面上的方法
2015/03/12 Python
将Python中的数据存储到系统本地的简单方法
2015/04/11 Python
Python引用模块和查找模块路径
2016/03/17 Python
在pycharm上mongodb配置及可视化设置方法
2018/11/30 Python
Pyqt5实现英文学习词典
2019/06/24 Python
Python识别html主要文本框过程解析
2020/02/18 Python
使用Python-OpenCV消除图像中孤立的小区域操作
2020/07/05 Python
浅谈django不使用restframework自定义接口与使用的区别
2020/07/15 Python
CSS3 清除浮动的方法示例
2018/06/01 HTML / CSS
Html5适配iphoneX刘海屏的简单实现
2019/04/09 HTML / CSS
德国高尔夫商店:Golfshop.de
2019/06/22 全球购物
英国在线购买马术服装:EQUUS
2019/07/12 全球购物
德国玩具商店:Planet Happy DE
2021/01/16 全球购物
行政助理岗位职责
2013/11/10 职场文书
英语故事演讲稿
2014/04/29 职场文书
优秀少先队辅导员先进事迹材料
2014/05/18 职场文书
电工实训报告总结
2014/11/05 职场文书
生产现场禁烟通知
2015/04/23 职场文书
原告离婚代理词
2015/05/23 职场文书
泰坦尼克号观后感
2015/06/04 职场文书
卫生主题班会
2015/08/14 职场文书
校运会班级霸气口号
2015/12/24 职场文书
导游词之云南-元阳梯田
2019/10/08 职场文书
排查MySQL生产环境索引没有效果
2022/04/11 MySQL