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 相关文章推荐
Array.slice()与Array.splice()的返回值类型
Oct 09 Javascript
JavaScript Cookie显示用户上次访问的时间和次数
Dec 08 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
Aug 06 Javascript
jQuery实现的背景动态变化导航菜单效果
Aug 24 Javascript
js实现的二分查找算法实例
Jan 21 Javascript
jquery把int类型转换成字符串类型的方法
Oct 07 Javascript
微信小程序 WebSocket详解及应用
Jan 21 Javascript
原生JS实现圣旨卷轴展开效果
Mar 06 Javascript
解决Mac安装thrift因bison报错的问题
May 17 Javascript
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
vue 修改 data 数据问题并实时显示操作
Sep 07 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
Sep 08 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
使用apache模块rewrite_module (转)
2007/02/14 PHP
跟我学Laravel之视图 &amp; Response
2014/10/15 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
jquery 插件 人性化的消息显示
2008/01/21 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
2013/11/21 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
2014/03/07 Javascript
jquery实现人性化的有选择性禁用鼠标右键
2014/06/30 Javascript
JavaScript中的Math.LOG2E属性使用详解
2015/06/14 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
2016/08/18 Javascript
javascript学习之json入门
2016/12/22 Javascript
浅谈Vue render函数在ElementUi中的应用
2018/09/06 Javascript
vue实现图片按比例缩放问题操作
2020/08/11 Javascript
Python配置文件解析模块ConfigParser使用实例
2015/04/13 Python
django使用html模板减少代码代码解析
2017/12/12 Python
使用C++扩展Python的功能详解
2018/01/12 Python
Python中logging.NullHandler 的使用教程
2018/11/29 Python
解决py2exe打包后,总是多显示一个DOS黑色窗口的问题
2019/06/21 Python
200行python代码实现2048游戏
2019/07/17 Python
pandas 对日期类型数据的处理方法详解
2019/08/08 Python
Mac安装python3的方法步骤
2019/08/09 Python
Python如何使用BeautifulSoup爬取网页信息
2019/11/26 Python
Python拼接字符串的7种方式详解
2020/03/19 Python
Python气泡提示与标签的实现
2020/04/01 Python
Python的PIL库中getpixel方法的使用
2020/04/09 Python
解决Opencv+Python cv2.imshow闪退问题
2020/04/24 Python
StubHub意大利:购买和出售全球演唱会和体育赛事门票
2017/11/21 全球购物
财务助理岗位职责范本
2014/10/09 职场文书
学校党的群众路线教育实践活动整改措施
2014/10/25 职场文书
2015年助理工程师工作总结
2015/04/03 职场文书
2015年设计师个人工作总结
2015/04/25 职场文书
毕业生捐书活动倡议书
2015/04/27 职场文书
泰坦尼克号观后感
2015/06/04 职场文书
《鲸》教学反思
2016/02/23 职场文书
Win11电脑显示本地时间与服务器时间不一致怎么解决?
2022/04/05 数码科技
ipad隐藏软件app图标方法
2022/04/19 数码科技
vue使用element-ui按需引入
2022/05/20 Vue.js