多个$(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()执行顺序的理解。

赞 (0)

相关推荐

  • 解析页面加载与js函数的执行 onload or ready

    首先,页面加载顺序:解析HTML结构.加载外部脚本和样式表文件.解析并执行脚本代码.构造HTML DOM模型.加载图片等外部文件.页面加载完毕. 也就是:html → head → title → #text(网页标题) → style → 加载样式 → 解析样式 → link → 加载外部样式表文件 → 解析外部样式表 → script → 加载外部脚本文件 → 解析外部脚本文件 → 执行外部脚本 → body → div → script → 加载脚本 → 解析脚本 → 执行脚本 → img

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

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

  • 如何确保JavaScript的执行顺序 之jQuery.html深度分析

    如何确保JavaScript的执行顺序 之jQuery.html深度分析

    我们先来简单回顾下HTML源代码(test2.htm): 复制代码 代码如下: <html> <head> <title></title> <script src="js/jquery-1.4.4.js" type="text/javascript"></script> <script> $(function(){ $('#container').html('<script s

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

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

  • Python多重继承的方法解析执行顺序实例分析

    Python多重继承的方法解析执行顺序实例分析

    本文实例讲述了Python多重继承的方法解析执行顺序.分享给大家供大家参考,具体如下: 任何实现多重继承的语言都要处理潜在的命名冲突, 这种冲突由不相关的祖先类实现同名方法引起 class A: def say(self): print("A Hello:", self) class B(A): def eat(self): print("B Eating:", self) class C(A): def eat(self): print("C Eatin

  • Java 普通代码块静态代码块执行顺序(实例讲解)

    如下所示: class B { public B() { super(); System.out.println("构造器B"); } { System.out.println("普通的代码块B"); } static{ System.out.println("静态代码块B"); } } public class ClassA extends B { public ClassA() { super(); System.out.println(&q

  • Spring bean 加载执行顺序实例解析

    本文研究的主要是Spring bean 加载执行顺序的相关内容,具体如下. 问题来源: 有一个bean为A,一个bean为B.想要A在容器实例化的时候的一个属性name赋值为B的一个方法funB的返回值. 如果只是在A里单纯的写着: private B b; private String name = b.funb(); 会报错说nullpointException,因为这个时候b还没被set进来,所以为null. 解决办法为如下代码,同时学习下spring中 InitializingBean

  • mysql代码执行结构实例分析【顺序、分支、循环结构】

    本文实例讲述了mysql代码执行结构.分享给大家供大家参考,具体如下: 本文内容: 什么是代码执行结构 顺序结构 分支结构 循环结构 首发日期:2018-04-18 什么是代码执行结构: 这里所说的代码执行结构就是多条sql语句的执行顺序. 代码执行结构主要用于触发器.存储过程和函数等存储多条sql语句中. 顺序结构: 顺序结构就是从上到下依次执行sql语句 一般默认情况下都是顺序结构 分支结构: 分支结构的执行是依据一定的条件选择执行路径,它会依据我们给定的条件来选择执行那些sql语句 mys

  • c#对象初始化顺序实例分析

    本文实例分析了c#对象初始化顺序.分享给大家供大家参考.具体如下: using System; using System.Collections.Generic; using System.Text; namespace ConsoleApplication1 { class Program { static void Main(string[] args) { A a = new B(); Console.ReadLine(); } } class A { //调用到这个构造函数时:x=1,y

  • go语言执行等待直到后台goroutine执行完成实例分析

    本文实例分析了go语言执行等待直到后台goroutine执行完成的用法.分享给大家供大家参考.具体如下: 复制代码 代码如下: var w sync.WaitGroup w.Add(2) go func() {     // do something     w.Done() } go func() {     // do something     w.Done() } w.Wait() 希望本文所述对大家的Go语言程序设计有所帮助.

  • Python装饰器的执行过程实例分析

    本文实例分析了Python装饰器的执行过程.分享给大家供大家参考,具体如下: 今天看到一句话:装饰器其实就是对闭包的使用,仔细想想,其实就是这回事,今天又看了下闭包,基本上算是弄明白了闭包的执行过程了.其实加上几句话以后就可以很容易的发现,思路给读者,最好自己总结一下,有助于理解.通过代码来说吧. 第一种,装饰器本身不传参数,相对来说过程相对简单的 #!/usr/bin/python #coding: utf-8 # 装饰器其实就是对闭包的使用 def dec(fun): print("call

  • js点击事件的执行过程实例分析【冒泡与捕获】

    本文实例讲述了js点击事件的执行过程.分享给大家供大家参考,具体如下: js事件对象event包括很多事件类型,这里用onclick事件为例,探讨一下在js事件捕获机制和冒泡机制下的执行过程,以及如何阻止事件的捕获和冒泡. 首先看下当我们点击一个元素后,浏览器的执行过程. 1,当某个元素绑定的事件被触发时,这时浏览器就会从顶级document元素发出一个事件流 2,这个事件流顺着dom层级,一层一层向下找,直到遇到了触发事件的目标元素,这个查找的过程是捕获阶段 说明:捕获阶段,在查找每一层dom

  • JavaScript ECMA-262-3 深入解析（一）：执行上下文实例分析

    本文实例讲述了JavaScript ECMA执行上下文.分享给大家供大家参考,具体如下: 介绍 这篇文章我们主要探讨ECMAScript执行上下文和相关的ECMAScript可执行代码. 定义 每次当控制器转到ECMAScript可执行代码的时候,即会进入到一个执行上下文. 执行上下文(简称-EC)是一个抽象概念,ECMA-262标准用这个概念同可执行代码(executable code)概念进行区分. 标准规范没有从技术实现的角度准确定义EC的类型和结构;这应该是具体实现ECMAScript引

随机推荐