ホームページ >ウェブフロントエンド >jsチュートリアル >jQueryの基礎知識入門_jquery
jQueryの基礎知識入門_jquery
- WBOYオリジナル
- 2016-05-16 16:20:281255ブラウズ
JavaScript ライブラリの関数と比較
JavaScript の開発を簡素化するために、多くの事前定義されたオブジェクトとユーティリティ関数をカプセル化するいくつかの JavasScript ライブラリが誕生しました。ユーザーは、操作が難しい Web 2.0 機能を備えたリッチ クライアント ページを作成するのに役立ち、主要なブラウザーと互換性があります
現在人気のある JavaScript ライブラリは次のとおりです:
jQuery の概要
jQuery は Prototype に次ぐ優れた JavaScript ライブラリです
jQuery の哲学: 書く量を減らし、実行する量を増やす利点は次のとおりです。
軽量
強力なセレクター
DOM 操作の優れたカプセル化
信頼性の高いイベント処理メカニズム
完璧な Ajax
優れたブラウザ互換性
チェーン動作モード
……
jQuery: HelloWorld
jQuery オブジェクト
jQuery オブジェクトは、DOM オブジェクトを jQuery ($()) でラップすることで生成されるオブジェクトです
jQuery オブジェクトは jQuery に固有です。オブジェクトが jQuery オブジェクトの場合、jQuery のメソッド $(“#persontab”).html();
を使用できます。jQuery オブジェクトは DOM オブジェクトのメソッドを使用できません。また、DOM オブジェクトは jQuery のメソッドを使用できません
規則: jQuery オブジェクトを取得する場合は、変数の前に $ を追加します。
var $variable = jQuery オブジェクトvar 変数 = DOM オブジェクト
DOM オブジェクトを jQuery オブジェクトに変換しました
DOM オブジェクトの場合は、DOM オブジェクトを $() でラップするだけで (jQuery オブジェクトは DOM オブジェクトを jQuery でラップして生成されたオブジェクトです)、jQuery オブジェクトを取得できます。
変換後、jQuery のメソッドを使用できるようになります
jQuery オブジェクトを DOM オブジェクトに変換します
jQuery オブジェクトは DOM 内のメソッドを使用できませんが、jQuery が目的のメソッドをカプセル化せず、DOM オブジェクトを使用する必要がある場合は、次の 2 つの方法があります。(1) jQuery オブジェクトは配列オブジェクトであり、対応する DOM オブジェクトは [index] メソッドを通じて取得できます。
(2) jQuery の get(index) メソッドを使用して、対応する DOM オブジェクト を取得します
jQuery セレクターセレクターは jQuery の基礎です。jQuery では、イベント処理、DOM トラバーサル、および Ajax 操作はすべてセレクターに依存します。
jQuery セレクターの利点: 簡単な書き方
完全なイベント処理メカニズム
基本セレクター
基本セレクターは、jQuery で最も一般的に使用されるセレクターであり、要素 ID、クラス、タグ名を通じて DOM 要素を検索します (ID は Web ページとクラスで 1 回のみ使用できます)。繰り返し使用できます) .
基本的なセレクターの例
クラス mini のすべての要素の背景色を #bbffaa に変更します
すべての要素の背景色を #bbffaa に変更します
すべての 要素と ID が 2 の要素の背景色を # bbffaa に変更します
レベルセレクター
子孫要素、子要素、隣接要素、兄弟要素などの DOM 要素間の階層関係を通じて特定の要素を取得する場合は、階層セレクターを使用する必要があります。
を選択できます
階層セレクターの例内のすべての
に変更します。
内のサブセクションID 1 の次の
ID 2 の要素の背後にあるすべての兄弟
ID が 2 の要素のすべての