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 アプリケーションをデプロイする

推薦する

MySQLはストアドプロシージャを使用して数百万のデータを素早く追加します。サンプルコード

序文インデックスを追加した場合と追加しなかった場合の違いを反映するには、数百万のデータを使用する必要...

el-table カプセル化に基づくドラッグ可能な行と列、および選択列コンポーネントの実装

効果環境が必要ビュー要素UIドラッグアンドドロッププラグインSortable.js必要な構成プロパテ...

CSS でフッターの「下部吸収」効果を実現

よく遭遇する問題: 下部の要素を「下部に貼り付ける」効果を CSS でどのように実現するか。この記事...

MySql 5.7.17 winx64 のインストールと設定に関する詳細なチュートリアル

1. ソフトウェアをダウンロードする1. MySQL の公式サイトにアクセスし、Oracle アカウ...

CSS スティッキーフッター実装コード

この記事では、CSS スティッキー フッターの実装コードを紹介し、共有します。詳細は次のとおりです。...

暗号化における https の Apache 展開の概要

目次目的実験環境実験原理実験手順1. 独立したCAを生成する2. サーバーの秘密鍵と署名要求ファイル...

jsオブジェクトの読み取り速度の詳細な例

1. リテラルとローカル変数へのアクセスは最も高速ですが、配列要素とオブジェクト メンバーへのアクセ...

友達やグループを見つけるためのJavaScriptのLayim

現在、layuiの関係者はlayim友達検索ページの構造とスタイルを提供していません。私は個人的に非...

Vue プロジェクトにおけるトランジション コンポーネントの適用の概要

​Vue のトランジションは、アニメーション トランジションをカプセル化するコンポーネントです。一般...

element-uiのアップロードコンポーネントでファイルやその他のパラメータを転送する際の問題を分析する

最近、element-ui を統合したプロジェクトで vuethink を使用しました。以前は bo...

Nginx イントラネット スタンドアロン リバース プロキシの実装

目次1 Nginxのインストール2 Nginxの設定3 ホストファイルを変更する4 テストNginx...

ページ リファクタリング スキル - Javascript、CSS

JS、CSSについてCS: ...上部のスタイルシートCSS式を避ける外部JS、CSSの使用JSと...

HTMLウェブページテーブル構造化マークアップの応用に関する簡単な説明

Web テーブルの構造マークアップについて説明する前に、いくつかの画像を見てみましょう。 HTML ...

JavaScript における var と let の違い

目次1. スコープはさまざまな方法で表現されます2. 変動昇進と非昇進の違い3. 一時的なデッドゾー...

MySQLで重複行を削除する方法

SQL文 /* MySQL で重複行を削除するいくつかの方法 ---Chu Minfei ---20...