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 相关文章推荐
ExtJs Excel导出并下载IIS服务器端遇到的问题
Sep 16 Javascript
jQuery CSS()方法改变现有的CSS样式表
Sep 09 Javascript
Javascript中call与apply的学习笔记
Sep 22 Javascript
全面理解闭包机制
Jul 11 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
Aug 18 Javascript
Javascript实现代码折叠功能
Aug 25 Javascript
原生ajax处理json格式数据的实例代码
Dec 25 Javascript
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
vue里input根据value改变背景色的实例
Sep 29 Javascript
详解JavaScript的数据类型以及数据类型的转换
Apr 20 Javascript
小程序实现短信登录倒计时
Jul 12 Javascript
原生js实现弹窗消息动画
Nov 20 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加MYSQL服务器
2006/10/09 PHP
php利用imagemagick实现复古老照片效果实例
2017/02/16 PHP
ThinkPHP+EasyUI之ComboTree中的会计科目树形菜单实现方法
2017/06/09 PHP
PHP简单计算两个时间差的方法示例
2017/06/20 PHP
PHP测试框架PHPUnit组织测试操作示例
2018/05/28 PHP
一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
2009/05/21 Javascript
HTML Dom与Css控制方法
2010/10/25 Javascript
window.open的页面如何刷新(父页面)上层页面
2012/12/28 Javascript
jQuery的DOM操作之删除节点示例
2014/01/03 Javascript
javascript中bind函数的作用实例介绍
2014/09/28 Javascript
javascript 回调函数详解
2014/11/11 Javascript
JavaScript数组随机排列实现随机洗牌功能
2015/03/19 Javascript
每天一篇javascript学习小结(String对象)
2015/11/18 Javascript
解决jquery无法找到其他父级子集问题的方法
2016/05/10 Javascript
Json按某个键的值进行排序
2016/12/22 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
2017/03/09 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
2017/04/20 Javascript
详解webpack+es6+angular1.x项目构建
2017/05/02 Javascript
5分钟打造简易高效的webpack常用配置
2017/07/04 Javascript
Express本地测试HTTPS的示例代码
2018/06/06 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
2018/09/03 Javascript
使用vuepress搭建静态博客的示例代码
2019/02/14 Javascript
微信小程序开发注意指南和优化实践(小结)
2019/06/21 Javascript
typescript nodejs 依赖注入实现方法代码详解
2019/07/21 NodeJs
Element InputNumber计数器的使用方法
2020/07/27 Javascript
TensorFlow实现Logistic回归
2018/09/07 Python
python增加图像对比度的方法
2019/07/12 Python
简单分析python的类变量、实例变量
2019/08/23 Python
python与pycharm有何区别
2020/07/01 Python
简述python&amp;pytorch 随机种子的实现
2020/10/07 Python
css3一款3D字体带阴影效果的实现步骤
2013/03/20 HTML / CSS
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
2017/08/18 HTML / CSS
简历自我评价怎么写好呢?
2014/01/04 职场文书
面试感谢信范文
2015/01/22 职场文书
超强台风观后感
2015/06/09 职场文书
《钢铁是怎样炼成的》高中读后感
2019/08/07 职场文书