jQueryスキル集(初心者入門)_jquery

1. はじめに

1.1. 概要
インターネット上での WEB2.0 や ajax のアイデアの急速な発展と普及により、いくつかの優れた Js フレームワークが次々に登場しています。有名なものとしては、Prototype、YUI、jQuery、mootools、Bindows、国産 JSVM フレームワークなどがあります。これらの JS フレームワークをプロジェクトに適用することで、プログラマは複雑な JS アプリケーションの設計や作成から解放され、機能要件に意識を向けることができます。実装の詳細ではなく、それによってプロジェクトの開発速度が向上します。
jQuery は、プロトタイプに次ぐ優れた Javascript フレームワークです。 2006 年初頭に John Resig によって作成され、JavaScript™ と Ajax プログラミングを簡素化するのに役立ちます。プロトタイプと jQuery を比較するためにこの比喩を使用する人もいます。プロトタイプは Java に似ており、jQuery は Ruby に似ています。これは、ドキュメントの操作、イベントの処理、特殊効果の実装、Ajax の追加を簡単に行うことができる、シンプルで高速かつ柔軟な JavaScript フレームワークです。 Web ページへのインタラクション。

次のような特徴があります:
1. 簡潔なコード、理解しやすいセマンティクス、迅速な学習、豊富なドキュメント。
2. jQuery は軽量のスクリプトであり、JavaScript パッケージの最新バージョンはわずか 20K です。
3. jQuery は CSS1 ～ CSS3 と基本的な xPath をサポートします。
4. jQuery はクロスブラウザーであり、サポートされるブラウザーには IE 6.0、FF 1.5、Safari 2.0、Opera 9.0 が含まれます。
5. jQuery の他の機能を拡張するのは簡単です。
6. JS コードと HTML コードを完全に分離できるため、コーディング、保守、変更が容易になります。
7. プラグインは豊富で、jQuery 自体が提供するいくつかの特殊効果に加えて、フォーム検証、タブ ナビゲーション、ドラッグ アンド ドロップ効果、テーブルの並べ替えなど、より多くの機能をプラグインによって実装できます。 DataGrid、ツリーメニュー、画像特殊効果、Ajaxアップロードなど。

jQuery の設計により、JavaScript コードの記述方法が変わり、JS を使用して Web ページを操作する方法を学習する複雑さが軽減され、JS の初心者でも上級者でも Web JS 開発の効率が向上します。専門家にとって、jQuery が最適な選択です。最初の選択肢です。
jQuery はデザイナー、開発者、幸運な人に適しており、商用開発にも適しています。jQuery はあらゆる JavaScript アプリケーションに適しており、さまざまな Web アプリケーションで使用できます。
公式サイト: http://jquery.com/ 中国語サイト: http://jquery.org.cn/

1.2. 目的
このドキュメントを学習することで、jQuery を簡単に理解し、JQuery と他の JS フレームワークの違いを理解し、一般的な構文と使用法を習得できます。 jQuery のヒントと注意事項。

2. 使い方
JQueryが必要なページにJQueryのjsファイルを導入するだけです。
例:

が導入された後は、jQuery によって提供される構文をページ上のどこでも使用できるようになります。
3. 学習チュートリアルと参考資料
「jQuery 中国語 API マニュアル」および http://jquery.org.cn/visual を参照してください。 /cn /index.xml

2 つの優れた jQuery チュートリアルをお勧めします:「jQuery の開始チュートリアル」と「jQuery を使用した Ajax 開発の簡素化」(注: 上記のドキュメントは にあります) [添付]
中)
4. 構文の概要と注意事項

1. ページ要素に関する参照

jquery の $() を介した要素の参照には、id、クラス、要素名、要素の階層関係、dom または xpath 条件などのメソッドが含まれます。返されるオブジェクトは jquery オブジェクト (コレクション オブジェクト) であり、dom はできません。直接定義されたメソッドを呼び出すことができます。
2. jQuery オブジェクトと dom オブジェクト間の変換

jquery で定義されたメソッドを使用できるのは jquery オブジェクトのみです。 dom オブジェクトと jquery オブジェクトには違いがあることに注意してください。メソッドを呼び出すときは、dom オブジェクトと jquery オブジェクトのどちらを操作しているかに注意する必要があります。
通常の dom オブジェクトは、通常 $() を通じて jquery オブジェクトに変換できます。
例: $(document.getElementById("msg")) は jquery オブジェクトであり、jquery メソッドを使用できます。
jquery オブジェクト自体がコレクションであるためです。したがって、jquery オブジェクトを dom オブジェクトに変換する場合は、項目の 1 つを取得する必要があります。これは通常、インデックスを通じて取得できます。
例: $("#msg")[0]、$("div").eq(1)[0]、$("div").get()[1]、$("td " )[5] これらは dom オブジェクトです。dom 内のメソッドを使用できますが、Jquery メソッドは使用できなくなりました。
次の記述方法は正しいです:
$("#msg").html();
$("#msg")[0].innerHTML;
$("# msg" ).eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;
3. jQuery で特定の項目を取得する方法collection item
取得した要素のセットについて、eq または get(n) メソッド、またはインデックスを使用して項目 (インデックスで指定) を取得できます。 eq は jquery オブジェクトを返しますが、get(n) と Index は dom 要素オブジェクト

