jQuery DOM Ready

Question

在以下代码段中：

<form>
    <fieldset>
        <button id="indexGetStarted" class="button" type="submit">Get Started!</button>
    </fieldset>
</form>
<script type="text/javascript">

    $(document).ready(function() {

        $('#indexGetStarted').click(function() {
            $('form').submit();
            return false;
        });

    });

</script>

$(document).ready(function() { ... }是否必要？

Answer 1

不是绝对的，因为在执行此脚本之前，您已经声明了您的按钮（然后可能是您的表单），它始终可用。但删除该函数会使您的代码依赖于脚本块和html元素相对于文档中的位置。

Answer 2

是的，编写干净的代码是必需的，但它有一个快捷方式：

$(function() { .... });
// is the same as
$(document).ready(function() { .... });

在DOM对象完全加载之前操纵DOM对象，附加事件等的行为将是不可预测的，并且通常根本不起作用。

如果在加载脚本部分之前声明元素，可能工作。

Answer 3

严格地说，如果您在附带的代码中访问DOM元素，则始终是必需的。 $(document).ready()延迟代码的执行，直到完全构建DOM树，这很重要，因为您通过$('#indexGetStarted')访问DOM树。实际上，无论如何它可能会起作用，但我不推荐它。

Answer 4

不，不需要。如果将脚本放在源元素中的DOM元素之后，则元素自然可用。一些测试表明，这将加快渲染速度，尤其是在IE中。

您可以在标记的前面将内容绑定到'ready'事件，然后在关闭正文之前运行$.ready()，效果相同。