jQueryのAJAXフレームワークを使用します

ただ、JQuqeryを学び始め、$をGETの多くの()、...などの記号にすでに私のめまいを設定します。一時的にあきらめます。
その後、徐々にサーバー側、クライアント側のプログラミングからシフトし、マイクロソフトのリーダーシップの下、ASP.NET AJAXを学びます。、クライアント側のプログラミングでの私の関心を呼んで
のjQueryについての学習を思い出した。
インターネット上の通信WEB2.0とAJAXアイデアの急速な発展に伴い、いくつかの優れたのJSフレームワークで発見された、より有名なの一つは、プロトタイプ、YUIですjQueryのは、MooToolsは、のBindows国内JSVMフレームワークは、これらのJSフレームワークを通じて私たちのプロジェクトに適用されるプログラマが設計し、複雑なアプリケーションを作成するJSから解放することができ、焦点は、機能要件になってではなく、実装の詳細に、それによって、プロジェクトの開発の速度を上げます。
jQueryのは、別の優れたJavaScriptフレームワークの第二の原型です。これは、JavaScriptの™とAjaxプログラミングを簡素化するのに役立ちますジョンResig氏によって2006年初めに作成されました。ルビーのようなJava、jQueryのようなプロトタイプ、それはあなたが単にイベントを処理する、あなたのウェブページの文書を操作することを可能にする、シンプルで高速かつ柔軟なJavaScriptフレームワークです:一部の人々は、プロトタイプとjQueryを比較するために、このような比喩を使用しています。 Webページのための特別な効果を達成するためにAjaxインタラクションを追加します。

:それは次のような特徴のいくつか持っている
1、意味理解しやすい簡潔なコード、、、高速の豊富なドキュメントを学習します。
2は、jQueryのは、JavaScriptのパッケージの最新バージョンは約20Kで、そのコードは非常に小さく、軽量なスクリプトです。
3、jQueryのサポートCSS1-CSS3、および基本的なされたxPath。
4、jQueryのは、IE 6.0以上、FF 1.5+、Safariの2.0+などのブラウザをサポートクロスブラウザ、である 、オペラ9.0以降を。
図5に示すように、jQueryのは、簡単に他の機能を拡張することができます。
図6に示すように、HTMLコードとJSコードが完全に分離し、容易維持し、コードを変更することができます。
7が、プラグインが豊富な、いくつかの特殊効果を持つjQueryの自体に加えて、あなたは、このようなフォームバリデーション、タブナビゲーション、ドラッグアンド効果をドロップし、テーブルのソート、データグリッド、ツリーメニュー、AJAXアップロードした画像や特殊効果などのプラグインを通じて、より多くの機能を実現することができます。

jQueryのは、あなたがJavaScriptコードを記述方法を変更するように設計されて、あなたが運転ページの複雑さを軽減するためにJSを使用することを学ぶ、ウェブJSは、両方の初心者や専門家のJSのために、jQueryのは、あなたの最初の選択肢となり、開発効率を向上させます。
jQueryのは、開発者、設計者に適しており、幸いにも、また商業開発に適している人たちは、それがjQueryのJavaScriptアプリケーション内の任意の場所のために言うことができる、それは別のWebアプリケーションに使用することができます。
公式サイト:のhttp:中国サイト//jquery.com/ます。http://jquery.org.cn/

1.2目的
本書を通じては、文法、共通の、ヒントや注意事項の他のjQueryとJSフレームワークjQueryの把握とは明らかに異なるのjQueryの理解を簡単に理解し、持つことができます。

第二に、使用
ページへのjQueryのjsファイルを導入するには、中にjQueryのを使用する必要があります。
たとえば、次のようにます。<script type = "text / javascriptの" srcが= "JS / jquery.js"> </ SCRIPT>
ページ内のどこにでも提供さjQueryの構文を使用することができます導入後。

第三に、チュートリアルとリファレンス情報
、「マニュアルjQueryの中国のAPI」を参照してくださいとhttp://jquery.org.cn/visual/cn/index.xmlは、
「jQueryのチュートリアルが開始点」と「使用:2つの良いjQueryのチュートリアルをお勧めします「jQueryを使ってAjax開発を簡素化


第四に、構文の概要とノート

ページ要素に上場1は、
ID、クラス、要素名とjQueryの$()によって要素とDOMやXPathの条件の階層関係によって、方法を含む要素を指し、オブジェクトとjQueryオブジェクト(オブジェクトのコレクション)へのリターンは直接することはできませんDOMに定義されたメソッド呼び出し。

図2に示すように、変換jQueryオブジェクトDOMオブジェクト
のみ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();.
$( "#メッセージ")[0] .innerHTML;
$( "#のMSG")EQ(0)[0] .. innerHTMLの;
$( "#のMSG")GET(0).innerHTML;

