jQueryの構文概要と注意事項

1. ページ要素の参照について
jqueryの$()による要素の参照には、id、class、要素名、要素の階層関係、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]、$("p").eq(1)[0]、$("p").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 つのメソッドがあります:
$("p").eq(2).html(); //jquery オブジェクトのメソッドを呼び出します
$("p").get(2).innerHTML; dom メソッド メソッド属性

4. 同じ関数が set と get を実装します
Jquery の多くのメソッドは次のようなものです:
$("#msg").html(); // 要素ノードを返します。メッセージ HTML コンテンツの ID。
$("#msg").html("new content");
//「new content」を ID msg で HTML 文字列として書き込みます要素ノードのコンテンツ、ページには太字の新しいコンテンツが表示されます

$("#msg").text(); //msg の ID を持つ要素ノードのテキスト コンテンツを返します。
$("#msg").text("new content");
//「new content」を ID msg で書き込みます要素ノードのコンテンツでは、ページに太字の 新しいコンテンツが表示されます

$("#msg").height(); //ID msg の要素の高さを返します
$("# msg").height("300"); //id msg の要素の高さを 300 に設定します
$("#msg").width(); //id msg の要素の幅を返します
$ ( "#msg").width("300"); //id msg の要素の幅を 300 に設定します

$("input").val("); //フォーム入力の値を返しますbox
$("input").val("test") //フォーム入力ボックスの値を test

$("#msg").click(); //要素のクリックをトリガーしますwith id msg Click event
$("#msg").click(fn); //id msg の要素の click イベントに関数を追加します
同様に、blur、focus、select、submit イベントには 2 つの呼び出しがあります。メソッド

5. コレクション処理関数
jquery によって返されるコレクションのコンテンツについては、各オブジェクトを個別にループして処理する必要はありません。jquery は、次の 2 つの形式を含むコレクション
を処理するための非常に便利なメソッドを提供します。 ("p. ").each(function(i){this.style.color=['#f00','#0f0','#00f']})
//インデックス 0、1 を持つ p 要素の場合、 、 2 それぞれ異なるフォントの色を設定します

$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})

// テーブルのインターレース色の変更の効果を実現します

$("p").click(function(){.html())})

//各 p 要素にクリック イベントを追加しました。p 要素をクリックすると、その内容をポップアップします

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

$.extend({
min: function(a, b){return a < b?a:b; },
max: function(a, b) {return a > $.min(10,20));

7. メソッドの連続書き込みをサポート
いわゆる連続書き込みとは、jquery オブジェクト上でさまざまなメソッドを連続的に呼び出すことができることを意味します。
例:

$("p").click(function(){.html())})

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

8. 要素のスタイルの操作
には主に次のメソッドが含まれます:
$("#msg").css("background") //要素の背景色を返します
$("#msg").css ("background","#ccc") //要素の背景をグレーに設定します
$("#msg").height(300); $("#msg").width("200"); /幅を High に設定します
$("#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(){}) //要素にクリックイベントを追加します
$("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(){})
//ページがロードされると、「Load Success」というプロンプトが表示されます。これは onload イベントに相当します。 $(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): イベントのバインドとアンバインドを決定します
バインドされたイベントを一致する各要素から削除 (追加) します。
例:
$("p").bind("click", function(){.text());}); //各 p 要素にクリック イベントを追加します
$("p").unbind (); //すべての p 要素のすべてのイベントを削除します
$("p").unbind("click") //すべての p 要素のすべてのクリック イベントを削除します

10. いくつかの実用的な特殊効果関数
) および 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){ ; });
は次と同等です:
var tempArr=[0,1,2];
for(var i =0 ;i;
}
は、
$.each( { name: "John", lang: "JS" }, function(i, n) などの json データを処理することもできます{ ; } );
結果は次のようになります:
Name:name、Value:John
Name:lang、Value: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) メソッドを使用して要素を取得したり、prototype などの他の JS ライブラリでも $ メソッドを定義したりする場合、Jquery が提供する変数メソッドの定義が競合します。この問題を解決するために使用される特別な方法。
jquery の jQuery.noConflict(); メソッドを使用して、変数 $ の制御を、それを実装する最初のライブラリまたは以前にカスタマイズした $ メソッドに移します。後で Jquery を使用する場合は、すべての $ を jQuery に置き換えるだけです。たとえば、元の参照オブジェクト メソッド $("#msg") は jQuery("#msg") に変更されます。
例:
jQuery.noConflict();
// jQueryの使用を開始
jQuery("pp").hide();
// 他のライブラリの$()
$("content").style.displayを使用= 'none';

上記は jQuery の構文と注意事項をまとめたものです。その他の関連記事については、PHP 中国語 Web サイト (www.php.cn) に注目してください。