多个$(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 相关文章推荐
分享20款好玩的jQuery游戏
Apr 17 Javascript
浅谈Javascript数组索引
Jul 29 Javascript
深入理解jQuery之事件移除
Jun 02 Javascript
微信小程序 跳转方式总结
Apr 20 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
Aug 12 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
Aug 31 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
Jan 19 Javascript
WEB前端性能优化的7大手段详解
Feb 04 Javascript
浅析vue-router实现原理及两种模式
Feb 11 Javascript
JS实现判断移动端PC端功能
Feb 21 Javascript
关于vue-cli3打包代码后白屏的解决方案
Sep 02 Javascript
linux服务器快速卸载安装node环境(简单上手)
Feb 22 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
如何使用脚本模仿登陆过程
2006/11/22 PHP
PHP中通过HTTP_USER_AGENT判断是否为手机移动终端的函数代码
2013/02/14 PHP
php ios推送(代码)
2013/07/01 PHP
PHP strstr 函数判断字符串是否否存在的实例代码
2013/09/28 PHP
thinkphp控制器调度使用示例
2014/02/24 PHP
深入解析PHP中foreach语句控制数组循环的用法
2015/11/30 PHP
关于php几种字符串连接的效率比较(详解)
2017/02/22 PHP
Maps Javascript
2007/01/22 Javascript
javascript 动态数据下的锚点错位问题解决方法
2008/12/24 Javascript
JavaScript 学习笔记(七)字符串的连接
2009/12/31 Javascript
js ondocumentready onmouseover onclick onmouseout 样式
2010/07/22 Javascript
JS 毫秒转时间示例代码
2013/09/22 Javascript
javascript 表格内容排序 简单操作示例代码
2014/01/03 Javascript
Javascript 按位与运算符 (&amp;)使用介绍
2014/02/04 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
2014/10/09 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
2014/10/10 Javascript
JavaScript中string对象
2015/06/12 Javascript
vue-cli项目中怎么使用mock数据
2017/09/27 Javascript
vue-cli webpack 引入jquery的方法
2018/01/10 jQuery
vue 中的keep-alive实例代码
2018/07/20 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
2019/10/20 Javascript
vue商城中商品“筛选器”功能的实现代码
2020/07/01 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
2020/11/06 Javascript
Python3 能振兴 Python的原因分析
2014/11/28 Python
Python中使用Tkinter模块创建GUI程序实例
2015/01/14 Python
查找python项目依赖并生成requirements.txt的方法
2018/07/10 Python
python numpy存取文件的方式
2020/04/01 Python
原生python实现knn分类算法
2019/10/24 Python
Pytorch中的VGG实现修改最后一层FC
2020/01/15 Python
python opencv 检测移动物体并截图保存实例
2020/03/10 Python
Python3爬虫里关于Splash负载均衡配置详解
2020/07/10 Python
Python Sqlalchemy如何实现select for update
2020/10/12 Python
市场营销专业大学生职业生涯规划文
2014/03/06 职场文书
企业标语大全
2014/07/01 职场文书
房地产销售助理岗位职责
2015/04/14 职场文书
前端监听websocket消息并实时弹出(实例代码)
2021/11/27 Javascript