如果需要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已经准备好），那么seconf的代码块也不应该运行吗？

我想我错过了一些东西，但据我所知，在这两种情况下，代码都应该运行，因为文档是在我的浏览器中加载的。

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

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

Answer 1

你错过了ready。

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

// 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（）表示在我的浏览器中加载文档（图像等）然后触发事件。

不，javascript原生onload函数的含义，ready表示 DOM 已准备好，这意味着HTML结构（包括图片）已加载到客户端浏览器上并且准备好进行操作，并不意味着加载了图像（或iframe）（实际图像），这就是onload的用途。

Answer 2

第二个不起作用的原因是因为当你的脚本运行以注册click事件时，它不会在DOM中找到元素$（'h2'），因为它尚未加载。这就是为什么你需要使用$ .ready（readyhandler）或$（function（）{readyhandlerCode}）;因此，一旦文档准备就绪，事件将被注册。

Answer 3

jquery（document）.ready（）是 在DOM准备好之后执行的函数。

虽然JavaScript在呈现页面时提供了用于执行代码的加载事件，但在完全接收到所有资产（如图像）之前，不会触发此事件。 传递给.ready（）的处理程序保证在DOM准备好后执行，因此这通常是附加所有其他事件处理程序并运行其他jQuery代码的最佳位置。

所有DOM处理程序代码如

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

将保证仅在

中被调用

jQuery(document).ready( function() {
...

}

阻止或来自任何其他功能。 dom文档准备好后，处理程序也可以运行了。

感谢。