JavaScriptを使用してページ効果を作成する

JavaScriptを使用してページ効果を作成する

11. JavaScriptを使用してページ効果を作成する

11.1 DOMプログラミング

DOM プログラミング (ドキュメント オブジェクト モデル) ドキュメント オブジェクト モデル

ここに画像の説明を挿入

DOM プログラミングでは、ページ全体がドキュメント オブジェクトと見なされ、HTML 要素は特定のオブジェクトです。DOM の核心は、対応する HTML 要素オブジェクトを見つけ、それを操作 (属性またはスタイルを変更) して、新しい HTML 要素オブジェクトを生成することです。

11.2 JS でページ内の要素を検索する

  • フォームの名前の包含関係を通じてオブジェクトを検索します: document.calForm.num1
  • HTML 要素の id 属性を通じて HTML 要素オブジェクトを取得します。
  • document.getElementById(id)
  • HTML 要素の name 属性を通じて、同じ name 属性値を持つ複数の HTML 要素オブジェクトを取得します。同じ name 属性を持つすべてのオブジェクトを格納する配列を返します。document.getElementsByName document.getElementsByName(name) HTML 要素のタグ名を通じて、同じタグを持つ複数の HTML 要素オブジェクトを取得します。
  • document.getElementsByTagName(tagName)

11.2.1 ダイナミックタイム

ページに表示される時間は動的です。ページが開始されると時間が表示されます。時間には 2 つの種類があります。

サーバー時間 (Java 経由で取得)、クライアント時間 (JS 経由で取得)、各クライアントの時間に従って表示されます。

ここに画像の説明を挿入
ここに画像の説明を挿入

11.2.2 すべて選択またはすべて選択解除機能

ここに画像の説明を挿入
ここに画像の説明を挿入

JavaScript を使用してページ エフェクトを作成する方法については、これで終わりです。より関連性の高い js ページ作成コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • vue.jsページの作成とマウントの順序
  • Nuxt.js ルーティング ジャンプ操作 (ページ ジャンプ nuxt-link)
  • JSはページ上でマウスをクリックしたときに画像の特殊効果を実装します
  • JSP を使用してシンプルなユーザー ログインおよび登録ページを実装するサンプル コード分析
  • Spring Boot で JSP ページを使用する方法

<<:  MySQL データベース テーブルのパーティション分割に関する考慮事項 [推奨]

>>:  Docker を使用して Nginx+Flask+Mongo アプリケーションをデプロイする

推薦する

Dockerコミットの使い方の詳しい説明

場合によっては、ベースイメージに特定の依存関係をインストールする必要があります。Dockerfile...

知っておくべき 7 つのネイティブ JS エラーの種類

目次概要1. 範囲エラー2. 参照エラー3. 構文エラー4. タイプエラー5. URIエラー6. 評...

Linux で ffmpeg をインストールするための詳細なチュートリアル

1. CentOS Linuxにffmpegをインストールする1.ダウンロードして解凍する http...

HTML テーブルタグチュートリアル (13): 内部境界スタイル属性ルール

RULES を使用すると、テーブルの内部境界のスタイルを制御できます。基本的な構文<TABLE...

uni-appのスタイルの詳細な説明

目次uni-app のスタイル要約するuni-app のスタイルsassプラグインは公式ウェブサイト...

MYSQLの主キー制約とユニーク制約の違いについて簡単に説明します。

目次主キー制約ユニーク制約主キー制約PRIMARY KRY 主キーは一意です。テーブルには主キーを ...

Mysql マルチテーブル結合クエリの実行の詳細について簡単に説明します。

まず、このブログのケースデモンストレーション テーブルを作成します。 create table a(...

MySQL のデフォルトのストレージ エンジンを変更する方法

mysql ストレージ エンジン: MySQL サーバーはモジュール スタイルを採用しており、特にス...

MySQL ページングパフォーマンスの調査

一般的なページング方法: 1. エスカレーター方式エスカレーター方式では通常、前のページ/次のページ...

CSSアニメーションを使用して背景のシームレスな無限ループを実装する例

1. 需要絵が左から右へ無限ループで動く2. コードモバイルデバイスに適用されているため、rem 単...

Vue コンポーネント値転送中のデータ損失の分析と解決

序文前回の記事では、JavaScript の 2 つのデータ型、基本型と参照型、および参照型の浅いコ...

Windows 10 での MySQL 5.7.21 winx64 のインストールと設定方法のグラフィック チュートリアル

mysql 5.7.21 winx64 のインストールと設定方法: MySQLのコミュニティバージョ...

JavaScript/TypeScript で同時リクエスト制御を実装するためのサンプルコード

シナリオリクエストが 10 件あるが、同時リクエストの最大数は 5 件で、リクエスト結果が必要である...

WindowsシステムでMySQLデータベースを完全にアンインストールして、MySQLを再インストールします

1. コントロールパネルで、MySQLのすべてのコンポーネントをアンインストールします。コントロール...

Dockerボリュームのファイルマッピング方法

背景ブロックチェーン ログ モジュールで作業しているときに、コンテナーが実行されている場合は、ログ ...