jQueryの一般的な開発手法を詳しくまとめた_jquery

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 によって返されるため、自分でループする必要はありません。また、各オブジェクトは個別に処理されます。
には、

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

$("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]})
//インターレースカラー変更効果を実現するテーブル www.222gs.com
$(“p ”).click(function(){alert($(this).html())})
//各 p にクリック イベントが追加されます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('マウスオーバーイベント')})
.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” });//名前と値のペアの形式でスタイルを設定します www.52mvc.com
$(“#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 イベントに相当します。 $(fn)
に相当 (3) toggle(evenFn,oddFn): クリックするたびに呼び出される関数を切り替えます。一致する要素をクリックすると、指定された最初の関数がトリガーされ、同じ要素が再度クリックされると、指定された 2 番目の関数がトリガーされます。後続のクリックごとに、これら 2 つの関数の呼び出しが順番に繰り返されます。

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

//クリックするたびに、ローテーション選択クラス内の名前付き名前を削除します。
$("p").toggle(function(){
$(this).addClass("selected");
},function(){
$(this).removeClass( "選択済み");
});
(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 要素のすべてのクリック イベントを削除します

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

も可能です)
などの json データを処理します $.each( { name: “John”, lang: “JS” }, function(i, n){alert( “Name: ” i “, Value: ” 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 ライブラリでも $ メソッドを定義します。これらの内容を同時にまとめると、変数は次のようになります。メソッド定義の競合が発生した場合、Jquery はこの問題を解決するための特別なメソッドを提供します。
jquery の jQuery.noConflict(); メソッドを使用して、変数 $ の制御を、それを実装する最初のライブラリまたは以前にカスタマイズした $ メソッドに移します。後で Jquery を使用する場合は、すべての $ を jQuery に置き換えるだけです。たとえば、元の参照オブジェクト メソッド $("#msg") は jQuery("#msg") に変更されます。
例:


コードをコピー

コードは次のとおりです: jQuery.noConflict (); // jQuery の使用を開始します jQuery("div p").hide();

// 他のライブラリの $()

$("content").style を使用します。表示 = 'なし';