【问题标题】:Understanding the document-ready event了解文档就绪事件
【发布时间】:2012-08-17 01:03:48
【问题描述】:

嘿,我只是在为我的 JS 和 jQuery 实践编写另一个基本脚本,当我意识到这实际上是由什么组成时,我只是在抽出 goold ol' document-ready 事件,我想知道我是否对与否:

这是为 jQuery 准备的文档:

$(document).ready(function(){});

现在,美元符号是 jQuery 的简写,它调用 jQuery 库,所以我们可以进行 jQuery 语句和调用,对吗?

(document) 是一个选择器,它指的是 DOM 的“最高”部分(除了 Window?)。

.ready 是在 DOM 完全加载时发生的操作。现在,“DOM”已完全加载,在这种情况下,DOM 是否指的是正在选择的内容?那么如果选择的是正文而不是文档,脚本会在加载之前执行吗?

(function(){});

这部分让我有点困惑。

我知道一旦我们的文档加载完毕,它就会运行我们的脚本。换句话说,它会运行我们的函数吗?我们的整个脚本是否被认为是一个函数?而且,它实际上只是一个大的 JavaScript 语句,对吗?因为它以分号结尾。另外,为什么我们的脚本通常放在大括号之间,而不是函数的括号?有什么区别?

非常感谢,对于 n00by 的问题,我只是好奇! xD

