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 &amp; DHTML 实例编程(教程)基础知识
Jun 02 Javascript
Jquery插件之打造自定义的select标签
Nov 30 Javascript
js实现翻页后保持checkbox选中状态的实现方法
Nov 03 Javascript
$.getJSON在IE下失效的原因分析及解决方法
Jun 16 Javascript
js实现当前输入框高亮显示的方法
Aug 19 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
Nov 29 Javascript
js+html5实现复制文字按钮
Jul 15 Javascript
Vue列表页渲染优化详解
Jul 24 Javascript
微信小程序支付及退款流程详解
Nov 30 Javascript
webpack file-loader和url-loader的区别
Jan 15 Javascript
微信小程序云开发 生成带参小程序码流程
May 18 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
Aug 03 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脚本加密专家php解密算法
2020/09/13 PHP
PHP生成不同颜色、不同大小的tag标签函数
2013/09/23 PHP
php中 ob_start等函数截取标准输出的方法
2015/06/22 PHP
thinkphp3.x中变量的获取和过滤方法详解
2016/05/20 PHP
Javascript &amp; DHTML 实例编程(教程)基础知识
2007/06/02 Javascript
Javascript图像处理—亮度对比度应用案例
2013/01/03 Javascript
js实现图片旋转的三种方法
2014/04/10 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
2014/11/12 Javascript
JavaScript解八皇后问题的方法总结
2016/06/12 Javascript
微信小程序 实战实例开发流程详细介绍
2017/01/05 Javascript
javascript 网页进度条简单实例
2017/02/22 Javascript
JavaScript基本类型值-Number类型
2017/02/24 Javascript
Vue实现typeahead组件功能(非常靠谱)
2017/08/26 Javascript
Angular中使用better-scroll插件的方法
2018/03/27 Javascript
简单说说angular.json文件的使用
2018/10/29 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
2019/08/26 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
2019/10/28 Javascript
vue中实现高德定位功能
2019/12/03 Javascript
node脚手架搭建服务器实现token验证的方法
2021/01/20 Javascript
Python中的列表知识点汇总
2015/04/14 Python
Python机器学习之K-Means聚类实现详解
2018/02/22 Python
使用python装饰器计算函数运行时间的实例
2018/04/21 Python
浅析Python pandas模块输出每行中间省略号问题
2018/07/03 Python
解决项目pycharm能运行,在终端却无法运行的问题
2019/01/19 Python
python 模拟银行转账功能过程详解
2019/08/06 Python
python3 assert 断言的使用详解 (区别于python2)
2019/11/27 Python
基于Python爬取51cto博客页面信息过程解析
2020/08/25 Python
python palywright库基本使用
2021/01/21 Python
Sneaker Studio法国:购买运动鞋
2018/06/08 全球购物
三星俄罗斯授权在线商店:Samsung俄罗斯
2019/09/28 全球购物
高中生的自我鉴定范文
2014/01/24 职场文书
30岁生日感言
2014/01/25 职场文书
五一劳动节活动记录
2014/03/23 职场文书
原料仓仓管员岗位职责
2014/07/08 职场文书
代理人委托书
2014/09/16 职场文书
Nginx 根据URL带的参数转发的实现
2021/04/01 Servers