を返すことに注意してください。 jquery オブジェクトの場合は jquery メソッドのみを使用でき、dom オブジェクトの場合は dom メソッドのみを使用できます。たとえば、3 番目の 要素の内容を取得する場合です。次の2つの方法があります。
$（ "div"）関数は set と get を実装します

これは、主に次のような Jquery の多くのメソッドに当てはまります。
$(" #msg").html(); //要素ノードの HTML コンテンツを返します。 ID メッセージ付き。 $("#msg").html("新しいコンテンツ
");
//「
新しいコンテンツ」を ID msg In の HTML 文字列として書き込みます要素ノードのコンテンツ、ページには太字の新しいコンテンツが表示されます
$("#msg").text(); //ID msg の要素ノードのテキスト コンテンツを返します。 $("#msg").text("新しいコンテンツ
");
//「
新しいコンテンツ」をID msg Inの通常のテキスト文字列として書き込みます要素のコンテンツは、新しいコンテンツを表示しますid msg の要素の高さを 300$("#msg").width(); //id msg の要素の幅を返します
$("#msg").width(" 300"); //id msg の要素の幅を 300 に設定します$("input").val("); // /フォーム入力ボックスの値を返します$ ("input").val("test"); //フォーム入力ボックスの値を test
$("#msg") .click(); // のクリックイベントをトリガーします。 id msg
$("#msg").click(fn) の要素 //id msg
の要素のクリック イベントの関数を追加します。同様に、ブラー、フォーカス、選択、および送信イベントを実行できます。すべてに 2 つの呼び出しメソッドがあります


5. コレクション処理関数

jquery によって返されるコレクションのコンテンツについては、自分でループしてそれぞれを処理する必要はありません。オブジェクトは個別に処理されます。
には、次の 2 つの形式が含まれています。
$("p").each(function(i){this.style.color. =['#f00 ','#0f0','#00f'][i]})
//インデックス 0、1、2 の p 要素にそれぞれ異なるフォントの色を設定します。

$("tr. ").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})
//テーブル内の行を交互に変更する色の変更効果$("p").click(function(){alert($(this).html())})コンテンツがポップアップ表示されます


6必要な関数を拡張します

$.extend({
min: function(a, b){return a max: function(a, b ){return a > b?a:b; }
}); //jquery の拡張 min メソッドと max メソッド
拡張メソッドを使用します (「$.メソッド名」で呼び出されます):
alert( "a=10,b=20,max=" $.max(10,20) ",min=" $.min(10,20));

7. メソッドの連結をサポートします。 🎜>いわゆる連結とは、jquery オブジェクトでさまざまなメソッドを連続的に呼び出すことができることを意味します。
例:
$("p").click(function(){alert($(this).html())}).mouseover(function(){alert('mouse overイベント ')})
.each(function(i){this.style.color=['#f00','#0f0','#00f'][i]});


8. 要素のスタイルを操作する
には主に次のメソッドが含まれます: $("#msg").css("background") ("#msg").css(" background","#ccc") //要素の背景をグレーに設定します
$("#msg").height(300); $("#msg").width("200"); / /幅と高さを設定します
$("#msg").css({ color: "red", background: "blue" });//名前と値のペアの形式で設定します スタイルを定義します
$("#msg").addClass("select"); // select という名前のクラスを要素に追加します
$("#msg").removeClass("select"); // 要素が属するクラスを削除しますname is select
$("#msg").toggleClass("select"); // 存在する (存在しない) 場合は、名前が select

9. 完全なイベント処理関数 Jquery は、HTML 要素に直接イベントを記述する必要がなく、jquery を通じて取得したオブジェクトに直接イベントを追加することができます。
例:
$("#msg").click(function(){alert("good")}) //クリック イベントを要素に追加します
$("p")。 click (function(i){this.style.color=['#f00','#0f0','#00f'][i]})
// 3 つの異なる p 要素のクリック イベントをそれぞれ設定します 異なる処理

jQuery のいくつかのカスタム イベント:

(1)
hover(fn1,fn2):
シミュレートされたホバー イベント (マウスはオブジェクト内外のメソッドに移動します) 。マウスが一致する要素上に移動すると、最初に指定された関数がトリガーされます。マウスがこの要素の外に出ると、指定された 2 番目の関数がトリガーされます。
//テーブルの列にマウスを置くと、クラスをオーバーに設定し、離れるときにクラスをアウトに設定します。
$("tr").hover(function(){
$(this).addClass("over");
},
.addClass("out");
});
(2)
ready(fn):DOM がロードされ、クエリと操作の準備ができたときに実行される関数をバインドします。 $(document).ready(function(){alert("Load Success")})
//ページがロードされると、「Load Success」というプロンプトが表示されます。onload イベントとは異なり、onload では次のことが必要です。ページのコンテンツ (画像など) が読み込まれており、ページの HTML コードがダウンロードされるとすぐに準備完了がトリガーされます。 $(fn)
(3)
toggle(evenFn,oddFn) と同等: クリックされるたびに呼び出される関数を切り替えます。一致する要素をクリックすると、指定された最初の関数がトリガーされ、同じ要素が再度クリックされると、指定された 2 番目の関数がトリガーされます。後続のクリックごとに、これら 2 つの関数の呼び出しが順番に繰り返されます。 //クリックするたびに、選択した名前のクラスをローテーションで追加および削除します。
$("p").toggle(function(){
$(this).addClass("selected");
},function(){
$(this).removeClass( "selected");
});
(4)
trigger(eventtype): 一致する各要素で特定のタイプのイベントをトリガーします。 例:
$("p").trigger("click"); //すべての p 要素のクリック イベントをトリガーします
(5)
bind(eventtype,fn), unbind( eventtype ): イベントのバインドとバインド解除 一致する各要素からバインドされたイベントを削除 (追加) します。
例:
$("p").bind("click", function(){alert($(this).text());}); //各 p 要素のイベントにクリックを追加します。
$("p").unbind(); //すべての p 要素上のすべてのイベントを削除します
$("p").unbind("click") //すべての p 要素上のすべての単一イベントを削除しますイベント