【问题讨论】:

    标签: javascript jquery domready


    【解决方案1】:

    哇,一个答案就有一大堆问题:)

    现在,美元符号是 jQuery 的简写,它调用 jQuery 库,所以我们可以进行 jQuery 语句和调用,对吗?

    是的,$jQuery 指的是同一个对象。取自 jQuery 的源代码:

    // Expose jQuery to the global object
    window.jQuery = window.$ = jQuery;
    

    window 是全局对象。添加到其中的任何内容都可以在全球范围内使用,因此您可以将其称为window.$,或者仅称为$

    (document) 是一个选择器,它指的是 DOM 的“最高”部分(除了 Window?)。

    document 不是选择器,而是 DOM object 引用 DOM 中最顶层的节点。它还有其他属性,例如document.domain 等。它的一个子元素是<html> 元素。

    .ready 是在 DOM 完全加载时发生的操作。现在,“DOM”已完全加载,在这种情况下,DOM 是否指的是正在选择的内容?

    是的,DOM 指的是我们通常在 jQuery 选择器中选择的项目。更具体地说,它是页面的内存表示。 ready 为不同的浏览器使用一堆事件来确定 DOM 何时加载。

    那么如果选择的是正文而不是文档,脚本会在加载之前执行吗?

    当前 jQuery 的源代码并不关心当你调用 ready 时传入的是什么选择器。这是准备好的功能:

    ready: function( fn ) {
        // Attach the listeners
        jQuery.bindReady(); 
    
        // If the DOM is already ready
        if ( jQuery.isReady ) {
            // Execute the function immediately
            fn.call( document, jQuery );
    
        // Otherwise, remember the function for later
        } else if ( readyList ) {
            // Add the function to the wait list
            readyList.push( fn );
        }
    
        return this;
    },
    

    由于它不关心传入的是什么选择器,所以你也可以将它传递给body,什么都没有,或者你想要的任何东西。

    $({
        an: 'object', 
        that: 'has', 
        nothing: 'to', 
        'do': 'with', 
        ready: 'event'
    }).ready(function() { .. });
    

    它仍然可以工作。

    (function(){});

    这部分让我有点困惑。

    我知道一旦我们的文档加载完毕,它就会运行我们的脚本。换句话说,它会运行我们的函数吗?

    是的,这个和你绑定到 ready 事件的每个函数都会在 DOM 准备好时执行。

    我们的整个脚本是否被认为是一个函数?

    不,不是整个脚本。仅依赖于 DOM 的项目。有些事情需要在发现时进行处理。想想 jQuery 库本身。它在处理之前不会等待任何 DOM 就绪事件。如果您编写 JavaScript 语句,它将按照找到的顺序进行处理,除非它是像您传递给 ready(..) 的回调函数。所以无论DOM是否加载,下面的代码都会立即执行并提示“hello”。

    <script>
        function hello() { alert("hello"); }
        hello();
    </script>
    

    而且,它实际上只是一个大型 JavaScript 语句,对吗?

    不是真的。您可以根据需要将 JavaScript 模块化。例如,您可以拥有类似于类、对象、可重用小部件、架构模式(如 MVC)以及其他一堆东西。

    因为它以分号结尾。

    分号与执行某事无关。我写得很好。

    <script>
        alert("Hello"), alert("World")
    </script>
    

    这将起作用并按顺序警告两个单词,并且没有分号。

    另外,为什么我们的脚本通常放在大括号之间,而不是函数的括号?有什么区别?

    这是在 JavaScript 和其他几种语言中定义函数的方式。提高你的基本技能以更好地理解。不要将其称为脚本,因为它只会混淆问题。它只是一个函数,里面有一些语句。

    【讨论】:

    • @BOSS - 不客气,如果有什么不清楚的地方可以随时提问。 @Blair - 谢谢 :)
    【解决方案2】:

    .ready() 函数仅在选择文档时触发。我不相信你可以打电话给$(body).ready()

    基本上,ready() 函数接受 1 个参数 - 一个函数。您可以轻松调用

    $(document).ready(alert)
    

    但我们通常做的是用function(){}定义一个匿名函数

    你是对的,典型的$(document).ready(function(){}) 中的所有代码只是一个大函数。

    我们的脚本位于大括号之间,因为这是您定义函数的方式。

    而不是这样做:

    function myFunc()
    {
      alert('We are in my function');
    }
    $(document).ready(myFunc)
    

    我们去掉中间人,然后这样做:

    $(document).ready(function()
    {
      alert('We are in my function');
    });
    

    【讨论】:

    • 哦,好吧,如果我们将标准脚本嵌套在 {} 之间,是否存在使用此布局的实例:$(document).ready(function() { alert ('我们在我的功能中'); });并在 ()s 中写或声明一些东西?
    • 值得注意的是,据我所知,很多语法都是多余的。你可以只做 $(function(){}) 而不需要做完整的事情。 jQuery 检测传递给它的东西的类型是什么,并以不同的方式处理它,如果是函数,则将它们添加到 onready 中。我个人更喜欢这种速记方法,但我想不习惯它的人可能会认为它的可读性较差。
    【解决方案3】:
    1. (document) 不是选择器。它是对“文档”对象的引用。
    2. .ready 是对 jQuery 对象上可用函数的引用。它是.bind("ready", f) 的简写
    3. (function() { ... }) 是事件的处理程序。

    将函数绑定为“就绪”处理程序在概念上与绑定“单击”处理程序没有区别。

    【讨论】:

      【解决方案4】:

      现在,美元符号是 jQuery,它调用 jQuery 库,所以我们可以制作 jQuery 语句和调用,正确吗?语句和调用,正确吗?

      是的

      .ready 是一个动作,当 DOM 已完全加载。现在 “DOM”被完全加载,DOM 在这种情况下,指的是正在发生的事情 被选中?因此,如果选择了 body 而不是文件,将脚本 在加载之前执行?在加载之前执行?

      没有。只有文档可以触发 ready 事件。

      这是 dom 准备好时执行的函数

      $(document).ready(function(){alert('ready')})
      

      你也写了:

      $(document).ready(mxFunction)
      function mxFunction(){alert('ready')}
      

      【讨论】:

      • 好的,换句话说,(文档)必须在这种情况下去那里?另外,{} vs () 中的函数和脚本的其余部分怎么样?
      • 是的文档是附加事件的文档。 .ready 是您现在正在调用的函数, () 进行函数调用。而function(){}是函数语句,其中()是定义参数的地方,{}是函数体。
      【解决方案5】:

      我不得不不同意@eskimoblood “只有文档可以触发就绪事件。”没有文档就绪事件是不正确的,jQuery 和其他库引入了“就绪”来指示 DOM 已就绪,不一定已加载。

      window.loaded 在所有图像帧和其他资源都已加载时触发,因此“就绪”将在“加载”之前触发。看看 'DOMContentLoaded',它将为您提供有关如何实现 'ready' 类型事件的更多详细信息。

      【讨论】:

        【解决方案6】:

        在 jQuery 中,您可以向任何 jQuery 事件添加一个函数,以便在事件发生后运行。

        在这种情况下,when the (document) is ready(), run the function(){} within it

        在某些情况下,您可以向函数添加参数。例如,当使用jQuery.ajax 时,我可以在成功设置中使用参数,以访问我从 ajax 请求返回的数据,并在函数本身中重用该参数。

        $.ajax({
          url: "test.html",
          cache: false,
          success: function(html){
            $("#results").append(html);
          }
        });
        

        【讨论】:

          【解决方案7】:

          我对 JavaScript 和 jQuery 不太了解,但语句在 {} 中,参数在 () 中。所以() 什么被传递到函数{} 函数做什么

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 1970-01-01
            • 2013-01-06
            • 2011-02-04
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            相关资源
            最近更新 更多