Question

在大多数教程中，提到了两种关于如何执行jquery脚本的方法：

window.onload挂钩。
有$(document).ready(function(){...})事件（可缩写为$(function(){...})）

我发现它甚至可以在我省略它们时使用，只需将代码放在<script></script>遮挡中即可达到同样的目的。就像这样：

<html>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<body>
    <button id="btn" name="test" value="clickme">clickme</button>
</body>
<script>

//$(document).ready( function(){
//    $('#btn').on("click", function(e){
//        alert("hi")
//     }
//)})

$('#btn').on('click', function(e){
    alert('hi')
})
</script>
</html>

正如您所看到的那样，未注释的代码（省略了所有document.ready人员或window.onload）和注释代码都可以按预期向我发送警报。

所以我的问题是，在这种情况下（绑定事件），因为我可以编写代码更多优雅作为未注释的片段。为什么我要编写代码，就像在大多数教程中所说的那样（这是上面的注释样式）？

Answer 1

HTML中没有<script>或defer属性的

async标记将按照从上到下解析HTML文档的顺序执行。这意味着文档顶部附近的脚本将在文档的其余部分被解析之前执行，因此在它可用之前执行。这使得脚本的放置或脚本的执行时间在很多情况下都相关。

在控制此执行时间时，您至少有五个执行启动脚本的选择：

您可以将脚本放在<head>部分或<body>部分的顶部，并在加载时执行。这样做的缺点是DOM尚未加载，因此您无法对页面中的元素进行操作。
您可以在</body>标记之前插入脚本，并且将加载所有DOM，并且您的脚本将能够访问所有内容。
您可以在任意位置插入脚本（包括在<head>标记中），并使用$(document).ready(fn)在DOM准备就绪之前不执行fn。在内部，jQuery侦听DOMContentLoaded事件，当它触发时，它会执行任何.ready()个处理程序。
您可以在任何地方插入脚本（包括在<head>标记中），并使用window.onload(fn)不执行fn，直到DOM准备好并且所有外部资源如图像已加载。注意，您也可以使用jQuery版本$(window).load(fn)。
您可以使用脚本标记上的async或defer属性强制它以异步方式加载，稍后加载。这将创建一个不确定的脚本执行时间（尽管总是晚于内联），因此您可能需要一些特定的控件，如$(document).ready()，以便在脚本执行之前知道DOM是安全的。您可以查看其他问题/答案Script Tag - async & defer和Load and Execute order of scripts，了解有关异步和延迟属性操作的更多详细信息。

因此，如果您将脚本标记小心地放在正确的位置，或者您的启动脚本没有尝试访问DOM元素，则无需使用$(document).ready(fn)或window.onload(fn)。

但是，如果你没有完全控制脚本放置的位置，你需要访问DOM元素，或者你希望你的脚本能够被放置在任何地方并仍然让它做正确的事情，或者如果你只是想要所有您的脚本位于<head>标记中，然后您需要延迟脚本的执行，直到DOM准备就绪，$(document).ready(fn)或window.onload(fn)将使其变得容易。

Answer 2

两者并不完全相同。内联Javascript会在遇到DOM自上而下解析时立即执行。但是，在加载/准备好DOM之后，你提到的钩子会被执行。所以，除了组织之外，如果你确定你的JS只依赖于在内联之前加载的DOM的部分 - 你没事。否则你肯定需要钩子。

Answer 3

根据jQuery文档：

.ready（处理程序）

描述：指定在DOM完全加载时要执行的函数。

document.ready表示浏览器已解析所有DOM元素。有一种情况，如果你有一个包含大量元素的长<body>标记，浏览器没有完全创建DOM元素对象，它也开始解析你的JavaScript。在那一刻，您将无法从DOM树中查询#btn元素，因此事件侦听器无法附加到元素。

Answer 4

要回答您的问题，您在添加和忽略$(document).ready(function(){});之间找不到任何区别的原因是因为您已在html代码结束之前保留了它。<\ n / p>

您的代码从上到下进行解析。
当它到达您的脚本时，DOM就准备好了。因此$(document).ready会开火。
但由于脚本位于底部，因此您确定DOM已准备就绪。在这种情况下，$(document).ready没有任何区别。

要查看差异，请将脚本标记移至顶部<head>部分。然后，为了确保您的脚本正常工作，您需要将其包含在$(document).ready之间。否则，您将click处理程序添加到不存在的按钮中，该按钮无法正常工作。

至于window.onload和$(document).ready之间的差异：

window.onload被触发。这意味着何时它被解雇了，DOM准备就绪，所有的图像和其他图像也是如此资源准备就绪。
另一方面， $(document).ready在加载DOM后被触发。这是在所有图像和其他资源下载并准备好之前。因此，这可确保您的脚本能够正常运行，并且比使用window.onload更快地触发。

window.onload documentation

$(document).ready documentation

$（document）.ready（）之间的区别是什么，只是省略它？

4 个答案: