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 ページへのインタラクション。
次のような特徴があります:
簡潔なコード、理解しやすいセマンティクス、迅速な学習、豊富なドキュメント。
jQuery は軽量のスクリプトであり、最新バージョンの JavaScript パッケージのコードはわずか約 20K です。
jQuery は、CSS1 ～ CSS3 と基本的な xPath をサポートしています。
jQuery はクロスブラウザーであり、サポートされるブラウザーには IE 6.0、FF 1.5、Safari 2.0、Opera 9.0 が含まれます。
jQuery の他の関数を拡張するのは簡単です。
JS コードと HTML コードを完全に分離できるため、コーディング、保守、変更が容易になります。
プラグインは豊富で、jQuery 自体が提供するいくつかの特殊効果に加えて、フォーム検証、タブ ナビゲーション、ドラッグ アンド ドロップ効果、テーブルの並べ替え、DataGrid、ツリーメニュー、画像特殊効果、Ajaxアップロードなど。
jQuery の設計により、JavaScript コードの記述方法が変わり、JS を使用して Web ページを操作する方法を学習する複雑さが軽減され、JS の初心者でも上級専門家でも、Web JS 開発の効率が向上します。があなたの第一選択になります。
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 では、(インデックスで指定された) 項目の 1 つを取得するには、 eq メソッドまたは get(n) メソッド、またはインデックス番号を使用できます。 eq は jquery オブジェクトを返し、 get(n) と Index は dom 要素オブジェクトを返すことに注意してください。 。 jquery オブジェクトの場合は jquery メソッドのみを使用でき、dom オブジェクトの場合は dom メソッドのみを使用できます。たとえば、3 番目の
要素の内容を取得したいとします。 2 つの方法があります:
$("div").eq(2).html(); //jquery オブジェクトのメソッドを呼び出します
$("div").get(2).innerHTML; // dom
4 のメソッド属性。同じ関数が set および get
を実装します。これは、主に次のような Jquery の多くのメソッドに当てはまります。 🎜>
$("#msg").html( ); //ID msg の要素ノードの HTML コンテンツを返します。
$("#msg").html("新しいコンテンツ");
//「新しいコンテンツ」をHTML文字列として書き込みますmsg という ID を持つ要素ノードのコンテンツ、ページには太字の新しいコンテンツが表示されます。
$("#msg").text(); // msg という ID を持つ要素ノードのテキスト コンテンツを返します。
$("#msg").text("新しいコンテンツ");
//「新しいコンテンツ」を通常のテキスト文字列として書き込みますID msg の要素ノードのコンテンツを入力すると、ページに 新しいコンテンツ
$("#msg").height(); //ID msg の要素の高さを返します
$("#msg").height("300"); //ID msg の要素の高さを 300 に設定します
$("#msg").width(); //要素を返しますwith id msg 要素の幅
$("#msg").width("300"); //id msg の要素の幅を 300 に設定します
$("input").val ("); / /フォーム入力ボックスの値を返します
$("input").val("test"); //フォーム入力ボックスの値をテストに設定します
$("# msg").click( ); //id の要素のクリック イベントをトリガーする msg
$("#msg").click(fn); //id の要素のクリック イベントの関数を追加msg
同様に、blur、focus、select、submit イベントにもこれら 2 つの呼び出しメソッドを含めることができます
5. コレクション処理関数
によって返されるコレクション コンテンツの場合jquery では、自分でループして各オブジェクトを処理する必要はありません。jquery には、コレクションを処理するための非常に便利なメソッドが用意されています。
コードをコピーします
コードは次のとおりです: $("p").each(function(i){this.style. color=['#f00','#0f0','# 00f']}) //インデックス 0、1、2 の p 要素にそれぞれ異なるフォントの色を設定します。
$("tr. ").each(function(i){this.style. .backgroundColor=['#ccc','#fff'][i%2]})
//テーブルのインターレース色の変更効果を実現します
$("p").click(function(){alert ($(this).html())})
//各 p 要素をクリックすると、そのコンテンツがポップアップ表示されます。
6 、必要な関数を拡張します
コードをコピー
コード $.extend ({ min: function(a, b){return a < b?a:b; },
max: function(a , b){return a > b?a:b; }
}) // jquery の拡張 min メソッドと max メソッドを使用します (「$.method」を通じて呼び出されます)。 name"):
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']});
8.要素 のスタイルには主に次のメソッドが含まれます:
コードをコピー コードは次のとおりです:
$("#msg").removeClass("select"); //select という名前のクラスを要素から削除します
$("#msg").toggleClass(" select"); // 存在する(存在しない)場合は、select
という名前のクラスを削除(追加)します。
9. 完全なイベント処理関数
Jquery は、HTML 要素に直接イベントを記述する必要がなく、jquery を通じて取得したオブジェクトを直接処理することができます。イベント。
例:
$("#msg").click(function(){alert("good")}) //要素
$("p") にクリック イベントを追加しました。 click (function(i){this.style.color=['#f00','#0f0','#00f']}) //3 つの異なる p 要素のクリック イベントに異なる処理を設定します
いくつかのカスタム イベントjQuery:
(1)hover(fn1,fn2): ホバーイベント (マウスがオブジェクト上を移動し、オブジェクトの外に移動する) を模倣するメソッド。マウスが一致する要素上に移動すると、最初に指定された関数がトリガーされます。マウスがこの要素の外に出ると、指定された 2 番目の関数がトリガーされます。
//テーブルの列にマウスを置くと、クラスをオーバーに設定し、離れるときにクラスをアウトに設定します。
$("tr").hover(function(){
$(this).addClass("over");
},
function(){
$(this) .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) binding(eventtype,fn), unbind(eventtype) :event バインドとバインド解除
は、一致する各要素からバインドされたイベントを削除 (追加) します。
例:
$("p").bind("click", function(){alert($(this).text());});
// 各 p 要素についてクリックイベントを追加
$("p").unbind(); //すべての p 要素のすべてのイベントを削除
$("p").unbind("click") //すべての p 要素を削除on
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;i
alert("Item #" i ": " tempArr);
}
は、
$.each( { name: "John", lang: "JS" }, function(i, n){alert( "Name: " i など) のような json データを処理することもできます。 ", 値 : " 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(" こんにちは、お元気ですか? "); // "こんにちは、お元気ですか? "
12. カスタム メソッドを解決します。クラス ライブラリと jQuery の間の競合
多くの場合、要素を取得するために $(id) メソッドを自分で定義するか、プロトタイプなどの他の JS ライブラリでも $method を定義します。これらの内容を同じにすると、同時に変数メソッド定義の競合が発生するため、Jquery はこの問題を解決するメソッドを特別に提供します。
jquery の jQuery.noConflict(); メソッドを使用して、変数 $ の制御を、それを実装する最初のライブラリまたは以前にカスタマイズした $ メソッドに移します。後で Jquery を使用する場合は、すべての $ を jQuery に置き換えるだけです。たとえば、元の参照オブジェクト メソッド $("#msg") は jQuery("#msg") に変更されます。
例:
jQuery.noConflict ();
// jQuery の使用を開始します
jQuery("div p").hide();
// 他のライブラリの $()
$("content").style を使用します。表示 = 'なし';
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
