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

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

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

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

XML/HTML コードコンテンツをクリップボードにコピー
  1. <!DOCTYPE html >   
  2. <html>   
  3. <ヘッド>   
  4. <スクリプト  src = "jquery/jquery-1.11.1.min.js" > </スクリプト>   
  5. </ヘッド>   
  6. <スクリプト>   
  7. $('#checkcash').click(function() {
  8. ($('#checkcash').val() == '0')の場合{
  9. $("#checkcash オプション[= '0' ]").remove();
  10. }
  11. });
  12. $("#alert").click(function(){
  13. アラート("1123");
  14. })
  15. </スクリプト>   
  16. <本文>   
  17. 現金は引き出されました   id = "チェックキャッシュ"    スタイル= "幅: 181px" >   
  18.                              <オプション  selected = "選択済み"  = "0" > </オプション>   
  19.                              <オプション = "1" >はい</オプション>   
  20.                              <オプション = "2" >いいえ</オプション>   
  21.                              </選択>   
  22.                                 
  23.                              <入力 タイプ= 'ボタン'   id = 'アラート'  = "anwo" >   
  24. </本文>   
  25.   
  26.   
  27. </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)

推薦する

Gogs+Jenkins+Docker による .NetCore ステップの自動デプロイ

目次環境説明DockerのインストールゴグのインストールDocker で .NetCore サービス...

MySQL 外部キー制約 (FOREIGN KEY) ケースの説明

MySQL 外部キー制約 (FOREIGN KEY) はテーブルの特別なフィールドであり、主キー制約...

CentOS に PHP5 をインストール、PHP をアンインストール、PHP7 をインストールするチュートリアル

まず、PHP5をインストールするのはとても簡単ですyum install php PHP5 を使用し...

Linux サーバーのスクリプトを自動的にバックアップする方法 (mysql、添付ファイルのバックアップ)

1.backup.shスクリプトファイルを作成する #!/bin/sh ソースフォルダ=/データ ...

Docker tomcatのメモリサイズを設定する方法

Docker に Tomcat をインストールする場合、大きなファイルをダウンロードするときなど、場...

Trash-Cli: Linux のコマンドラインごみ箱ツール

ゴミ箱は Linux ユーザー、Windows ユーザー、Mac ユーザーにとって非常に一般的なので...

Vue+nodeはオーディオ録音・再生機能を実現

結果: コードロジックを実装するのが主な部分であり、具体的なページ構造を一つ一つ紹介することはありま...

jsはシンプルなカウントダウンを実装します

この記事の例では、参考までに簡単なカウントダウンを実装するためのjsの具体的なコードを共有しています...

Vue で動的なスタイルを実現するためのさまざまな方法のまとめ

目次1. 三項演算子の判定2. 動的に設定されるクラス3. 方法判定4. 配列バインディング5. e...

Nginx ローカル ディレクトリ マッピング実装コード例

他のデバイスの画像をローカルディレクトリにマウントするなど、サーバー上の静的リソースにアクセスする必...

Mysql テーブルで利用可能な最小 ID 値を照会する方法

今日、研究室のプロジェクトを見ていたとき、私にとって「難しい」問題に遭遇しました。実は、それは私があ...

CSS3 フィルターを使用して PNG 画像の色を変更するサンプル コード

この方法は、CSS3のdrop-shadow filterを使用して、png画像の不透明部分に任意の...

CCS におけるマージン: トップ崩壊問題を解決する

HTML 構造は次のとおりです。 CCS 構造は次のとおりです。 ページ効果図は次のとおりです。 こ...