jquery中多个$(document).ready()的执行顺序

最近做插件遇到的问题,记录如下:

本文以实例形式说明了多个$(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()执行顺序的理解。

有兴趣还可以在控制台里试试这堆:

var 队列 = [];
function 队列添加(函数) {
  队列.push(函数);
}
function 执行队列() {
  while (函数 = 队列.shift()) {
    函数();
  }
}
队列添加(function () {
  console.log('1');
  队列添加(function () {
    console.log('2');
    队列添加(function () {
      console.log('3');
    });
  });
});
队列添加(function () {
  console.log('4');
  队列添加(function () {
    console.log('5');
  });
});
队列添加(function () {
  console.log('6');
  队列添加(function () {
    console.log('7');
  });
});
 
执行队列();

时间: 2024-11-01 20:11:16

jquery中多个$(document).ready()的执行顺序的相关文章

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

本文以实例形式说明了多个$(document).ready()的执行顺序问题,由实例可以看出多个$(document).ready()的执行顺序并非单纯的顺序执行,其与嵌套层级也有一定的关系.具体实例代码如下: <html> <head> <script src="./jquery-1.9.0.min.js"></script> <script type="text/javascript"> $(funct

JQuery中DOM加载与事件执行实例分析_jquery

本文实例讲述了JQuery中DOM加载与事件执行原理.分享给大家供大家参考.具体分析如下: JavaScript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的.当文档或者它的某些元素发生某些变化或操作时,浏览器会自动生成一个事件.例如当浏览器装载完一个文档后,会生成事件:当用户单击某个按钮时,也会生成事件.虽然利用传统的JavaScript事件能完成这些交互,但jQuery增加并扩展了基本的事件处理机制.jQuery不仅提供了更加优雅的事件处理语法,而且极大地增强了事件处理能

JQuery中DOM加载与事件执行实例分析

 JavaScript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的.当文档或者它的某些元素发生某些变化或操作时,浏览器会自动生成一个事件.例如当浏览器装载完一个文档后,会生成事件:当用户单击某个按钮时,也会生成事件.虽然利用传统的JavaScript事件能完成这些交互,但jQuery增加并扩展了基本的事件处理机制.jQuery不仅提供了更加优雅的事件处理语法,而且极大地增强了事件处理能力. 以浏览器装载文档为例,在页面加载完毕后,浏览器会通过JavaScript为DOM元素

jQuery中使用了document和window哪些属性和方法小结_jquery

document.activeElement 获取文档当前获得焦点的元素 document.head 在jQuery中使用方式如下document.head || document.getElementsByTagName( "head" )[0] ,可见并非所有浏览器支持 document.body 获得当前文档的HTMLBodyElement元素 document.compatMode 获取当前文档的渲染方式.返回值:BackCompat(怪癖模式)和CSS1Compat(标准模式

JQuery 引发两次$(document.ready)事件_jquery

页面大概是这样的,一个Partial View,而这个View包含了一小段绑定Search的Javascript,并且用Jquery-ui 的dialog 包含,而且确定不是ASP.net mvc生成HTML的问题,HTML是依照我的想法生成的,后来实在没有办法,把dialog的代码去掉,Search按就正常了.查了一下dialog的代码,发现 是appendTo引发的. 做了实验,代码如下: 代码 复制代码 代码如下: <script type="text/javascript"

jQuery中is方法防止动画重复执行、停止执行的方法

定义和用法 is() 根据选择器.元素或 jQuery 对象来检测匹配元素集合,如果这些元素中至少有一个元素匹配给定的参数,则返回 true. 语法 .is(selector) 与其他筛选方法不同,.is() 不创建新的 jQuery 对象.相反,它允许我们在不修改 jQuery 对象内容的情况下对其进行检测.这在 callback 内部通常比较有用,比如事件处理程序. 返回 false,因为 input 元素的父元素是 p 元素:   var isFormParent = $("input[t

浅谈js在html中的加载执行顺序,多个jquery ready执行顺序_javascript技巧

jQuery $(document).ready()执行顺序: 当页面DOM 元素全部加载完毕后就执行.ready().$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 如果在.ready()执行之前有javascript代码存在,那么javascript将怎么执行呢? 答案是先执行.ready()之前的javascript代码,然后执行.ready(). 多个$(document).ready()的执行顺序并非单纯的顺序执行,其与嵌套层级也有一定的关系.

详解jQuery中的事件_jquery

大致介绍 jQuery增加了并扩展了基本的事件处理机制,不但提供了更加优雅的事件处理语法,而且极大地增强了事件处理能力 jQuery中的事件 加载DOM 在jQuery中是用$(document).ready()方法来替代JavaScript中的window.onload方法的,但是他们也有一些不同点 1.执行时机 例如我们有一个有很多图片的网页 $(document).ready()方法是在这个网页的DOM树加载完就可以执行的,而window.onload方法必须在DOM树加载完和图片都加载完

JQuery中工厂函数$()初探

JQuery中用得最多的要属工厂函数$()了,下面我们就来看一下它的初步应用.  大家知道,在JQuery中我们可以使用 $(document).ready(); 在其中加入页面加载后的代码,以便做出丰富的页面行为. 它和传统的JS中的onload有什么区别呢? 传统的window的onload程序如下: window.onload = function() {       ... } 它是在整个页面完全被加载之后执行. 这样做最大的一个缺点就是速度问题,onload中的代码不仅是在构建DOM树