ホームページ > 記事 > ウェブフロントエンド > HTML でのスクリプトの配置に関する簡単な説明
HTML でのスクリプトの配置に関する簡単な説明
- 高洛峰オリジナル
- 2017-02-11 14:23:541597ブラウズ
以下のエディターでは、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='button' id='alert' value="anwo">
</body>
</html>
しかし、これでは期待した効果が得られません。最初は jquery 構文エラーだと思い、オンラインで確認して修正し続けました。でもうまくいかなかったので、スクリプトを後ろに置いたほうがいいのかなと思い、試してみたら、これはだめだということに気づきました。
後で確認したところ、原因はhtmlファイルがトップダウンで実行されるためですが、インポートされたCSSとJavaScriptの順序が異なっており、CSSを導入して読み込むと、プログラムは依然として下方向に実行されます。実行が 25efc3865c2f62a2cc2a777f3023aa8bスクリプトはスレッドを中断し、プログラムはスクリプトの実行が完了した後にのみ実行を継続します。したがって、スクリプトの長時間実行による遅延ブロックを避けるために、スクリプトは通常、本文の後に配置されます。一部のページの効果を実現するには、一部の JS スクリプトを事前に動的に読み込む必要があるため、これらのスクリプトを 6c04bd5ca3fcae76e30b72ad730ca86d の前に配置する必要があります。次に、dom 要素にアクセスする必要がある js を body の前に配置することはできません。dom がまだ生成されていないため、body の前に dom 要素にアクセスする js はエラーになるか無効になります。このため、dom が生成される前にメソッドを追加したことがこの問題につながりました。
もっと勉強したほうがいいよ、それだけだと思っているのに、そこを掘り下げていないところがたくさんある。これからも頑張ってください！
ps: 実際には、jquery の初期化ページ メソッドを使用する別の方法もあります。上記のラベルに追加されたクリック イベントを $(function(){}) に追加することもできます。原理は同じです。上記のように、このメソッドはページが読み込まれた後に実行されるため、どこにでも配置できます。
HTML でのスクリプトの配置に関する上記の簡単な説明は、エディターによって共有されたすべての内容です。参考になれば幸いです。また、PHP 中国語 Web サイトをサポートしていただければ幸いです。
HTML でのスクリプトの配置に関するその他の記事については、PHP 中国語 Web サイトに注目してください。