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: コード ページは、私のローカルホストの単なるワードプレス ページです。

4

3 に答える 3

3

のポイントを逃しましたready。

readyDOM が読み取られるときではなく、呼び出されると呼び出されます。コールバック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 の読み込みに 2 秒かかるとしましょう。タイムラインを簡略化した図です。

// 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目的です。

于 2013-03-18T19:02:40.427 に答える
1

2 番目の方法が機能しない理由は、スクリプトがクリック イベントを登録するために実行されるまでに、要素 $('h2') が DOM でまだ読み込まれていないため見つからないためです。そのため、 $.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 に答える