HTML におけるスクリプトの配置に関する簡単な説明

以前は、スクリプトは HTML 内のどこにでも配置できると思っていましたが、今日、要件に取り組んでいるときに、スクリプトの場所をランダムに配置することはできないという誤った考えを訂正しました。

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

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

<!DOCTYPE html >
<html>
<ヘッド>
<スクリプト src = "jquery/jquery-1.11.1.min.js" > </スクリプト>
</ヘッド>
<スクリプト>
$('#checkcash').click(function() {
($('#checkcash').val() == '0')の場合{
$("#checkcash オプション[値= '0' ]").remove();
}
});
$("#alert").click(function(){
アラート("1123");
})
</スクリプト>
<本文>
現金は引き出されましたか？ id = "チェックキャッシュ" スタイル= "幅: 181px" >
<オプション selected = "選択済み" 値= "0" > </オプション>
<オプション値= "1" >はい</オプション>
<オプション値= "2" >いいえ</オプション>
</選択>
<入力タイプ= 'ボタン' id = 'アラート' 値= "anwo" >
</本文>
</html>

しかし、これでは期待した効果が得られませんでした。最初はjQueryの構文エラーだと思ったので、オンラインで確認したり修正したりし続けましたが、うまくいきませんでした。その後、スクリプトを最後に置くべきだと突然思いつきました。試してみたところ、大丈夫でした。その後、これはそうではないことに気づきました。

後から原因を調べたところ、HTMLファイルは上から下へ実行されていたものの、導入されたCSSとJavaScriptの順序が異なっていたためであることがわかりました。CSSが導入されて読み込まれると、プログラムは下方向に実行され続け、<script>スクリプトまで実行されたところでスレッドが中断され、scriptスクリプトが実行された後もプログラムの実行が継続されていました。したがって、スクリプトの長時間実行によって発生する遅延やブロックを回避するために、スクリプトは通常、本体の後に配置されます。いくつかのページ効果を実現するには、事前にいくつかの js スクリプトを動的に読み込む必要があるため、これらのスクリプトは <body> の前に配置する必要があります。次に、DOM の生成がまだ開始されていないため、DOM 要素にアクセスする必要がある js を body の前に置くことはできません。そのため、body の前に DOM 要素にアクセスする js は失敗するか無効になります。このため、DOM が生成されなかったときにメソッドを追加したところ、このような結果になりました。

本当はもっと多くのことを学ぶべきだったのですが、深く掘り下げてはいませんでした。頑張ってください！

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

HTML でのスクリプトの配置に関する上記の簡単な説明は、エディターが皆さんと共有する内容のすべてです。これが皆さんの参考になれば幸いです。また、123WORDPRESS.COM をサポートしていただければ幸いです。

<<: エンコードが utf-8 に設定されている場合に Web ページが文字化けする問題の解決策

>>: MySQL 演算子の具体的な使用法 (and、or、in、not)