javascript - 特定の要素に影響を与える jQuery 関数は、コード内の要素の後に存在する必要がありますか?

Question

jQuery 関数がページの最下部の body タグと html タグの前に存在する場合にのみ、jQuery 関数が正しく機能するという問題が発生しています。これらの要素の後に来る必要がある特定の要素に影響を与える関数のこの標準はありますか?

Answer 1

はい、それ以外の場合、要素はまだ DOM にありません。

一般的な解決策は、DOM Ready イベントを介してコードを実行することです。

$(document).ready(function() {
    // your code
});

そのためのショートカット構文もあります（あまり明確ではないため、使用しません）。

$(function() {
    // your code
});

Answer 2

DOM の操作を開始するには、ドキュメントが読み込まれるまで待つ必要があります。

$(document).ready(function() { /* ... */ });

またはより簡潔に：

$(function() { /* ... */ });

Answer 3

実際、関数がロードされる要素のスタイルとプロパティに依存している場合は、使用する必要があります

window.onload = function () { /* actions to do after page elements loaded */ };

これは、たとえば HTML5 キャンバスの場合です。キャンバスとその中の svg 要素 (およびそのプロパティ) は、javascript が操作できるようになる前に最初にロードする必要があります。

jQueryでは、

$(document).load(function() { /* actions to do after page elements loaded */ });

同様にすべきです。

もちろん、JavaScript が単に DOM の準備が必要な場合 (そして、読み込まれるページの要素のプロパティに依存しない場合) は、そのまま使用できます。

$(function() { /* actions to do after DOM is ready */ });