我是否需要将application.js中的每个Javascript函数都包装在$(function(){}中？

Question

我application.js在外面有这个:

$(function() {
    // My functions are in here, and some of them even work.
}

我剪切并粘贴,直到我得到了一些有用的东西,现在我正在认真学习jQuery.我知道,有点落后.

上面那段代码的目的是什么$(function() { }？

Answer 1

这是一个捷径:

$(document).ready(function () {

});

这意味着一旦DOM完全加载,您的脚本就会运行.这意味着脚本中依赖于某些DOM节点的任何部分都可以使用.如果您的.js文件位于页面顶部,它将在DOM节点存在之前执行,这意味着您将尝试使用不存在的东西.$(document).ready()允许您推迟执行代码,直到页面准备就绪.

因此,例如,假设您有以下JavaScript,加载到头部的脚本标记中:

$('a').click(function () {
    alert("You can't leave!!!");
    return false;
});

这会尝试为所有<a>标记添加一个点击处理程序,但还没有任何<a>标记,所以它不会做任何事情.如果你把它包起来,$(document).ready()它看起来像这样:

$(document).ready(function () {
    $('a').click(function () {
        alert("You can't leave!!!");
        return false;
    });
});

现在它只会在文档准备好后执行.

要回答标题中的问题,不,您不必将所有内容都包含在内$(document).ready()- 只需依赖于完全加载DOM的代码.