jquery - 如果我的页面需要ready()才能工作，这对我意味着什么

Question

当我从 firebug 控制台运行时，下面的代码可以正常工作，没有任何问题

jQuery(document).ready( function() {
   jQuery('h2').click( function()   {
      jQuery(this).next().next().hide();
   });
});

但是当我删除 jQuery(document).ready 时，我的代码不起作用。

jQuery('h2').click( function() {
   jQuery(this).next().next().hide();
});

ready()意味着文档(图像等)已加载到我的浏览器中，然后触发事件。但是如果第一个代码块有效(意味着 DOM 已准备好)，那么第二个代码块不应该也运行吗？

我想我遗漏了一些东西，但我的理解是，在这两种情况下，代码都应该运行，因为文档已加载到我的浏览器中。

或者页面代码中可能存在错误，阻碍了代码的执行。

PS:代码页只是我本地主机中的一个 WordPress 页面。

Answer 1

您错过了 ready 的重点.

ready一旦调用就会调用，而不是读取DOM时调用，回调ready读取 DOM 时将触发接收。

// The DOM isn't read yet, though you can call the `.ready` function.
jQuery(document).ready( function() {
    // Here, inside the callback, the DOM is ready.
    jQuery('h2').click( function()  {
        jQuery(this).next().next().hide();
    });
});

假设加载 DOM 需要两秒钟，这是时间线的简化说明:

// Timeline- 00:00
jQuery(document).ready( function() {
    // Timeline- 00:02
    jQuery('h2').click( function()  {
        // Timeline- When ever you clicked on the <h2>
        jQuery(this).next().next().hide();
    });
});

就像您的点击回调一样:

jQuery('h2').click( function()  {

它没有说 <h2>被单击，但它注册了一个回调以在单击时触发。

<小时/>

一个小但重要的注意事项:

ready() means that document ( images etc ) is loaded in my browser then fire the event.

不，那是什么 javascript native onload功能意味着，ready意味着 DOM 已准备就绪，意味着 HTML 结构(包括图像)已加载到客户端浏览器上并准备好进行操作，但这并不意味着 图像(或iframe)已加载(实际图像)，这就是 onload对于。