jQuery简介（第3部分）：等待页面加载和匿名函数

在第3部分中，我们将解决如何将jQuery延迟到页面加载之前的问题，然后，我将尝试解释什么是匿名函数以及为什么需要了解它们。

如果您一直在尝试第1部分和第2部分中的某些代码，则可能会遇到一些错误，奇怪的行为，或者只是无法正常工作的事情。我在学习jQuery时遇到的最常见错误是找不到DOM元素-尽管我可以在页面源代码中清楚地看到它们，但是jQuery一直告诉我它根本找不到它们！为什么？

好吧，这完全取决于浏览器加载内容的顺序。最简单的说，如果您正在浏览器中运行的jQuery脚本之前实际上已经创建了它要查找的DOM元素，则该脚本将首先加载，但不会执行任何操作，因为它无法找到元素，那么DOM元素将在以后加载。如果您将所有脚本放在页脚附近，则问题不大，但仍然可能发生。

解决方案是将脚本包装在称为文档就绪事件的地方。 。这样，随附的代码就可以等到DOM完全加载（直到 ready ）为止。使用它很简单：

$(document).ready(function(){//your code to delay goes here});

jQuery文档中概述了一种更短的方法，但是我强烈建议您使用这种方法来提高代码的可读性。

本文档ready事件是匿名函数的另一个很好的例子，所以让我们尝试理解它的含义。

匿名函数

如果像我一样，你已经掌握一些初学者编程经验的人，匿名函数的思想（这是jQuery和Javascript的核心）可能有点令人不安。首先，由于括号不匹配而导致的错误非常普遍，这就是为什么我现在要解释一下。如果您想就为什么在更高的技术水平上匿名函数比常规命名函数更好的原因进行详尽的解释，我建议您阅读这篇相当复杂的博客文章[不再可用]。

直到现在，您可能只会遇到命名函数。这些函数已用名称声明，因此可以在其他任何地方调用，您可以随意多次。考虑一下这个简单的示例，该示例将在页面加载时将一条消息记录到控制台。

function doStuffOnPageLoad(){console.log("doing stuff!");}$(document).ready(doStuffOnPageLoad);

如果您打算重新使用您的函数，这将非常有用，但是在这种情况下，它有点麻烦我们只希望页面加载后触发一次。取而代之的是，我们不必费心定义单独的函数，只需在需要时将其内联声明为参数即可。因此，最好将前面的示例重写为：

$(document).ready(function(){console.log("doing stuff");});

目前您可能看不到它的许多优点–在这种情况下，它的代码量很少–但是随着脚本复杂性的提高，我将不必尝试查找函数定义，而乐于跳来跳去。不幸的是，对于初学者来说，确实确实使事情变得有些困难–仅查看所有括号，因此如果您遇到错误，请确保检查以下几点：

使用类似代码的编辑器Sublime Text 2可以真正帮助您，因为它会突出显示相应的花括号并自动为您缩进代码。确实，专用的代码编辑器是必不可少的。

本课就是这样，但是您应该养成习惯，在继续进行之前将一些基本的DOM操作封装在文档就绪事件中，然后开始在代码中编辑文件编辑器（如果您还没有的话）。下次，我们将研究事件及其如何用于向页面添加交互性，例如使jQuery在单击按钮时执行某些操作。随时欢迎您提出问题或意见。