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

推薦する

CSSとJSでロマンチックな流星群アニメーションを実現

1. レンダリング 2. ソースコードhtml < 本文 > < div クラス ...

MySQL 8.0 Windows zip パッケージ版の詳細なインストール手順

MySQL 8.0 Windows zipのインストール手順は次のように紹介されています。準備する:...

MySQL マスタースレーブレプリケーションの原理からインストールと設定までを包括的に解説します。

マスタースレーブレプリケーションがなぜ必要なのでしょうか? 1. 複雑な業務システムでは、SQL 文...

ドロップダウンボックス選択コンポーネントを実装するためのネイティブ js

この記事の例では、ドロップダウンボックス選択コンポーネントを実装するためのjsの具体的なコードを参考...

Dockerはjenkins+mavenコード構築および展開プラットフォームを構築します

目次Docker の基本概念Docker インストール プロセス (Centos6.9)カーネルのア...

同じレベルの要素で Position:fixed と margin-top を一緒に使用する場合の CSS の問題

問題の説明CSS を使用して上部の固定効果を実現したいと思います。 margin-top と pos...

React Native環境のインストールプロセス

react-native インストールプロセス1.npx react-native init Awe...

このポイントのJavaScriptの基本

目次これ方法オブジェクト内これを隠した厳密モード要約するJavaScript の this も不思議...

MySQL でメタデータ ロックがブロックされている場所を確認する方法

MySQL でメタデータ ロックがブロックされている場所を確認する方法手順: 1. セッション1の実...

CocosCreator 一般的なフレームワーク設計リソース管理

目次Cocos Creator のリソース管理に関する問題リソースの依存関係リソースの使用レスローダ...

Windows での MySQL 5.7.10 のインストールと設定のチュートリアル

MySQL は、ユーザーごとに 2 つの異なるバージョンを提供します。 MySQL コミュニティ サ...

Vue プロジェクトでブラウザ キャッシュ設定を無効にする例

プロジェクトをリリースするときに、キャッシュをクリーンアップする必要があるという問題に遭遇することが...

IE8でラベルの背景画像が表示されない問題の解決方法

今日、ちょっとした問題に遭遇し、長い間苦労しました。そのことを皆さんにシェアしたいと思います。 a ...

CSS3 列を使用したカード ウォーターフォール レイアウトを実装するためのサンプル コード

この記事では、カード ウォーターフォール レイアウトを実現するための CSS3 列のサンプル コード...

階層化されたピラミッドを実現するための HTML+CSS の例

この記事では主に、HTML+CSS で階層化ピラミッドを実装する例を紹介し、皆さんと共有します。詳細...