Question

我对jQuery中的document.ready感到困惑。

什么时候在里面定义javascript函数 $（document）.ready（）以及你什么时候没有？

将所有javascript代码放在$（document）.ready（）？

中是否足够安全

当你不这样做时会发生什么？

例如，我使用通常的jQuery选择器，当你点击东西时它会做某事。如果你不用document.ready包装它们有什么危害呢？

如果在页面加载之前有人在分秒中单击元素，是否只会导致问题？或者它会引起其他问题吗？

Answer 1

你什么时候在$（document）.ready（）中定义javascript函数，什么时候不用？

如果函数应该是全局可访问的（这可能表明应用程序设计不当），那么您必须在ready处理程序之外定义它们。

将所有javascript代码放在$（document）.ready（）？
中是否足够安全

见上文。

当你不这样做时会发生什么？

取决于您的JavaScript代码在做什么以及它位于何处。最糟糕的情况是，您将获得运行时错误，因为您尝试在DOM元素存在之前访问它们。如果您的代码位于head并且您不仅要定义函数但已经尝试访问DOM元素，那么就会发生这种情况。

例如，我使用通常的jQuery选择器，当你点击东西时它会做某事。如果你不用document.ready包装它们有什么危害呢？

本身没有“伤害”。如果脚本位于head，它将无法工作，因为DOM元素尚不存在。这意味着，jQuery无法找到并将处理程序绑定到它们但是如果将脚本放在结束body标记之前，则DOM元素将存在。

为了安全起见，无论何时想要访问DOM元素，都要将这些调用放在ready事件处理程序中，或者放在只在加载DOM后调用的函数中。

因为jQuery tutorial（您应该阅读它）已经声明：

由于我们在使用jQuery时几乎所有操作都会读取或操作文档对象模型（DOM），因此我们需要确保在DOM准备就绪后立即开始添加事件等。

为此，我们为文档注册一个ready事件。
$(document).ready(function() {
    // do stuff when DOM is ready
});

提供更完整的例子：

<html>
    <head>
        <!-- Assuming jQuery is loaded -->
        <script>

            function foo() {
                // OK - because it is inside a function which is called
                // at some time after the DOM was loaded
                alert($('#answer').html());
            }

            $(function() {
                // OK - because this is executed once the DOM is loaded
                $('button').click(foo);
            });

            // OK - no DOM access/manipulation
            alert('Just a random alert ' + Math.random());

            // NOT OK - the element with ID `foo` does not exist yet
            $('#answer').html('42');

        </script>
    </head>
    <body>
        <div id="question">The answer to life, the universe and everything</div>
        <div id="answer"></div>
        <button>Show the answer</button>

        <script>
           // OK - the element with ID `foo` does exist
           $('#answer').html('42');
        </script>
    </body>
</html>

Answer 2

当浏览器加载了DOM并准备好进行操作时，会触发document.ready处理程序。

是否应该使用它取决于您放置自定义脚本的位置。如果您将它们放在文档的末尾，就在结束</body>标记之前，您不需要使用document.ready，因为当您的脚本执行时，DOM已经被加载并且您已经加载了将能够操纵它。

另一方面，如果您将脚本放在文档的<head>部分中，则应使用document.ready确保DOM在完全加载之前完全加载，或者将事件处理程序附加到各种元素。如果你不这样做，并且你试图将一个.click事件处理程序附加到一个按钮，那么这个事件将永远不会被触发，因为在你的脚本运行的那一刻，你用来查找的jQuery选择器按钮没有返回任何元素，并且您没有成功附加处理程序。

Answer 3

当您需要该代码以等待DOM在执行之前加载时，您将代码置于$(document).ready内。如果代码不要求DOM首先加载存在，那么你可以把它放在$（document）.ready之外。

顺便说一下，$(function() { })是$ (document).ready();

的简写

$(function() {
   //stuff here will wait for the DOM to load
   $('#something').text('foo'); //should be okay
});

//stuff here will execute immediately.
/* this will likely break */
$('#something').text('weee!');

Answer 4

如果您的文档末尾有脚本，则不需要document.ready。

示例：有一个按钮，单击它，您需要显示警报。您可以将click事件的bind绑定到document.ready中的按钮。您可以在文档末尾编写jquery脚本，也可以在标记中加载元素。

在document.ready事件中编写所有内容将使您的页面成为slug。

Answer 5

如果在href属性中调用js函数，则不会在ready（）中添加事件处理程序。如果你使用jQuery添加它们，那么你必须确保加载这些处理程序引用的对象，并且此代码必须在文档被认为准备好之后（）。这并不意味着它们必须在ready（）调用中，但是，您可以在ready（）内部调用的函数中调用它们。

jQuery document.ready

5 个答案: