この段階を学習するときに良いプログラマは学習スキルを学習jQueryのウェブフロントエンドルートを共有し、jQueryの研究のWebフロントエンドに不可欠な要素であり、多くの小さなパートナーが問題に遭遇してきた、今日はjQueryのについて話をする必要があり、私たちを聞かせてそれを見てみましょう！
1、ページ要素に上場
jQueryの$参照要素は、ID、クラス、要素名と要素とDOMやXPathの条件の階層関係による方法を含むことで、jQueryオブジェクト（オブジェクトのコレクション）にオブジェクトを返すには、あなたが直接DOM定義されたメソッドを呼び出すことはできません。
図2に示すように、オブジェクトのDOMにjQueryオブジェクト
jqueryの定義されたを使用する唯一のjQueryオブジェクト。注jqueryのDOMオブジェクトとオブジェクトを使用すると、呼び出したときの動作の方法は、jQueryのDOMオブジェクトまたはオブジェクトに注意を払うことで、異なっています。共通DOMオブジェクトは、一般的に$をjQueryオブジェクトによって変換することができます。
以下のような：$（のdocument.getElementById（ "MSG"））、jQueryオブジェクトと比較して、あなたはjqueryのメソッドを使用することができます。
jQueryオブジェクトは、コレクション自体ですので。だから、DOMのjQueryオブジェクトをオブジェクトに変換する場合、一般的に、インデックスにより除去され、それらのいずれかで除去されなければなりません。
以下のような：$（ "＃のMSG"）[0]、$（ "div要素"）EQ（1）[0]、$（ "div要素"）[1]、$（ "TD"）を取得[5]これら。オブジェクトは、DOMは、DOM方法には、使用されてもよいが、jQueryのメソッドを使用することはできません。
以下のバージョンが正しいです。
$（ "＃のMSG"）のhtml。
$（ "＃のMSG"）[0] .innerHTML。
$（ "＃のMSG"）EQ（0）[0] .innerHTML。
$（ "＃のMSG"）（0）.innerHTMLを取得します。
jQueryの特定のセットを取得する方法3、
項目を取得（インデックスで指定）EQを使用するか、または（n）を取得してもよいし、当量のjQueryオブジェクトが返されることに留意、及び（n）を取得するインデックス番号の取得方法、およびインデックスを返された前記要素のセットを得るためDOM要素がオブジェクトです。のみjQueryのjQueryオブジェクトを使用して、唯一のそのような第三のを取得するようにDOMのDOMメソッドを、許可されている方法
コンテンツ要素。
次の二つの方法：
。$（ "本部"）EQ（2）の.html; // jQueryオブジェクトのメソッドを呼び出します
。$（ "本部"）を取得（2）.innerHTML; //メソッド属性のDOMを呼び出します
4、同じ機能セットを達成し、取得します
多くの点でjQueryのは、主に以下のものが含まれ、真であります：
・$（ "＃メッセージ"）HTMLは;. //要素ノードのMSGのid HTMLコンテンツを返します。
・$（ "＃のMSG"）HTML（ "新しいコンテンツ"）。
* //「新しいコンテンツが」文字列のHTML要素ノードのID MSGコンテンツとして書かれ、ページが大胆な新しいコンテンツを表示します
・$（「＃メッセージ」）テキスト;. //は要素ノードのMSGのテキストコンテンツのIDを返します。
。・$（ "＃のMSG"）、テキスト（ "newcontent"）;
* //「新しいコンテンツ」が書き込まれ、プレーンテキスト文字列のMSG id要素ノードがコンテンツであるとして、ページが新しいコンテンツを表示します
・$（ "＃メッセージ"）の高さ;. //要素のMSGの高さのIDを返します。
・$（ "＃メッセージ"）の高さ（ "300"）;. //高さMSG 300への要素のid
・$（ "＃メッセージ"）幅;. //要素のMSG幅のIDを返します。
・$（ "＃メッセージ"）の幅（ "300"）;. //要素MSG 300の幅にIDを設定します
・$（「入力」）valが（「）;. //フォームの入力ボックスの値の値を返します。
・テストに$（「入力」）のval（「テスト」）;. //値の値フォームの入力ボックス
・$（ "＃メッセージ"）をクリックし;. //要素のクリックイベントのトリガのMSG ID
・$（ "＃メッセージ"）をクリックします（FN）;. //要素のMSG IDのクリックイベントに関数を追加
・同様に、焦点をぼかし選択し、イベントを呼び出す方法の2つの方法があったことができ提出
図5に示すように、処理機能のセット
・$の.extend（{
・分：関数（a、b）は、{<B戻り：Bと、}、
・最大：関数（B）{> B A戻り：B;？を }
*}）;二つの方法のMIN、MAXの// jQueryの拡張
・使用の拡張子（スルー「$メソッド名」コール。）：
・警告（ "A = 10、B = 20、最大=" + $ MAX（10,20）+ "分=" + $分（10,20）。）;
6.支援合字の方法
jQueryオブジェクトへの連続通話の異なる種々の方法であることができる、いわゆる結紮糸、。
例えば：
$（ "P"）。クリックしてください（関数{警告（$（この）の.html）}）
.mouseover（関数{アラート（ 'マウスオーバーイベント'）}）
.each（関数（I）{this.style.color = [ '＃のF00'、 '＃の0F0'、 '＃1 00F'] [I]}）。
7、スタイルの操作要素
これは、次の方法があります。
・$（ "＃メッセージ"）、CSS（ "バックグラウンド"）;. //要素の背景色を返します。
・$（ "＃メッセージ"）。のCss（ "背景"、 "＃のCCC"）//設定要素灰色の背景
。・$（ "＃メッセージ"）の高さ（300）; $（ "＃のMSG"）の幅（ "200"）;. //幅と高さを設定します
・$（「＃メッセージ」）、CSS（{色：、背景「赤」「青」}）; //名前と値のペアの形式でスタイルを設定します
・$（「＃メッセージ」）addClass（「選択」）;. //クラスの要素名が選択増やします
・$（「＃メッセージ」）removeClass（「選択」）;. //クラスの要素名を削除を選択
・$（「＃メッセージ」）toggleClass（「選択」）;. //（存在しない）を削除（追加）がある場合は、クラスの名前を選択
図8に示すように、改良されたイベント処理
jQueryのイベント処理メソッドのさまざまなを提供してくれた、私たちは、html要素に直接イベントを記述する必要はありません、あなたが直接取得しjqueryのの対象となるイベントを追加することができます。
以下のような：
$（「＃メッセージ」）。クリックします（関数{警告）（「良い」}）//要素のクリックイベントを追加
$（ "P"）をクリックし（関数（I）{this.style.color = [ '＃のF00'、 '＃の0F0'、 '＃1 00F'] [I]}）
//クリックイベントの三つの異なる要素のためのpは、異なる処理を設定されています
いくつかのカスタムイベントでjQueryの：
（1）ホバー（FN1、FN2）：方法（マウスおよび物体上のオブジェクトの外に移動される）ホバーイベントを模倣します。上記の整合素子にマウスが移動し、それは指定された最初の機能をトリガする場合。この要素のうち、マウスは、それが2番目に指定された機能を起動しますとき。
行が上のクラスに設定されているときにマウスがテーブル上に置かれた場合//、除外するように設定されています。
$（ "TR"）。ホバー（関数{
$（この）.addClass（ "オーバー"）;
}、
関数{
$（この）.addClass（ "アウト"）。
}）;
（2）準備完了（FN）：DOM照会および操作する準備ができたときに実行される機能をバインドします。
$（ドキュメント）.ready（関数{警告（ "ロード成功"）}）
//ページは、プロンプト「ロード成功」、onloadイベントの同等ロードされます。同等と$（FN）
（3）トグル（evenFn、oddFn）：クリックしたとき、機能を切り替えるたびに呼び出されます。あなたは試合の要素をクリックすると、2番目の指定された関数をトリガー、あなたは再び同じ要素をクリックしたときに指定された最初の機能をトリガします。以降のクリックは、この2つの関数を呼び出す交代し続けます。
//クリックされたときに呼び出さ選択したクラスの各回転を追加および削除。
$（ "P"）。トグル（機能{
$（この）.addClass（ "選択"）。
}、関数{
$（この）.removeClass（ "選択"）。
}）;
（4）トリガー（EVENTTYPE）：すべてのマッチした要素のイベントの種類をトリガー。
例えば：
。$（ "P"）トリガ（ "クリック"）; //全ての要素のpのクリックイベントをトリガ
（5）結合（EVENTTYPE、FN）、アンバインド（EVENTTYPE）：バインドとアンバインドイベント
各要素のマッチングから、イベントの削除結合（追加）。
例えば：
$（ "P"）バインド（ "クリック"、機能{警告（$（この）は.text）;}）;. //各要素pのクリックイベントを追加します。
$（「P」）アンバインド;. //全ての要素p上のすべてのイベントを削除します
$（「P」）。アンバインド（「クリック」）//すべてのp要素にクリックイベントを削除します。
9、いくつかの実用的なエフェクト機能
前記トグル状態slidetoggle方法は、機能を切り替える提供します。
この方法は、トグル非表示と表示方法が含まれます。
そしてslideDown slideToggle slideUp方法を含む方法。
図10に示すように、いくつかの有用なjQueryの方法
$ .Browserブラウザの種類：ブラウザの種類を検出します。効果的なパラメータ：サファリ、オペラ、MSIE、Mozillaの。このようなすなわち:. $ Browser.isieかどうかを検出するよう、ブラウザつまりtrueを返します。
$ .Each（OBJ、FN）：一般的なイテレータ機能。反復は、オブジェクトと（代わりに、円形の）配列を近似するために使用することができます。
として
$ .each（[0,1,2]、機能（I、N）{アラート（ "アイテム＃" + I + "：" + N）;}）;
それはと同等です。
vartempArr = [0,1,2]。
用（VARI = 0;私
警告（ "商品番号" + I + "：" + tempArr [I]）;
}
JSONデータのような、処理されてもよいです
$ .each（{名： "ジョン"、ラング： "JS"}、関数（I、N）{アラート（ "名称：" + I + "値：" + N）;}）;
結果は以下のとおりです。
名前：名前、値：ジョン
名前：LANG、値：JS
$ .Extend（ターゲット、PROP1、propN）：一個の以上の他のオブジェクトがオブジェクトを拡張すると、オブジェクトが展開され返します。これは、達成するために、継承jqueryのです。
以下のような：
$ .extend（設定、オプション）;
//設定とオプションをマージし、設定を戻すために結果を結合、設定で結果保存オプションの継承と承継の設定に相当します。
VAR設定= $（{}、デフォルト値、オプション）を延ばします。
//デフォルトとオプションをマージし、コンテンツなしでデフォルトの設定をカバーするために戻って結果をマージ。
あなたが複数のパラメータを持つことができます（合併とリターンの数）
$ .MAP（配列、FN）：配列のマッピング。新しい配列を保存する別のアレイ（後処理変換）の項目、および生成された新しい配列を返します。
以下のような：
。vartempArr = $マップ（[0,1,2]、関数（I）{戻りiは+ 4;}）;
tempArrは言う：[4,5,6]
。vartempArr = $マップ（[0,1,2]、関数（I）{リターンI> 0 I + 1：NULL;}）;
tempArrは言う：[2,3]
$ .Merge（ARR1、ARR2）：2つの配列をマージし、重複した項目を削除します。
このような:. $（[0,1,2]、[2,3,4]）//戻り値[0,1,2,3,4]をマージなど
$ .Trim（文字列）：文字列の両端の空白文字を削除します。
如：$（ "こんにちは、どのようにあなたは？"）トリム;。//返回「こんにちは、お元気ですか？」
11、jQueryの競合とカスタムメソッドや他のライブラリのトラブルシューティング
何度も私たち自身は、要素を取得するために$（ID）メソッドを定義する、または一緒にこれらの両方が変数法の内容を原因とする場合は、このようなプロトタイプなどいくつかの他のJSライブラリものために、jQueryのを定義し、競合を$メソッドを定義しますこの特別には、この問題を解決するための方法を提供します。
jQuery.noConflictにjqueryのを使用して、変数法をその前に、ライブラリまたはカスタム実装を$最初の$方法の制御を与えます。$のjQueryのすべては、元の基準オブジェクトメソッド$（「＃1 MSG」）として、交換することができる限り、jQueryの時間を適用した後のjQuery（「＃のMSG」）を置き換えます。