1

当我从 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页面。

4

3 回答 3

3

你错过了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() 表示文档（图像等）已加载到我的浏览器中，然后触发事件。

不，javascript nativeonload函数的意思ready是DOM已准备就绪，这意味着 HTML 结构（包括图像）已加载到客户端浏览器并准备好进行操作，这并不意味着图像（或 iframe）已加载（实际图像），这就是为什么onload。

于 2013-03-18T19:02:40.427 回答
1

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

于 2013-03-18T19:03:34.703 回答
0

jquery(document).ready() 是 DOM 准备好后执行的函数。

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

所以所有的 DOM 处理程序代码都像

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

将保证仅在

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

}

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

谢谢。

于 2013-03-18T19:11:01.680 回答