JavaScriptの(IV) - オブジェクト指向プログラミング、BOM、DOM、フォーム検証、jQueryの

1.オブジェクト指向プログラミング

(1)プロトタイプオブジェクト
のJavaScript、Java(登録商標)、C#の。オブジェクト指向、我々は思考の私の方法を変更する必要がJavaScriptでJavaScriptのいくつかの違い!

  • クラス:テンプレートプロトタイプオブジェクト
  • オブジェクト:具体例
    ここに画像を挿入説明
    ここに画像を挿入説明

(2)クラスを継承
ES6に導入され、クラスキーワードを

  • クラス、プロパティ、メソッドを定義します。
    ここに画像を挿入説明
  • 継承
    自然:Viewオブジェクトのプロトタイプ
    ここに画像を挿入説明
    ここに画像を挿入説明
  • プロトタイプチェーンプロト__ __
    ここに画像を挿入説明

2.動作BOMオブジェクト(フォーカス)

ダウンロードJavaScriptをブラウザで実行するために彼を有効にするために生まれています

BOM:ブラウザオブジェクトモデルのJavaScript対応のブラウザ「対話」を作るために

  • IE 6〜11
  • クロム
  • サファリ
  • FireFoxの

三者

  • QQブラウザ
  • 360ブラウザ

(1)窓の
窓は表しブラウザのウィンドウ
ここに画像を挿入説明
(2)ナビゲーター(推奨されません)
ナビゲーターブラウザについてのカプセル化情報
ここに画像を挿入説明
の人々が変更されるため、ほとんどの時間、私たちは、ナビゲーターオブジェクトを使用していない
(3)画面が
表して画面のサイズを
ここに画像を挿入説明
( 4)場所は
表して、現在のページ情報のURL
を返すのhref現在のページwindow.location.hrefを(URL)
window.location.hostnameリターンWebホストのドメイン名
、現在のページまたはファイル名のwindow.location.pathnameリターンパス
window.location.protocol返すWebプロトコル(HTTP::)またはHTTPS
window.location.assignは、新しいドキュメントを読み込みます

ここに画像を挿入説明
(5)ドキュメント(コンテンツ; DOM)
ドキュメントを表す現在のページを、HTML DOMドキュメントツリー
ここに画像を挿入説明

  • 特定の文書ツリーノードのために
    ここに画像を挿入説明
    ここに画像を挿入説明
    -クッキーの取得
    document.cookie
    クッキーはあなたのあるコンピュータ上の小さなテキストファイルに格納されたデータ
    Webサーバーがブラウザにページを送信すると、接続が閉じている、サーバーはすべてのユーザーを忘れてしまいます。クッキーはしている「どのように利用者情報を記憶する」発明を解決するための:①ユーザーがページにアクセスすると、彼の名前はクッキーに保存することができます。②利用者の訪問のページ次の時間には、クッキーは彼の名前を「記憶」しています。
    (6)歴史(推奨されません)
    履歴の代わりに、ブラウザの履歴
    history.back()//バック
    history.forward()//フォワード

3.操作DOMオブジェクト(フォーカス)

  • HTML DOM(ドキュメントオブジェクトモデル)
    ページがロードされ、ブラウザがページを作成しますドキュメントオブジェクトモデル(ドキュメントオブジェクトモデル)
    モデルが構成されているHTML DOM オブジェクトツリーを
    HTML DOMツリーオブジェクトを
    ここに画像を挿入説明
    更新ドムノード:①アップデート
    ②トラバーサルをDOMノード:GETドムノード
    ③削除:DOMノードの削除
    追加④を:新しいノードを追加
    DOMノードを動作させるために、あなたがしなければならない最初のDOMノード取得
    DOMノード得るために、(1)
    ここに画像を挿入説明
    ここに画像を挿入説明
    ネイティブコードで、その後、私たちは持ってしてみてください(jQueryのを使用しています)

(2)ノードを更新します
ここに画像を挿入説明

  • テキストの操作
    id1.innerTextを=「456」=変更されたテキスト値id1.innerHTML「123 HTMLのテキストラベルを解析することができます」
  • 操作CSSの
    id1.style.color = 'イエロー'; //属性の文字列包ま
    id1.style.fontSize = '20ピクセルを'; - //ターンcamelCasing形式の問題
    id1.style.padding = '2EM'
    (3)ノードを削除
    ノードを削除するには:親ノードを取得し、その後、親によって自分自身を削除
    ここに画像を挿入説明
    ここに画像を挿入説明
    !注:複数のノードを削除するとき、子どもたちは絶えずノードは注意を払う必要があります削除、変更されている
    (4)ノードに挿入された
    特定のドムを取得しますその後、使用し、カバーする必要がありますが、ノードは、DOMノードが空であると仮定すると、我々は、要素のinnerHTMLプロパティを向上させることができますが、DOMノードのこの要素は、すでにそれはとても乾燥することができない、存在する追加の方法を
    ここに画像を挿入説明
    ここに画像を挿入説明

(5)を達成挿入し、新しいラベルを作成します

ここに画像を挿入説明
JavaScriptを実行する前に
ここに画像を挿入説明
はJavaScriptの実行後
ここに画像を挿入説明

  • insertBefore
    ノード.insertBefore(newNode、targetNode)を含むように
    ここに画像を挿入説明
    ここに画像を挿入説明

4.動作フォーム(検証)

データが確認されたHTMLフォーム入力データ内のサーバーに送信される前にJavaScriptを使用するために、フォームの目的:提出情報
フォームデータは、多くの場合、必要とその正しさを検証するためにJavaScriptを使用し

  • フォームデータが空であることを確認します
  • 入力が有効な電子メールアドレスであるかどうかを確認します
  • 日付が正しく入力されていることを確認します
  • 検証フォームの入力内容は、数値型であります

特定のコントロールが含まれます:

  • テキストボックスのテキスト
  • ドロップダウンボックス<選択>
  • ラジオボタンラジオ
  • チェックボックスのチェックボックス
  • 隠しフィールド隠し
  • [パスワード]ボックスにパスワード
    .......
    情報へ(1)アクセス提出する
    ここに画像を挿入説明
    ここに画像を挿入説明
    (2)形式のMD5暗号化パスワード、フォームの最適化を提出
    ここに画像を挿入説明
    ここに画像を挿入説明

5. jQueryの

jQueryライブラリは、JavaScript関数の内部の多くがされている
(1)GET jQueryの
式:$(セレクタ)イベント(イベント関数)
ここに画像を挿入説明
ここに画像を挿入説明
(2)セレクタ
ここに画像を挿入説明
(3)イベント
ページが異なる訪問者への応答イベントと呼ばれます

  • 共通DOMイベント:
    ここに画像を挿入説明
    たとえば、
    ここに画像を挿入説明
    ここに画像を挿入説明
    (4)営業DOM
  • ノードのテキスト操作
    ここに画像を挿入説明
  • CSSの操作
    ここに画像を挿入説明
  • 隠すと、ディスプレイの要素:ディスプレイの性質:なし。
    ここに画像を挿入説明
  • エンターテインメントテスト
    ここに画像を挿入説明
公開された62元の記事 ウォンの賞賛2 ビュー2740

おすすめ

転載: blog.csdn.net/nzzynl95_/article/details/103941214