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)

推薦する

VMware 仮想マシンに CentOS と Qt をインストールするチュートリアル図

VMware のインストールパッケージのインストールダウンロードアドレス: https://www....

VueでEchartsチャートの幅と高さの適応を実現する実践

目次1. インストールとインポート2. 手ぶれ補正機能を定義する3. チャートコードを描くinit ...

MySQL トランザクション自動コミット自動コミット操作

MySQL のデフォルトの動作モードは自動コミット モードです。つまり、明示的にトランザクションを開...

MySQL の高可用性アーキテクチャの完全な説明: MHA アーキテクチャ

目次1. はじめに2. 構成3. 作業プロセス4. 建築5. 表示例MHA (Master HA) ...

mysql8.0.20 のダウンロードとインストールおよび発生した問題 (図とテキスト)

1.ブラウザでmysqlを検索してダウンロードしてインストールしますアドレス: https://d...

WeChatアプレットシングルページアプリケーションルーティングを徹底的に理解するための10分

シングルページアプリケーションの特徴「前提:」Web ページには、クリックするとサイト内の他のページ...

CSS3 のフレックスレイアウト幅の無効性の解決策

2 列レイアウトはプロジェクトでよく使用されます。この効果を実現する方法はたくさんあります。 しかし...

Vueでaxiosをカプセル化するいくつかの方法

目次ベーシックエディションステップ1: Axiosを構成するステップ2: リクエストをカプセル化する...

Vue3.0でカスタム命令を書くための簡単な手順

序文Vue には、v-if、v-bind、v-on などの豊富な組み込みディレクティブが用意されてい...

MySQL の悲観的ロックと楽観的ロックの使用例

悲観的ロック悲観的ロックは、データを悲観的であるとみなします。データをクエリするときに、ロックを追加...

TypeScriptのインデックスシグネチャの理解に関する簡単な説明

目次1. インデックス署名とは何ですか? 2. インデックス署名構文3. インデックス署名に関する注...

CSS3 で複数のカスタムフォントを導入する

今日、HTML に問題を発見しました。多くのデフォルト フォントが提供されていますが、「Bold」、...

React Router V6 のアップデート

目次ReactRouterV6 の変更1. <Switch> が <Routes&...

jsはユーザーのページ操作を記憶するためにクッキーを使用します

序文開発プロセスでは、ブラウザレベルでユーザーが実行した操作を記憶するなど、同様の要件に遭遇すること...