jQuery document.ready

Dav*_*415 7 javascript jquery

我对jQuery中的document.ready有点困惑.

你什么时候在$(document).ready()中定义javascript函数,什么时候不?

将所有javascript代码放在$(document).ready()中是否足够安全?

你不这样做会发生什么?

例如,我使用通常的jQuery选择器,当你点击东西时它会做一些事情.如果你不用document.ready包装它们有什么危害?

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

Fel*_*ing 7

你什么时候在$(document).ready()中定义javascript函数,什么时候不?

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

将所有javascript代码放在$(document).ready()中是否足够安全?

往上看.

你不这样做会发生什么?

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

例如,我使用通常的jQuery选择器,当你点击东西时它会做一些事情.如果你不用document.ready包装它们有什么危害?

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


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

作为jQuery教程(你应该阅读它)已经说明:

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

为此,我们为文档注册一个ready事件.

$(document).ready(function() {
    // do stuff when DOM is ready
});
Run Code Online (Sandbox Code Playgroud)

举一个更完整的例子:

<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>
Run Code Online (Sandbox Code Playgroud)


Dar*_*rov 6

document.ready当DOM已经被加载到浏览器,并准备进行操作处理程序被触发.

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

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