何时需要文档准备好，何时不在 JQuery [重复]答案

【问题标题】：When is document ready needed and when not in JQuery [duplicate]何时需要文档准备好，何时不在 JQuery [重复]
【发布时间】：2013-11-09 23:28:57
【问题描述】：

我不确定我们何时使用 $(document).ready(function() { }); 以及何时可以声明 $(function() { } 而无需在 $(document).ready(function() { }); 中声明

例如下面的sn-p：

<body>  
    <textarea id="test" cols="50" rows="15"><p><h3>Test H3</h3>This is some sample text to test out the <b>WYSIWYG Control</b>.</p></textarea>  
    <script type="text/javascript">  
        $(function() {  
            $("textarea").htmlarea();  
        });  
</script>

在不使用$(document).ready(function() { }); 的情况下工作，但如下：

<body>  
    <textarea id="test" cols="50" rows="15"><p><h3>Test H3</h3>This is some sample text to test out the <b>WYSIWYG Control</b>.</p></textarea>  
    <script type="text/javascript">  
    $(document).ready(function(){
        $("btn").click(function(){
            alert('Hello!!!');
        });
    });

        $(function() {  
            $("textarea").htmlarea();  
        });  
</script>

当我按下带有id="btn" 的按钮时，它什么也不做。
我做错了吗？

【问题讨论】：

标签： jquery

【解决方案1】：

在第二个示例中，假设您确实在某处确实有一个带有 id 或 btn 的按钮，问题是您缺少要按 ID 选择的 #：

// ⌄ here
$("#btn")

用一个函数调用$，用同样的函数are equivalent调用$(document).ready。

要回答“我什么时候需要等待ready”的问题，答案很简单，就是你需要等到DOM中存在一个元素才能找到它。有时，这需要等到整个页面（尽管不一定是所有链接的资源）都已下载并解析为树；有时你已经在你需要的元素之后的某个时刻包含了你的脚本，所以你根本不需要等待；有时您对存在的元素使用事件委托（一个常见的例子是整个文档）。你几乎可以说这取决于偏好。

【讨论】：

【解决方案2】：

您应该始终使用$(document).ready(function(){}) 来引导您的应用程序，除非有特定的不需要使用它，因为一旦准备好遍历 DOM，它们就会被执行。

在你的例子中，但是你的两个函数做同样的事情，我更喜欢使用$(document).ready()，因为它更明确和可读。

您的代码不起作用的原因是您没有使用正确的选择器，使用 $("btn") 将查找 html 元素，例如但找不到任何内容，因为它是无效的 html。您应该使用$("#btn") 来选择您的按钮。 '#' 用于查找 id，而 '.'可用于选择具有特定类属性的多个项目。

【讨论】：

+1 强调将引导代码放入 $(document).ready() 的重要性。

【解决方案3】：

如果你的按钮有idbtn，你应该使用$('#btn')选择器，像这样：

$(document).ready(function(){
    $("#btn").click(function(){
        alert('Hello!!!');
    });
});

第一个问题：

$(document).ready(function () { ... }) 和$(function() { ... }) 之间没有区别，您可以使用其中任何一个。

【讨论】：

那么$(document).ready 是多余的吗？
它不是冗余，但你可以使用either $(document).ready(function () { ... }) 或 $(function() { ... })。

【解决方案4】：

当 dom 准备好时，document.ready 事件中声明的函数会被执行。其他函数，（在document.ready 之外）在相应事件被触发时被调用。

【讨论】：

invoked when the corresponding event is fired. 但这意味着 dom 已经准备好了，对吧？

【解决方案5】：

当您希望网页“尽早”发生时，有两个重要的事件：

DOM 在浏览器内存中构建。完成后，$(document).ready 触发。
所有资源——图像、样式表、视频、脚本等——都已下载。这是onload 事件。

如果你没有通过网络获取任何东西（或者没有太大的东西），那么这两个事件很可能几乎是同时发生的，你可以简单地在页面底部的 script 标签中运行一些东西工作。

另请注意，您采用的两种方法是等效的。它们都是“准备好的”事件处理程序。

说了这么多，都与您的问题无关。 $("btn") 不会解决任何问题，因为您的选择器不好。没有称为按钮的元素。你的意思可能是btn 的id，在这种情况下你想这样做$("#btn")

【讨论】：