多个$(document).ready()的执行顺序实例分析


Posted in Javascript onJuly 26, 2014

本文以实例形式说明了多个$(document).ready()的执行顺序问题,由实例可以看出多个$(document).ready()的执行顺序并非单纯的顺序执行,其与嵌套层级也有一定的关系。具体实例代码如下:

<html>
<head>
<script src="./jquery-1.9.0.min.js"></script>
<script type="text/javascript">
  $(function(){
    alert('1');
    $(function(){
      alert('2');
      $(function(){
        alert('3');
      });
    });


  });
</script>
<body>
TTTTTTTTTTTT
<script type="text/javascript">
  $(document).ready(function() {
    alert('4');
    $(function(){
      alert('5');
    });


  });
</script>
KKKKKKKKKKKK
<script type="text/javascript">
  $(function(){
    alert('6');
    $(document).ready(function() {
      alert('7');
    });


  });
</script>
</body>
</html>

运行alert显示顺序为:1,4,6,2,5,7,3
读者可以自己测试体验一下,以加深对多个$(document).ready()执行顺序的理解。

Javascript 相关文章推荐
深入理解JavaScript系列(6) 强大的原型和原型链
Jan 15 Javascript
jQuery判断密码强度实现思路及代码
Apr 24 Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
May 19 Javascript
js判断滚动条是否已到页面最底部或顶部实例
Nov 20 Javascript
Javascript 函数的四种调用模式
Nov 05 Javascript
React创建组件的三种方式及其区别
Jan 12 Javascript
JS实现图片放大缩小的方法
Feb 15 Javascript
通过命令行创建vue项目的方法
Jul 20 Javascript
JavaScript实现求最大公共子串的方法
Feb 03 Javascript
React事件处理的机制及原理
Dec 03 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
Sep 23 Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
Sep 21 Javascript
jquery 取子节点及当前节点属性值
Jul 25 #Javascript
jquery text()方法取标签中的文本
Jul 25 #Javascript
jquery根据属性和index来查找属性值并操作
Jul 25 #Javascript
判断日期是否能跨月查询的js代码
Jul 25 #Javascript
直接在JS里创建JSON数据然后遍历使用
Jul 25 #Javascript
使用documentElement正确取得当前可见区域的大小
Jul 25 #Javascript
JS判断变量是否为空判断是否null
Jul 25 #Javascript
You might like
php mysql数据库操作类
2008/06/04 PHP
PHP 操作文件的一些FAQ总结
2009/02/12 PHP
PHP中的插件机制原理和实例
2014/07/08 PHP
分享一个Laravel好用的Cache宏
2015/03/02 PHP
php从csv文件读取数据并输出到网页的方法
2015/03/14 PHP
php字符串按照单词进行反转的方法
2015/03/14 PHP
Laravel使用支付宝进行支付的示例代码
2017/08/16 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
laravel5.0在linux下解决.htaccess无效和去除index.php的问题
2019/10/16 PHP
Web版彷 Visual Studio 2003 颜色选择器
2007/01/09 Javascript
十个优秀的Ajax/Javascript实例网站收集
2010/03/31 Javascript
AngularJS向后端ASP.NET API控制器上传文件
2016/02/03 Javascript
JS实现元素上下左右移动效果
2017/10/18 Javascript
BootStrap TreeView使用实例详解
2017/11/01 Javascript
Vue2 轮播图slide组件实例代码
2018/05/31 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
2018/09/04 Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
2018/10/24 jQuery
详解使用webpack+electron+reactJs开发windows桌面应用
2019/02/01 Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
2019/10/29 Javascript
jquery使用echarts实现有向图可视化功能示例
2019/11/25 jQuery
javascript单张多张图无缝滚动实例代码
2020/05/10 Javascript
Postman如何实现参数化执行及断言处理
2020/07/28 Javascript
[00:58]2016年国际邀请赛勇士令状宣传片
2016/06/01 DOTA
python实现统计代码行数的方法
2015/05/22 Python
HTML5实现Notification API桌面通知功能
2016/03/02 HTML / CSS
浅谈Html5中视频 音频标签 进度条的问题
2016/07/26 HTML / CSS
菲律宾酒店预订网站:Hotels.com菲律宾
2017/07/12 全球购物
C#如何调用Windows程序打开一个文档
2014/12/26 面试题
十佳家长事迹材料
2014/08/26 职场文书
个人剖析材料及整改措施
2014/10/07 职场文书
土建施工员岗位职责
2015/04/11 职场文书
学校开除通知书
2015/04/25 职场文书
丧事答谢词大全
2015/09/30 职场文书
幼儿园大班教学反思
2016/03/02 职场文书
聊聊mysql都有哪几种分区方式
2022/04/13 MySQL
SQL解决未能删除约束问题drop constraint
2022/05/30 SQL Server