図3に示すように、jQueryの特定のセットを取得する方法を
当量使用してもよい(インデックスで指定された)アイテムが取得される要素のコレクションの取得のため、または(n)を取得またはインデックス番号の取得方法、EQはjQueryオブジェクトを返すことに留意すべきで、および(n)を取得し、インデックス要素オブジェクトDOMを返します。のみjQueryのjQueryオブジェクトを使用し、そして方法は、第3のコンテンツの<div>要素を取得するなど、DOMのDOMメソッドを許可されています。2つの方法があります
。$( "div要素")EQ(2)の.html(); //コールjQueryオブジェクトのメソッド
$( "本部"という。)(2).innerHTMLをGET; //メソッド呼び出しDOMプロパティ。

4、同じ機能セットを達成し、取得するために
jqueryのが真のメソッドの多くは、主に以下のものが含ま:
HTML()$(「#のMSGを」); //要素ノードのMSGのid HTMLコンテンツを返します。
$( "#のMSG")HTML( "<B>新しいコンテンツ</ B>" );.
// "<B>新しいコンテンツ</ B>" の内容で記述されたHTML要素ノードID列としてMSG 、ページ表示大胆な新しいコンテンツ

$( "#のMSG")、テキスト ();. // 要素ノードのMSGのテキストコンテンツのIDを返します。
$( "#のMSG")、テキスト( "<B>新しいコンテンツ</ B>" );.
// "<B>新しいコンテンツ</ B>" MSGのプレーンテキスト文字列のid要素ノードのコンテンツとして書かれています、ページ表示<B>新しいコンテンツ</ B >

$( "#のMSG")の高さ //();. 素子高さのMSGのIDを返します
$( "#のMSG")の高さ ( "300");. // 要素MSG 300の高さにIDを設定します
$( "#のMSG")幅 //();. 要素のMSGの幅のIDを返す
$( "#1 MSG")幅 ( "300");. // 要素MSG 300の幅にIDを設定します

$(「入力」)valが( 「);. // フォーム入力ボックス値値を返す
(入力」)。ヴァル$「 (」試験「); // 値の値フォーム入力ボックス試験に

$( "#のMSG")をクリックします ();. //は、 クリックイベントID MSGトリガー
$( "#のMSGは")をクリック (FN);. // 要素のMSG IDのクリックイベントに関数を追加します
同様に、焦点をぼかし選択し、イベントを呼び出す方法の2つの方法があったことができ提出

処理機能のセット5は、
コンテンツのjQueryの収集のためには、別途、各オブジェクトを介して私たち自身のループを持って処理を行うことなく、返され、jqueryのは、コレクションを処理するために非常に便利な方法を提供してくれました。
二つの形態:
。$( "P")各(関数(I)= {this.style.color [ '#のF00'、 '#の0F0'、 '#00F']})
//インデックスが0でした、p要素1及び2は、異なるフォント色を設定しています。

$( "TR")。各(関数(I){this.style.backgroundColor = [ '#1 CCC'、 '#FFF'] [%I 2]})
//インターレース変色形態の効果を達成します

$(「P」)。クリックしてください(関数(){アラート($(この)の.html())})
その内容のポップアップ要素上に、pの各要素のクリックイベントを増やす// p個のクリック

図6は、我々は、機能拡張する必要が
$ .extend({
; <} ,? B B A機能(A、B){返す:minが
B A:?B:最大関数(A、B)は{Aを返すを>。 }
}); //拡張jqueryの分、最大二つの方法
の拡張プロセス( "$メソッド名"コール)を使用して:
警告( "A = 10、B = 20、最大で=" $ + maxは(。 10,20)+ "分=" + $分(10,20));

7の結紮法のサポート
jQueryオブジェクト異なる種々の方法と連続通話することができる、いわゆる結紮糸、。
たとえば、次のように
。$( "P")をクリックします(関数(){アラート($(この)の.html())})
.mouseover(関数(){アラート( 'マウスイベント超える')})
.each(関数( I){this.style.color = [ '#の F00'、 '#の0F0'、 '#1 00F']})。

8、運転スタイル要素は、
以下の方法が含まれる:
$( "#のMSG")CSS( "背景"); //要素の背景色を返します。
$( "#メッセージ")CSS( "背景"、。 " #CCC ")//は灰色の背景上の素子セット
$(" #のMSG ")の高さ (300);. $(" #1 MSG ")の幅(" 200 "); // アスペクト設定
$("位MSG ")、CSS({色 "赤"背景:"青"}); // 名前と値のペアの形式で設定されたパターン
")addClass( "$は( " #1 MSG選択「); //でありますクラス増加する要素の名前を選択し
たクラスを選択する要素名を削除// ;.(「選択」)$(「#のMSG」)removeClassを
(「選択」)$(「#のMSG」)toggleClassを;. //あった場合選択(追加)を削除し、クラスの名前を(存在しません)

9、取り扱い完璧なイベント
jQueryのイベント処理方法の多様を提供してくれた、私たちは、html要素に直接イベントを記述する必要はありません、そしてオブジェクトは、イベントを追加するためにjqueryのことで直接得ることができます。
以下のような:
$( "#のMSG")をクリックします(関数(){)アラート( "グッド"})//要素のクリックイベントを追加します。
$( "p型")をクリックします(関数(I){this.style。 = .color [ '#のF00'、 '#の0F0'、 '#1 00F']})
// P三つの異なる要素は、異なるクリックイベント設定処理である
jQueryのいくつかのカスタムイベント:
(1 )ホバー(FN1、FN2):模倣ホバーイベント(マウスがオブジェクトの上に物体の外に移動させる)方法。上記の整合素子にマウスが移動し、それは指定された最初の機能をトリガする場合。この要素のうち、マウスは、それが2番目に指定された機能を起動しますとき。
行が上のクラスに設定されているときにマウスがテーブル上に置かれた場合//、除外するように設定されています。
$( "TR")ホバー(関数(){
$( "上"これを).addClass();
}、
関数(){
$(この).addClass( "OUT");
});
(2)READY (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" ).unbind(); //すべてのp要素上のすべてのイベントを削除
$( "P")アンバインド( //) "をクリックし、" すべてのp要素にクリックイベントを削除します。

図10に示すように、いくつかの実用的な効果の機能
トグル()とslideToggle()メソッドは、状態の切り替え機能を提供します。
非表示()とshow()メソッドを含むトグル()メソッド。
slideDown()メソッドとslideUpを含むslideToggle()メソッド。

11、いくつかの有用なjQueryのメソッド
の$ .browserブラウザの種類:ブラウザの種類を検出します。効果的なパラメータ:サファリ、オペラ、MSIE、Mozillaの 。このようなすなわち:. $ Browser.isieかどうかを検出するよう、ブラウザつまりtrueを返します。
$ .each(OBJ、FN):一般的なイテレータ機能。反復は、オブジェクトと(代わりに、円形の)配列を近似するために使用することができます。$の.each([0,1,2]、機能 (I、N){アラート( "アイテム#" + I + ":" + N);}); と同等:VAR = tempArr [0,1 、2]; のための(VARのI = 0;私は<tempArr.length; Iは++){ アラート( "アイテム#" + I + ":" + tempArrが); } のような、データ処理をJSONできる$ .each({名: "ジョン"、ラング: "JS "}、関数(I、N){アラート( "名:" + I +"値:" + N);}); 結果:名前:名前、値:ジョン名は:langの、値:JS $ .extend(ターゲット、PROP1、propN):一つ以上の他のオブジェクトと、オブジェクトを拡張するには、オブジェクトが展開され返します。これは、達成するために、継承jqueryのです。以下のような:$ .extend(設定、















//設定とオプションをマージし、設定を戻すために結果を結合、設定で結果保存オプションの継承と承継の設定に相当します。
設定.extend $ = VAR({}、デフォルトは、オプション);
//デフォルトを合わせ、オプション、合わせた結果をカバーせずに内容をデフォルトの設定に戻されました。
あなたは、複数のパラメータ(合併とリターンの数)持つことができる
配列マッピング:$ .MAP(アレイ、Fnキーを)。新しい配列を保存する別のアレイ(後処理変換)の項目、および生成された新しい配列を返します。
例えば:
VAR = $ tempArrマップ([0,1,2]、関数(I)4 + I {リターン;}。);.
TempArr含量:[4,5,6]
VAR = $ tempArrマップ([0。 、1,2]、関数(I){私は+ I> 0復帰1:?NULL;});
tempArrコンテンツ:[2,3]
ARR1の$の.merge(ARR2)は2つの配列をマージ、削除重複するアイテム。
このような:. $マージ([0,1,2] 、[2,3,4])// 戻り、[0,1,2,3,4]
$ .trim(STR):空白文字の文字列の両端を削除します。 。
以下のような:;。「こんにちは、どのように? $(「こんにちは、どのようにあなたは?」)トリムあなたは」// 戻ります

12は、jQueryの競合とカスタムメソッドまたは他のライブラリのトラブルシューティング
の要素を取得するには、多くの場合、$(ID)メソッドの私たち自身の定義を、あるいは、プロトタイプなどいくつかの他のJSライブラリもこれらの両方の場合は、$メソッドを定義します内容は一緒変数法に定義衝突が、jQueryのこの専門知識は、この問題を解決するための方法を提供します。
()内jQuery.noConflictのjQueryの使用、変数への方法は、ライブラリまたはカスタム実装その前にまず$方法の弾力制御を$。$のjQueryのすべては、元の基準オブジェクトメソッド$(「#1 MSG」)として、交換することができる限り、jQueryの時間を適用した後のjQuery(「#のMSG」)を置き換えます。
以下のような:
jQuery.noConflict();
// jQueryを使用して起動する
のjQuery( "P-DIV")非表示();.
$を(使用して//他のライブラリを)
。$( "コンテンツ")Style.display = 'なし' ;.

おすすめ

転載: www.cnblogs.com/pink-chen/p/11264978.html