jQuery_jquery に関する 12 の一般的なヒントを共有する

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) とインデックスは dom 要素オブジェクトを返します。 jQuery オブジェクトの場合は jQuery メソッドのみを使用でき、dom オブジェクトの場合は dom メソッドのみを使用できます。たとえば、3 番目の 要素のコンテンツを取得したいとします。以下の 2 つのメソッドがあります。

$("div").eq(2).html() //jQuery オブジェクトのメソッドを呼び出す
$("div").get(2); . innerHTML; // dom メソッド属性を呼び出します

4. 同じ関数が set と get を実装します。これは、主に次のメソッドを含みます。 > $("#msg").html(); //ID msg の要素ノードの HTML コンテンツを返します。
$("#msg").html("
新しいコンテンツ
");
//「新しいコンテンツ」を ID msg In の HTML 文字列として書き込みます要素ノードのコンテンツ、ページには太字の新しいコンテンツが表示されます。
$("#msg").text(); //msg の ID を持つ要素ノードのテキスト コンテンツを返します。 $("#msg").text("新しいコンテンツ
");
//「新しいコンテンツ」をID msg Inの通常のテキスト文字列として書き込みます要素ノードのコンテンツ、ページに表示される
新しいコンテンツ $("#msg").height(); //ID msg$("#msg) の要素の高さを返します" ).height("300"); //id msg の要素の高さを 300 に設定します $("#msg").width(); //id msg の要素の幅を返します
$("#msg").width("300"); //id msg の要素の幅を 300 に設定します
$("input").val("); //フォームを返しますinput box value
$("input").val("test") //フォーム入力ボックスの値をテストに設定します
$("#msg").click(); // id msg 要素のクリック イベントの場合
$("#msg").click(fn); //id の要素のクリック イベントの関数を追加します
同じブラー、フォーカス、 select および submit イベントは 2 つの呼び出しメソッドがあります

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

jQuery によって返されるコレクションのコンテンツについては、自分でループして各オブジェクトを個別に処理する必要はありません。 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())})
//各 p 要素にクリック イベントを追加しました。p 要素をクリックすると、そのコンテンツがポップアップします。

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

$.extend({
min: function(a, b){return a max: function(a , b){return a > b?a:b; }
}); //jQuery の拡張 min メソッドと max メソッドを使用します (「$.method name」を通じて呼び出されます)。 ):
01.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"); // 要素名のクラスを削除 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 がロードされ、クエリと操作の準備ができたときに実行される関数をバインドします。

01.$(document).ready(function(){alert("Load Success")})
02.//ページがロードされると、「Load Success」というメッセージが表示されます。 onload イベントに相当します。 $(fn)

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

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

(4)trigger(eventtype): 一致する各要素で特定のタイプのイベントをトリガーします。例:

01.$("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): 一般的な反復関数。 (ループの代わりに) オブジェクトと配列を近似的に反復するために使用できます。

01.$.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" } などの JSON データも処理できます, function (i, n){ warning( "Name: " i ", Value: " n }); 結果は次のようになります:

Name:name, Value: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) メソッドを自分で定義するか、Putting を使用する場合はプロトタイプなどの他の JS ライブラリでも $ メソッドを定義します。これらの内容が一緒になると変数メソッド定義の競合が発生するため、jQuery はこの問題を解決するための特別なメソッドを提供します。

jQuery で jQuery.noConflict(); メソッドを使用して、変数 $ の制御を、それを実装する最初のライブラリまたは以前にカスタマイズした $ メソッドに移します。後で jQuery を使用する場合は、すべての $ を jQuery に置き換えるだけです。たとえば、元の参照オブジェクト メソッド $("#msg") は jQuery("#msg") に変更されます。例:
jQuery.noConflict();
// jQuery の使用を開始します
jQuery("div p").hide()
// 他のライブラリの $() を使用します
$ ("content").style.display = 'none';
これがお役に立てば幸いです。