3

我不确定我们何时使用$(document).ready(function() { });以及何时可以声明 a$(function() { }而无需在$(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">  
        $(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"，它什么也不做。
我做错了吗？

4

5 回答 5

6

在第二个示例中，假设您实际上确实有一个带有idofbtn某处的按钮，问题是您缺少#按 ID 选择的 a：

// ⌄ here
$("#btn")

$用一个函数调用和用$(document).ready同一个函数调用是等价的。

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

于 2013-11-09T23:31:53.543 回答
2

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

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

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

于 2013-11-09T23:39:03.700 回答
1

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

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

对于第一个问题：

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

于 2013-11-09T23:32:31.950 回答
0

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

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

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

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

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

于 2013-11-09T23:37:18.480 回答
0

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

于 2013-11-09T23:34:09.223 回答