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实现Sleep暂停功能代码
Sep 03 Javascript
关于jQuery UI 使用心得及技巧
Oct 10 Javascript
jQuery入门介绍之基础知识
Jan 13 Javascript
jQuery实现鼠标划过修改样式的方法
Apr 14 Javascript
js获取Html元素的实际宽度高度的方法
May 19 Javascript
Vue组件BootPage实现简单的分页功能
Sep 12 Javascript
AngularJS 过滤器(自带和自建)详解
Sep 19 Javascript
前端构建工具之gulp的语法教程
Jun 12 Javascript
JavaScrip关于创建常量的知识点
Dec 07 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
May 17 Javascript
ElementUI radio组件选中小改造
Aug 12 Javascript
小程序最新获取用户昵称和头像的方法总结
Sep 23 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
关于Appserv无法打开localhost问题的解决方法
2009/10/16 PHP
php 生成唯一id的几种解决方法
2013/03/08 PHP
Zend Studio 实用快捷键一览表(精心整理)
2013/08/10 PHP
PHP父类调用子类方法的代码例子
2014/04/09 PHP
PHP的MVC模式实现原理分析(一相简单的MVC框架范例)
2014/04/29 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(五)
2014/06/23 PHP
php调用mysql存储过程实例分析
2014/12/29 PHP
php定期拉取数据对比方法实例
2019/09/22 PHP
Aster vs KG BO3 第二场2.19
2021/03/10 DOTA
原生javascript实现图片轮播效果代码
2010/09/03 Javascript
jQuery Clone Bug解决代码
2010/12/22 Javascript
js如何取消事件冒泡
2013/09/23 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
2014/12/10 Javascript
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
2016/06/07 Javascript
AngularJs定制样式插入到ueditor中的问题小结
2016/08/01 Javascript
node.js爬虫爬取拉勾网职位信息
2017/03/14 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
2017/05/02 Javascript
Easyui和zTree两种方式分别实现树形下拉框
2017/08/04 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
2018/08/29 Javascript
vue柱状进度条图像的完美实现方案
2019/08/26 Javascript
JavaScript实现随机点名器
2020/03/25 Javascript
vue-cli 关闭热更新操作
2020/09/18 Javascript
JavaScript通如何过RGraph实现动态仪表盘
2020/10/15 Javascript
在Python中实现贪婪排名算法的教程
2015/04/17 Python
python使用正则表达式提取网页URL的方法
2015/05/26 Python
python中PIL安装简单教程
2016/04/21 Python
解决python Markdown模块乱码的问题
2019/02/14 Python
python elasticsearch从创建索引到写入数据的全过程
2019/08/04 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
python with语句的原理与用法详解
2020/03/30 Python
Python unittest单元测试框架及断言方法
2020/04/15 Python
html5中JavaScript removeChild 删除所有节点
2014/05/16 HTML / CSS
Hunter Boots美国官方网站:赫特威灵顿雨靴
2018/06/16 全球购物
美国和加拿大计算机和电子产品购物网站:TigerDirect.com
2019/09/13 全球购物
Python趣味实战之手把手教你实现举牌小人生成器
2021/06/07 Python
MySQL 十大常用字符串函数详解
2021/06/30 MySQL