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


What's the difference between $(document).ready() and just omit it?

在大多数教程中，有两种方法介绍了如何执行jquery脚本：

  • 带window.onload钩。
  • 与$(document).ready(function(){...})事件(并可缩写为$(function(){...})事件)

我发现，即使我省略了所有的代码，只要将代码放在阻塞中就可以达到相同的目的。就像这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js">
<body>
    <button id="btn" name="test" value="clickme">clickme</button>
</body>


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

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

</html>

如您所见，未注释代码(省略了所有document.ready工作人员或window.onload工作人员)和注释代码都可以按预期向我发出警报。

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

相关讨论

HTML中没有defer或async属性的标记将按从上到下分析HTML文档的顺序执行。这意味着文档顶部附近的脚本将在文档的其余部分被解析之前执行，从而在文档可用之前执行。这使得脚本的放置或脚本的执行时间在许多情况下都是相关的。

在控制此执行时间时，至少有五个选项可用于执行启动脚本：

  • 您可以将脚本放在节或节的顶部，并在加载时执行。这有一个缺点，即尚未加载DOM，因此无法对页面内的元素进行操作。

  • 您可以在标记之前插入脚本，所有的DOM都将被加载，您的脚本将能够访问所有内容。

  • 您可以在任何需要的地方插入脚本(包括在标记中)，并使用$(document).ready(fn)在dom就绪之前不执行fn。在内部，jquery监听DOMContentLoaded事件，当它触发时，它执行任何.ready()处理程序。

  • 您可以在任何需要的地方插入脚本(包括在标记中)，并使用window.onload(fn)在dom就绪且所有外部资源(如映像)都已加载之前不执行fn。注意，您也可以使用jquery版本$(window).load(fn)。

  • 您可以在脚本标记上使用async或defer属性，强制它异步加载，稍后加载。这将创建一个不确定的脚本执行时间(尽管总是比它只是内联的时间晚)，因此在脚本执行之前，您可能需要一些特定的控件，如$(document).ready()，以了解DOM是安全的。您可以看到这些其他问题/答案脚本标记-async&defer，以及加载和执行脚本顺序，以获得有关async和defer属性操作的更多详细信息。

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

    但是，如果您不完全控制脚本的放置位置，并且需要访问DOM元素，或者您希望脚本能够放置在任何位置，并且仍然可以执行正确的操作，或者如果您只希望将所有脚本放在标记中，则需要延迟脚本的执行，直到DOM准备就绪，或者是$(document).ready(fn)或window.onload(fn)可以很容易地做到这一点。

    相关讨论

    嗯，这两个不完全一样。当对dom进行自上而下的分析时，内联javascript会立即执行。但是，您提到的钩子是在加载/准备好DOM之后执行的。所以，是的，除了组织之外，如果您确定JS只依赖于内联之前加载的DOM部分，那么您就可以了。否则你肯定需要钩子。

    回答你的问题，你没有发现添加和省略$(document).ready(function(){});之间有任何区别的原因是你在html标记结束之前就保留了它。

    • 您的代码是从上到下解析的。
    • 当它到达脚本时，DOM已经准备好了。因此，$(document).ready将开火。
    • 但是由于脚本在底部，所以您可以确定DOM已经准备好了。在这种情况下，$(document).ready没有区别。

    要查看区别，请将脚本标记移动到顶部的部分。然后，为了确保脚本正常工作，需要在$(document).ready之间包含它。否则，您将向一个不存在的按钮添加click处理程序，这将不起作用。

    关于window.onload与$(document).ready的区别：

  • 所有东西装好后，都会发射window.onload。这意味着什么时候它被激发，DOM准备就绪，所有图像和其他资源准备就绪。

  • 另一方面，加载dom后将激发$(document).ready。这是在所有图像和其他资源下载并准备就绪之前。因此，这可以确保脚本可以工作，并且触发速度比使用window.onload快。

    • window.onload文件

    $(document).ready文件

    根据jquery文档：

    .ready( handler )

    Description: Specify a function to execute when the DOM is fully loaded.

    document.ready表示浏览器已经解析了所有的dom元素。如果您有一个长的标记，其中包含许多元素，那么DOM元素对象不是完全由浏览器创建的，它也开始解析您的javascript。此时，您将无法从DOM树中查询#btn元素，因此事件侦听器无法附加到该元素。