10. いくつかの実用的な特殊効果関数 その中で、toggle() メソッドと slidetoggle() メソッドは状態切り替え関数を提供します。
たとえば、toggle() メソッドには Hide() メソッドと show() メソッドが含まれます。
slideToggle() メソッドには、slideDown() メソッドと slideUp メソッドが含まれます。


11. いくつかの便利な jQuery メソッド
$.browser。ブラウザの種類: ブラウザの種類を検出します。有効なパラメータ: safari、opera、msie、mozilla。たとえば、IE: $.browser.isie であるかどうかを確認すると、IE ブラウザであれば true が返されます。
$.each(obj, fn): 一般的な反復関数。 (ループの代わりに) オブジェクトと配列を近似的に反復するために使用できます。 たとえば、
$.each( [0,1,2], function(i, n){alert( "Item #" i ": " n ); }); と同等です。 :
var tempArr=[0,1,2];
for(var i=0;ialert("Item #" i ": " tempArr[i ]) ;
} は、
$.each( { name: "John", lang: "JS" }, function(i, n){alert( "Name : " i "、値: " n ); });
結果は次のようになります:
名前:name、値:John
名前:lang、値:JS

$.extend (target,prop1 ,propN):
1 つ以上の他のオブジェクトでオブジェクトを拡張し、拡張されたオブジェクトを返します。これはjqueryで実装された継承メソッドです。 例: $.extend(settings, options);
//設定とオプションをマージし、マージした結果を設定に返します。これは、オプションが設定を継承し、継承した結果を設定に保存するのと同等です。 。
var settings = $.extend({},defaults,options);
//デフォルトとオプションをマージし、デフォルトの内容を上書きせずにマージした結果を設定に戻します。
複数のパラメータを持つことができます (複数の項目を組み合わせて返します)

$.map(array, fn):
配列マッピング。 (変換処理後) 配列内の項目を新しい配列に保存し、結果の新しい配列を返します。 例: var tempArr=$.map( [0,1,2], function(i){ return i 4; });
tempArr の内容は次のとおりです: [4,5, 6]
var tempArr=$.map( [0,1,2], function(i){ return i > 0 ? i 1 : null; });
tempArr の内容: [2,3]

$.merge(arr1,arr2):
2 つの配列をマージし、重複する項目を削除します。 例: $.merge( [0,1,2], [2,3,4] ) //Return [0,1,2,3,4]
$.trim( str ):
文字列の両端の空白文字を削除します。 例: $.trim(" hello, how are you? "); //Return "hello, how are you? "

12. カスタム メソッドまたはその他の問題を解決します。クラス ライブラリ jQuery
と競合する 多くの場合、要素を取得するために $(id) メソッドを自分で定義するか、プロトタイプなどの他の JS ライブラリでもこれらの内容をまとめて $method を定義します。変数メソッド定義の競合が発生するため、Jquery はこの問題を解決するための特別なメソッドを提供します。
jquery の jQuery.noConflict(); メソッドを使用して、変数 $ の制御を、それを実装する最初のライブラリまたは以前にカスタマイズした $ メソッドに移します。後で Jquery を使用する場合は、すべての $ を jQuery に置き換えるだけです。たとえば、元の参照オブジェクト メソッド $("#msg") は jQuery("#msg") に変更されます。
例:
jQuery.noConflict();
// jQuery の使用を開始します
jQuery("div p").hide();
// 他のライブラリの $() を使用します
$("content").style.display = 'none';
添付ファイル