jQueryの構文と注意点まとめ_jquery

1. はじめに

1.1. 概要

インターネット上での WEB2.0 や ajax の考え方の急速な発展と普及に伴い、優れた Js フレームワークが次々と登場しています。それらには、Prototype、YUI、jQuery、mootools、Bindows、国産 JSVM フレームワークなどがあり、これらの JS フレームワークを当社のプロジェクトに適用することで、プログラマーは複雑な JS アプリケーションの設計と作成から解放され、実装の詳細ではなく機能要件に集中できます。 、それによってプロジェクトの開発速度が向上します。

jQuery は、プロトタイプに次ぐもう 1 つの優れた 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 はデザイナー、開発者、幸運な人に適しており、商用開発にも適しています。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/ を参照してください。 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 コレクションのアイテムの取得方法

取得した要素コレクションに対して、インデックスで指定されたアイテムを取得するには、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(); // HTML コンテンツを返します。 ID msg の要素ノードの。
$("#msg").html("新しいコンテンツ");
//「新しいコンテンツ」をHTML文字列として書き込みますmsg という ID を持つ要素ノードのコンテンツ、ページには太字の新しいコンテンツが表示されます

$("#msg").text() // という ID を持つ要素ノードのテキスト コンテンツを返します。メッセージ。
$("#msg").text("新しいコンテンツ");
//「新しいコンテンツ」を通常のテキスト文字列として書き込みますID msg の要素ノードのコンテンツを入力すると、ページに 新しいコンテンツ

$("#msg").height(); // 要素の高さを返します。 id msg
$("#msg").height("300"); // id msg の要素の高さを 300 に設定します
$("#msg").width(); Return id 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 つの呼び出しメソッド

を含めることができます。処理関数

jquery によって返されるコレクションの内容については、各オブジェクトをループして個別に処理する必要はありません。jquery は、
を含むコレクションを処理するための非常に便利なメソッドを提供します。 2 つの形式:

6. 必要な関数を展開します

コードをコピーしますコードは次のとおりです:

$.extend({
min: function(a, b){return a < b?a:b; },
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('マウスオーバーイベント')})

。 each(function( i){this.style.color=['#f00','#0f0','#00f'][i]});



8.操作要素の

主に次のメソッドが含まれます:

コードをコピー コードは次のとおりです。 $("#msg").css("background"); //要素の背景色を返します

$("#msg").css("background", "#ccc") //設定 要素の背景を灰色に設定します

$("#msg").height(300); //設定幅と高さ
$("#msg ").css({ color: "red", background: "blue" });//名前と値のペアの形式でスタイルを設定します
$(" #msg").addClass("select"); //select という名前のクラスを要素に追加します
$("#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'][i]}) //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 ではページのコンテンツ (画像など) をロードする必要があります。 whileready は、ページの HTML コードがダウンロードされている限りトリガーされます。 $(fn)

に相当 (3) toggle(evenFn,oddFn): クリックするたびに呼び出される関数を切り替えます。一致する要素をクリックすると、指定された最初の関数がトリガーされ、同じ要素が再度クリックされると、指定された 2 番目の関数がトリガーされます。後続のクリックごとに、これら 2 つの関数の呼び出しが順番に繰り返されます。

コードをコピー コードは次のとおりです:

//クリックするたびに、ローテーション選択クラス内の名前付き名前を削除します。
$("p").toggle(function(){
$(this).addClass("selected");
},function(){
$(this).removeClass( "selected");
});

(4) トリガー(eventtype): 一致する各要素で特定のタイプのイベントをトリガーします。
例:
$("p").trigger("click"); //すべての p 要素のクリック イベントをトリガーします

(5) binding(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("アイテム番号" i ": "
}

$.each( { name: "John", lang: "JS" }, function(i, n){alert( "Name: " i ", Value などの 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 を使用します。表示 = 'なし ';
$("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())})
//各 p 要素にクリック イベントを追加しました。確かに p 要素が使用されている場合、その内容

がポップアップ表示されます