Question

我认为$（document）.ready（...）中的脚本总是在加载DOM后执行。因此，如果一个$（document.ready（...）进入头部或正文中就没关系。但是，下面的代码不会像我想要的那样在屏幕上生成“苹果”。如果我找到页面底部的giveApples（）函数，但它可以工作。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(giveApples());
function giveApples() {
    $("#appleTree").html("apples");
}
</script> 
</head>
<body>
<div id="appleTree"></div>
</body>
<script>
//$(document).ready(giveApples());
</script>
</html>

任何人都可以请更正我对DOM，页面加载，脚本标记位置，（文档）.ready（）或其他任何导致此问题的误解吗？我还是网络编程的新手。

Answer 1

那是因为你实际上没有将事件处理程序绑定到ready事件。您正在调用giveApples并将其返回值（undefined）作为事件处理程序进行绑定（无提示失败）。您需要将函数传递给.ready()，而不是调用它！

$(document).ready(giveApples);

请注意缺少的括号。

Answer 2

但事实并非如此。问题是你没有传递giveApples作为参数，而是它的返回值，因为你正在调用它（因为()）。为了使它工作，不要把括号：

$(document).ready(giveApples);

根据您当前的代码，传递给$(document).ready的值为undefined，因为giveApples不会返回任何值。

你也可以这样做：

$(document).ready(function(){
    giveApples();    //However, if you access the 'this' keyword inside the giveApples function, it will point to 'window', and not 'document'
});

如果alert这两个值，您可以看到我上面解释的内容：

alert(giveApples);    //Shows the giveApples function body, properly
alert(giveApples());  //Shows undefined, since giveApples is being called and does not return any value

使用DOM事件（onload，onclick等）时也一样。你这样做：

window.onload = myFunction;

而不是：

window.onload = myFunction();

Answer 3

你错过了一个功能

使用以下语法：

$(document).ready(giveApples());

您将传递giveApples的结果作为要在文档就绪时执行的代码。此外，在调用它时，此函数尚未声明。

正确的语法

这样可行：

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

一如既往：

$(document).ready(giveApples);

Answer 4

回答您的名义问题，因为其他人已经使用与document.ready（）的位置无关的代码确定了问题的根源。

这并不重要。这只是很多人遵循的标准惯例。

很多人也支持将<script>标记作为<body>标记中的最后一个元素。

证明：看？这是有争议的。我甚至得到了一个downvote。 =）

Answer 5

你可以将srcipt放在任何你想放的地方.html将从上到下执行。是的，$（document）.ready（...）总是会在DOM加载后执行。但是你的代码中，你把函数放在$（document）.ready之外。这意味着它将在DOM加载时执行。也许你可以这样做：$（document）.ready（function giveApples（）{$（“＃appleTree” ）。html的（ “苹果”）;}）。如果你想学习JQuery，我会给你一个链接，我也是新的。它非常棒。太有趣了。

30-days-to-learn-jquery

w3school

为什么$（document）.ready（）的位置很重要？

5 个答案:

你错过了一个功能

正确的语法