了解文档就绪事件

Question

嘿，我只是为我的 JS & 编写另一个基本脚本。 jQuery 实践，当我意识到这实际上包括什么时，我刚刚推出了 goold ol' document-ready 事件，我想知道我是否正确：

这是为 jQuery 准备好的文档：

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

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

(document) 是一个选择器，它引用 DOM 的“最高”部分（除了 Window？）。

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

(function(){});

这部分让我有点困惑。

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

非常感谢，抱歉提出 n00by 问题，我只是好奇！ xD

Answer 1

哇，这是一个答案的一大堆问题:)

现在，美元符号是 jQuery 的简写，它调用 jQuery 库，因此我们可以进行 jQuery 语句和调用，对吗？

是的，$ 和 jQuery 引用同一个对象。取自 jQuery 的源代码：

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

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

（文档）是一个选择器，它引用 DOM 的“最高”部分（除了 Window？）。

document 不是选择器，而是引用顶部的 DOM 对象 - DOM 中的大多数节点。它具有其他属性，例如 document.domain 等。其子元素之一是 元素。

.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(){});

这部分让我有点困惑。

我知道一旦我们的文档加载，它将运行我们的脚本。换句话说，它会运行我们的函数，对吗？

是的，这个函数以及您与就绪事件绑定的每个函数都将在 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 和其他几种语言中函数的定义方式。提高你的基本技能，以便更好地理解。不要将其称为脚本，因为它只会使事情变得混乱。它只是一个函数，里面有一些语句。

Answer 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');
});

Answer 3

1. (document) 不是选择器。它是对“文档”对象的引用。
2. .ready 是对 jQuery 对象上可用函数的引用。它是 .bind("ready", f) 的简写
3. (function() { ... }) 是事件的处理程序。

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

Answer 4

现在，美元符号是
jQuery，它调用 jQuery
库，所以我们可以制作 jQuery
声明和呼吁，正确吗？声明和呼吁，正确吗？

是的

.ready 是在以下情况下发生的操作
DOM 已完全加载。现在，
“DOM”已完全加载，DOM 是否已完全加载
在这种情况下指的是正在发生的事情
被选中？所以如果选择了 body
而不是文档，将是脚本
在加载之前执行？在加载之前执行？

不可以。只有文档可以触发就绪事件。

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

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

你可以写：

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

Answer 5

我不同意@eskimoblood
“只有文档才能触发就绪事件。”事实并非如此，没有文档就绪事件，“ready”是由 jQuery 和其他库引入的，用于指示 DOM 已就绪，但不一定已加载。

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

Answer 6

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

在本例中，当（文档）准备就绪()时，运行其中的 function(){}。

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

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

Answer 7

我不太了解 JavaScript 和 jQuery，但是语句在 {} 中，参数在 () 中。那么 () 传递给函数的内容 {} 函数的作用是什么