Question

我的application.js在外面有这个：

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

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

上述代码的目的是什么，$(function() { }？

Answer 1

这是shortcut for：

$(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的代码。

Answer 2

不，您只需要在页面首次加载$(function(){});

时加载您想要执行的语句

所有功能都可以在别处定义。

Answer 3

基本上是在加载正文时运行代码

让我再详细解释一下。

当页面加载时，浏览器会从第一行加载到最后一行，当您在<head>标记中加载jQuery时，会在<body>之前加载<head> <!DOCTYPE html> <html> <head> <script type="x" source="jquery.js" /> <script type="x"> $("#my_id").remove(); </script> </head> <body> <div id="my_id"></div> </body> </html>在身体上方

举个例子：

jquery.js

正如你所看到的那样，加载的第一个资源是$()，以及下面的行，我有jQuery代码wil lexecute因为jquery已加载，所以<div>存在。

问题是jquery代码正在寻找不存在的代码，因为DOM还没有解析它。

使用以下语法是这样的，当您将“匿名函数”发送到jquery时，它会将其存储到文档已完全加载，因此$(function(){ })将存在并且命令成功执行。 / p>

$(document).ready(function(){
   //Code here will only be run upon document ready.
});

有几种方法可以写这个，主要方式是这样的：

mysite = {}; //Creates a "namespace / Object" for me to work within
mysite.dialog = function(title,message){/*blah*/}
mysite.init = function(){
   //Code here is for the Document Ready state.
   mysite.dialog("hey","the document has been loaded");
}

但我喜欢做的事情是：

Application.js

然后我将其存储在我的jquery.js文件中，并包含在$(document).ready(mysite.init);

之后

然后在我的文档中，运行以下命令。

{{1}}

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

3 个答案: