jquery_jquery の使用に関する簡潔なチュートリアル

1. Web ページ要素の選択
jQuery の基本的な設計と主な使用方法は、「Web ページ要素を選択して、それに対して何らかの操作を実行する」ことです。これが他の関数ライブラリと異なる基本的な機能です。
jQuery を使用する最初のステップは、多くの場合、コンストラクター jQuery() ($ と略されます) に選択式を入力し、選択された要素を取得することです。

選択式は CSS セレクターにすることができます:

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

$(document)//ドキュメント オブジェクト全体を選択します
$('#myId')//ID myId を持つ Web ページ要素を選択します
$('div.myClass')//選択クラス myClass の div 要素
$('input[name=first]')//name 属性が first と等しい input 要素を選択します

は jQuery 固有の式にすることもできます:

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

$('a:first')// Web ページの最初の要素を選択します
$(' tr:odd')//テーブルの奇数行を選択します
$('#myForm :input')// フォームの入力要素を選択します
$('div:visible') //可視の div 要素を選択します
$('div:gt(2)')//最初の 3 つを除くすべての div 要素を選択します
$('div:animated') //現在アニメーション状態にある div 要素を選択します

2. 結果セットを変更します
複数の要素が選択されている場合、jQuery は結果セットを絞り込むためのフィルターを提供します:

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

$('div').has('p') ; // p 要素を含む div 要素を選択します
$(' div').not('.myClass') // クラスが myClass と等しくない div 要素を選択します
$('div'); .filter('.myClass'); //クラスが myClass と等しい div 要素を選択します
$('div').first() //最初の div 要素を選択します
$('div'); .eq(5); // 6 番目の div 要素を選択します

場合によっては、結果セットから開始して近くの関連要素に移動する必要があります:

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

$('div').next('p') ; // div 要素の後の最初の p 要素を選択します
$(' div').parent() // div 要素の親要素を選択します
$('div').closest('form '); // div に最も近いフォームの親要素を選択します
$(' div').children() // div のすべての子要素を選択します
$('div').siblings(); // div の兄弟要素を選択します

3. チェーン操作
Web ページ要素を選択した後、その要素に対して特定の操作を実行できます。
jQuery を使用すると、すべての操作を相互に接続し、次のようなチェーンの形式で記述することができます。

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

$('div').find('h3').eq(2).html('Hello');

解凍できますこのように、つまり次のとおりです:

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

$('div')// div 要素を検索
.find('h3')// h3 要素を選択
.eq(2)// 3 番目の h3 要素を選択
.html( 'Hello'); // 選択すると内容が Hello

に変更されます。これは jQuery の最も優れた便利な機能です。その原理は、各 jQuery オペレーションが jQuery オブジェクトを返すため、異なるオペレーションを結合できるということです。

jQuery には .end() メソッドも用意されており、結果セットを一歩後退させることができます:

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

$('div')
.find('h3')
.eq(2)
.html('Hello')
.end()/ /すべての h3 要素を選択するステップに戻ります
.eq(0)//最初の h3 要素を選択します
.html('World') //その内容を World に変更します

4. 要素の操作: 値の取得と割り当て
Web ページの要素を操作する場合、最も一般的な要件は、その値を取得するか、値を割り当てることです。
jQuery は同じ関数を使用して値 (ゲッター) と代入 (セッター) を完了します。 値を取得するか、値を割り当てるかは、関数のパラメーターによって決まります。
$('h1').html(); //html() にはパラメータがありません。これは、h1 の値を取り出すことを意味します $('h1').html('Hello'); Hello というパラメーターがあります。h1 に値を代入することを示します。
共通の値と代入関数は次のとおりです:

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

.html() HTML コンテンツの取得または設定
.text() テキスト コンテンツの取得または設定
.attr() の値の取得または設定属性
.width() 要素の幅を取得または設定します
.height() 要素の高さを取得または設定します
.val() フォーム要素の値を取得します

結果セットに複数の要素が含まれている場合、値を割り当てるときにすべての要素が割り当てられ、最初の要素の値のみが取り出されることに注意してください。 .text()、すべての要素のテキスト コンテンツを取り出します)。
5. 要素の操作: 移動
選択した要素を移動するには、要素を直接移動する方法と、他の要素を移動する方法があります。 target 要素 目的の場所に到達します。

div 要素を選択し、それを p 要素の後ろに移動する必要があるとします。

最初の方法は、.insertAfter() を使用して div 要素を p 要素の後ろに移動することです:

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

$('div').insertAfter('p');

2 番目の方法は、.after() を使用して p 要素を追加することです。 div 要素の前:

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

$('p').after('div' );

表面的には、これら 2 つの方法の効果は同じですが、唯一の違いは操作の観点が異なるように見えます。しかし実際には、それらには大きな違いがあります。つまり、返される要素が異なります。最初のメソッドは div 要素を返し、2 番目のメソッドは p 要素を返します。ニーズに応じて使用する方法を選択できます。

この操作モードを使用すると、

の 4 つのペアが存在します。 コードをコピーします コードは次のとおりです:

.insertAfter() および .after(): 既存の要素の外側の後ろから要素を挿入します。
.insertBefore() および .before(): 既存の要素
の外側の前から要素を挿入します。および .append(): 既存の要素の内側に要素を後ろから挿入します
.prependTo() および .prepend(): 既存の要素の内側に前から要素を挿入します

6. 要素の操作: コピー、削除、作成

.clone() を使用して要素をコピーします。
要素を削除するには、.remove() と .detach() を使用します。 2 つの違いは、前者は削除された要素のイベントを保持しないのに対し、後者は保持するため、ドキュメントを再挿入するときに使用すると便利です。

要素の内容をクリアするには (要素の削除ではありません)、.empty() を使用します。

新しい要素を作成する方法は非常に簡単です。新しい要素を jQuery コンストラクターに直接渡すだけです:

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

