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

推薦する

カルーセルの制作方法を実現するjs

この記事では、カルーセル画像の表示を実現するためのjsの具体的なコードを参考までに共有します。具体的...

MySQL スロークエリログの設定と使用方法のチュートリアル

序文MySQL スロー クエリ ログは、日常業務でよく遭遇する機能です。MySQL スロー クエリ ...

Vue プロジェクトで axios リクエストを使用する方法

目次1. インストール2. カプセル化に問題はない3. ファイルを作成する4. アドレス設定をリクエ...

JavaScript を使用して div の位置をドラッグして入れ替える例

1 実施原則これは、DOM 要素の dragstart/ondragover/ondrop イベント...

TomcatコンポーネントはWebサーバーのアーキテクチャの進化を示しています

1. tomcat とは誰ですか? 2. Tomcat は何ができますか? Tomcat は Web...

CSS変数var()の使い方を理解する必要があります

Web プロジェクトがどんどん大きくなると、CSS は天文学的な大きさと複雑さを増します。この問題を...

互換性を維持しながら他のウェブページのデータを適用する iframe の使い方

以下は、Shiji Tiancheng が Tencent KartRider ページを呼び出すため...

MySQLのさまざまなロックの概念的理解

楽観的ロック楽観的ロックは、主にデータ バージョン記録メカニズムに基づいて実装され、通常はデータベー...

nginx と Tencent Cloud の無料証明書を使用して https を作成する方法

httpsを取得する方法を勉強しています。最近、Tencent Cloud が提供する無料の SSL...

Vue プロジェクトで TS (TypeScript) を使用するための入門チュートリアル

目次1. Typescriptの紹介2. 設定ファイル webpack 設定3. プロジェクトに.t...

WeChatミニプログラム抽選コンポーネントの使い方

WeChatコンポーネントの形式で提供されます。コンポーネント内部ではasync/awaitが使用さ...

CSS3 でテキスト ストロークを実装する 2 つの方法 (要約)

質問最近、以下に示すように、テキストストローク効果を実現するという要件に遭遇しました。 解決策1まず...

今日と昨日の 0:00 タイムスタンプを取得する MySQL の例

以下のように表示されます。昨日: UNIX_TIMESTAMP(CAST(SYSDATE() AS ...

JavaScript でプライベート変数を宣言する 2 つの方法

序文JavaScript は、キーワードを使用してプライベート変数を宣言できる他の言語とは異なります...

選択ドロップダウンボックスの値をIDに渡してコードを実装する方法

完全なコードは次のとおりです。 HTMLコード:コードをコピーコードは次のとおりです。 <!-...