ホームページ > 記事 > ウェブフロントエンド > HTMLにおけるスクリプトの配置位置の解析

HTMLにおけるスクリプトの配置位置の解析

小云云オリジナル: 2017-12-11 11:37:171630ブラウズ

スクリプトはHTMLのどこにでも配置できると思っていましたが、今日リクエストをしたときにその誤解を修正しました。スクリプトの位置は気軽に配置することはできません。この記事では主に HTML でのスクリプトの配置について説明します。編集者はこれがとても良いものだと思ったので、皆さんの参考として今から共有します。皆さんのお役に立てれば幸いです。

まず、yesとnoの2つのオプションを持つselectタグを実装したいのですが、selectタグは初期化時にデフォルトでnull値を選択する必要があるため、そのときにnull値を削除するメソッドを追加しました。クリック:

XML/HTML コードコンテンツをクリップボードにコピーします

<!DOCTYPE html>
<html>
<head>
<script src="jquery/jquery-1.11.1.min.js"></script>
</head>
<script>
$('#checkcash').click(function () {   
        if ($('#checkcash').val() == '0') {   
            $("#checkcash option[value='0']").remove();   
        }   
    });   
    $("#alert").click(function(){   
    alert("1123");   
    })   
</script>
<body>
 是否已提现 <select id="checkcash"   style="width: 181px">
                            <option selected="selected" value="0"></option>
                            <option value="1">是</option>
                            <option value="2">否</option>
                            </select>
                            <input type=&#39;button&#39; id=&#39;alert&#39; value="anwo">
</body>
</html>

しかし、最初はこれはjquery構文エラーだと思いました。オンラインで確認して修正し続けましたが、うまくいかなかったので、スクリプトを後ろに置くべきかどうかを考えました。これ。

後で確認したところ、原因はhtmlファイルがトップダウンで実行されるためですが、インポートされたCSSとJavaScriptの順序が異なっており、CSSを導入して読み込むと、プログラムは依然として下方向に実行されます。実行が < スクリプトに達しました>スクリプトはスレッドを中断し、プログラムはスクリプトの実行が完了した後にのみ実行を継続します。したがって、スクリプトの長時間実行による遅延ブロックを避けるために、スクリプトは通常、本文の後に配置されます。一部のページの効果を実現するには、一部の JS スクリプトを事前に動的に読み込む必要があるため、これらのスクリプトをの前に配置する必要があります。次に、dom 要素にアクセスする必要がある js を body の前に配置することはできません。dom がまだ生成されていないため、body の前に dom 要素にアクセスする js はエラーになるか無効になります。このため、dom が生成される前にメソッドを追加したことがこの問題につながりました。

もっと勉強したほうがいいよ、それだけだと思っているのに、そこを掘り下げていないところがたくさんある。これからも頑張ってください！

ps: 実際には、jquery の初期化ページメソッドを使用する別の方法もあります。上記のラベルに追加されたクリックイベントを $(function(){}) に追加することもできます。原理は同じです。上記のように、このメソッドはページが読み込まれた後に実行されるため、どこにでも配置できます。

HTMLにおけるスクリプトの配置位置の解析

関連記事