$('
Hello

');
$('
新しいリスト項目
');
$('ul').append('
リスト項目
'); >

7. ユーティリティ メソッド
jQuery は、選択した要素を操作するだけでなく、要素を選択せず​​に直接使用できるいくつかのツール メソッド (ユーティリティ) も提供します。 JavaScript 言語の継承原理を理解すれば、ツールのメソッドの本質を理解できます。 jQueryコンストラクタ上に定義されたメソッド、つまりjQuery.method()なので、そのまま利用できます。これらの要素を操作するメソッドは、コンストラクターのプロトタイプ オブジェクトに定義されたメソッド、つまり jQuery.prototype.method() であるため、使用する前にインスタンスを生成する (つまり、要素を選択する) 必要があります。この違いを理解していなくても、ツールメソッドはネイティブ JavaScript 関数と同様に直接使用できるメソッドとして理解するだけで大​​きな問題はありません。
一般的に使用されるツールのメソッドは次のとおりです:

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

$.trim() は文字列の両端のスペースを削除します。
$.each() は配列またはオブジェクトを走査します。
$.inArray() は、配列内の値のインデックス位置を返します。値が配列にない場合は、-1 が返されます。
$.grep() は、特定の基準を満たす配列内の要素を返します。
$.extend() 複数のオブジェクトを最初のオブジェクトにマージします。
$.makeArray() オブジェクトを配列に変換します。
$.type() はオブジェクトのタイプ (関数オブジェクト、日付オブジェクト、配列オブジェクト、通常のオブジェクトなど) を決定します。
$.isArray() は、パラメーターが配列であるかどうかを判断します。
$.isEmptyObject() は、オブジェクトが空である (属性が含まれていない) かどうかを判断します。
$.isFunction() はパラメータが関数かどうかを判断します。
$.isPlainObject() は、パラメータが「{}」または「new Object」で作成されたオブジェクトであるかどうかを判断します。
$.support() ブラウザが特定の機能をサポートしているかどうかを判断します。

8. イベント操作
jQuery はイベントを Web ページ要素にバインドできます。さまざまなイベントに応じて、対応する機能を実行します。

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

$('p').click( function() {
alert('Hello');
});

現在、jQuery は主に次のイベントをサポートしています:

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

.blur() フォーム要素はフォーカスを失います。
.change() フォーム要素の値が変更されます
.click() マウスクリック
.dblclick() マウスダブルクリック
.focus() フォーム要素はフォーカス
を取得します。 focusin() 子要素がフォーカスを取得します
.focusout() 子要素がフォーカスを失います
.hover() 同時に、mouseenter および Mouseleave イベントのハンドラ関数を指定します
.keydown() キーボードを押します(キーを長押しすると、1 つのイベントのみが返されます)
.keypress() キーボードを押します (キーを長押しすると、複数のイベントが返されます)
.keyup() キーボードを放します
。 load() 要素がロードされます
.mousedown() マウスを押します
.mouseenter() マウスが入ります (子要素に入ったときにトリガーされません)
.mouseleave() マウスが離れる (子要素に入るときはトリガーされません)
.mousemove() マウスが要素
内で移動します。 Mouseout() マウスが離れる (子要素から離れるときにトリガー)
.mouseover() マウスが入る (子要素に入るときにトリガー)
.mouseup() マウスを放します
.ready() DOM ロード完了
.resize() ブラウザウィンドウのサイズが変更されます
.scroll() スクロールバーの位置が変更されます
select() ユーザーはテキスト ボックスの内容を選択します
.submit() ユーザーはフォームを送信します
.toggle() マウスのクリック数に応じて複数の関数を順番に実行します
.unload()ユーザーがページを離れます

上記のイベントはすべて、jQuery 内の .bind() の便利な方法です。同じ関数を複数のイベントにバインドするなど、イベントをより柔軟に制御するには .bind() を使用します。

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

$('input').bind('click change', //クリックと変更イベントを同時にバインドする
function(){
alert('Hello' );
}
);

イベントを 1 回だけ実行したい場合は、.one() メソッドを使用できます。

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

$("p").one( "click" , function(){
alert("Hello"); //一度だけ実行され、それ以降のクリックは実行されません
});

.unbind() はバインドを解除するために使用されます。イベント。

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

$('p').unbind( 'click' );

すべてのイベント処理関数は、次の例の e など、イベント オブジェクトをパラメータとして受け入れることができます:

Copy Code コードは次のとおりです:

$("p").click(function(e){
alert(e.type); //" 「
});

をクリックしてください
このイベント オブジェクトには、いくつかの便利なプロパティとメソッドがあります:

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

event.pageX イベント発生時のマウスと Web ページの左上隅の間の水平距離
event.pageY イベント発生時のマウスと Web ページの左上隅の間の垂直距離Web ページ
event.type イベントのタイプ (クリックなど)
event.what どのキーが押されたか
event.data イベント オブジェクトにデータをバインドし、イベント ハンドラー関数に渡します
event.target イベントの対象となる Web 要素
event.preventDefault() イベントのデフォルト動作をブロックします (たとえば、リンクをクリックすると新しいページが自動的に開きます)
event.stopPropagation() イベントを停止します泡立ちから上位要素まで

イベント処理関数では、this キーワードを使用して、イベントの対象となる DOM 要素を返すことができます:

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

$('a').click(function(){
if ($(this).attr('href').match('evil ')){// 有害なリンクであることが確認された場合
e.preventDefault(); // 開かないようにする
$(this).addClass('evil'); // 有害なクラスを追加します
}
}) ;

イベントを自動的にトリガーするには 2 つの方法があります。 1 つはイベント関数を直接使用する方法、もう 1 つは .trigger() または .triggerHandler() を使用する方法です。

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

$('a').click( );
$('a').trigger('click');

9. 特殊効果
jQuery を使用すると、オブジェクトに特定の特殊効果を表示できます。

$('h1').show(); // h1 タイトルを表示
一般的に使用される特殊効果は次のとおりです:

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

.fadeIn() フェードイン
.fadeOut() フェードアウト
.fadeTo() 透明度を調整
。 Hide() 要素を非表示
.show() 要素を表示
.slideDown() 下に展開
.slideUp() ロールアップ
.slideToggle() 要素を順番に展開またはロールアップ
.toggle() 要素を順番に表示または非表示にします

.show() と .hide() を除き、他のすべての特殊効果のデフォルトの実行時間は 400ms (ミリ秒) ですが、変更できます。この設定。

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

$('h1').fadeIn( 300); // 300 ミリ秒以内にフェードインします
$('h1').fadeOut('slow') // ゆっくりフェードアウトします

特殊効果終了後に実行する機能を指定できます。

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

$('p').fadeOut( 300、関数 (){$(this).remove() });

より複雑な特殊効果は、.animate() を使用してカスタマイズできます。

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

$('div').animate(
{
left : " =50", // 右に移動し続けます
opacity : 0.2 // 透明度を指定
},
300, // 期間
function(){alert (' 完了!'); }//コールバック関数
);

.stop() と .lay() は、特殊効果の実行を停止または遅延するために使用されます。
$.fx.off true に設定すると、すべての Web ページの効果がオフになります。