jqueryの一般的なメソッドと使用例のまとめ

mouseover()/mouserout()

Mouseover/mouseout イベントは、マウスが要素またはその子孫要素に出入りするときにトリガーされます。
マウスオーバーイベントは、マウスアウトイベントと一緒に使用されることが最もよくあります。

バブリングメカニズムにより、mouseover/mouserout イベントが必要のないときに誤ってトリガーされることが多く、スクリプトの問題が発生します。

mouseenter()/mouseleave()

mouseenter/mouseleave は、マウスが選択された要素に入ったときにのみトリガーされます。マウスが子要素を通過するときはトリガーされません。ターゲット要素に子があるかどうかは関係ありません。

focusin() と focusout()

.focusin(): このイベントは、要素またはそのサブ要素がフォーカスを受け取ったときにトリガーされます
.focusout(): このイベントは、要素またはその子要素がフォーカスを失ったときにトリガーされます

focus() メソッドとは異なり、focusin() メソッドは、子要素がフォーカスを取得したときにもトリガーされます。

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

炎にフォーカス

火災に集中

<スクリプト>
$( "p" ).focusin(function() {
$( this ).find( "span" ).css( "display", "inline" ).fadeOut( 1000 );
});

eq() と get()

.get(): jQuery オブジェクトを通じて対応する DOM 要素を取得します。
.eq(): コレクション

の要素から新しい jQuery オブジェクトを構築します

eq は jQuery オブジェクトを返し、get は DOM オブジェクトを返します。例:

$( "li" ).get( 0 ).css("color", "red"); //エラー
$( "li" ).eq( 0 ).css("color", "red") //修正
では、DOM オブジェクトと jQuery オブジェクトとは何でしょうか?

DOMオブジェクトはjsを利用して取得したオブジェクト、juqeryオブジェクトはjQueryクラスライブラリのセレクタを利用して取得したオブジェクトです。

例: var $obj = $("div");//jQuery オブジェクト

get メソッドは基本的に jQuery オブジェクトを DOM オブジェクトに変換しますが、css は jQuery コンストラクターに属しており、このメソッドは DOM に存在しません。jQuery メソッドを使用する必要がある場合は、次のように記述する必要があります。

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

var li = $("li").get(0);

$(li).css("color","black");//$
で囲む

フィルター()

filter() メソッド: 指定された式に一致する要素のセットをフィルターで除外します。
この方法は、マッチングの範囲を狭めるために使用されます。複数の式はカンマで区切ります。

filter(expression): (String|Function) パラメーターが文字列の場合、jQuery セレクターは、セレクターに一致しないすべての要素をパッケージングセットから削除し、セレクターに一致する要素のみを残すように定式化されます。 ; 引数が関数の場合、フィルタ基準を決定するために使用されます。この関数は、ラッピングセット内の要素ごとに 1 回呼び出されます。関数呼び出しから false を返した要素は、ラッピングセットから削除されます。

次のコードは、最初の要素と要素を選択クラスで保持することを意味します

HTML コード:

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

こんにちは

またこんにちは

またまた

jQuery コード:

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

$("p").filter(".selected, :first")

結果:

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

こんにちは

、

またまた

関数の別の例を見てください。関数はテスト要素のコレクションとして使用されます。これは、jQuery コレクション内の要素のインデックスであるパラメーターインデックスを受け入れます。関数では、これは現在の DOM 要素を指します。

HTML コード:

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

こんにちは

お元気ですか?

jQuery コード:

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

$("p").filter(function(index) {

return $("ol", this).length == 0;

});

結果:

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

お元気ですか?

.bind()、.live()、.delegate() メソッド

.bind(): イベントハンドラーをバインドする最も基本的な方法は、.bind() メソッドを使用することです。これは live() メソッドと同じで、2 つのパラメータを受け入れます:

.bind(イベントタイプ、イベントハンドラー)

イベントハンドラーをバインドする 2 つの方法:

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

$(document).ready(function(){
$('.mydiv').bind('click',test);
関数 test(){

alert("Hello World!");
}
});

以下に示すように、イベントハンドラーは匿名関数を使用することもできます。

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

$(document).ready(function(){

$("#mydiv").bind("click",function(){

alert("￼Hello World!");

})

});

.live(): ライブメソッドとバインドメソッドの唯一の違いは、.live() は DOM に現在存在する要素に作用するだけでなく、DOM に存在する (動的に生成された) 要素にも作用することです。未来

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

$(document).ready(function(){
$('.box').live('click',function(){
$(this).clone().appendTo('.container');
});
});

ライブメソッドを使用してイベントをバインドする欠点は、連鎖呼び出しを使用できないことです。ライブメソッドのようにイベントをバインドできるだけでなく、連鎖呼び出しもサポートするメソッドはありますか?答えは以下のデリゲートメソッドです。

delegate() メソッド: 1 つ以上のイベントハンドラーを指定された要素 (選択された要素の子要素) に追加します。

そして、これらのイベントが発生したときに実行する関数を指定します。 jQuery 1.7 以降、.delegate() は .on() メソッドに置き換えられました。

構文:

$(selector).delegate(childSelector,event type,function)

パラメータの説明:

childSelector が必要です。イベントハンドラーがアタッチされる 1 つ以上の子要素を指定します。

イベントが必要です。要素に付加する 1 つ以上のイベントを指定します。スペースで区切られた複数のイベント値。有効なイベントである必要があります。

関数が必要です。イベントの発生時に実行する関数を指定します。

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

$(document).ready(function(){

$('.container').delegate('.box','click',function(){

$(this).clone().appendTo('.container');

});

});

delegate() は次の 2 つの状況で使用されます:

1. 親要素があり、その子要素にイベントを追加する必要がある場合は、delegate() を使用できます。コードは次のとおりです。

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

$("ul").delegate("li", "click", function(){
$(this).hide();

});

2. 現在のページで要素が使用できない場合は、delegate()

を使用できます。

end() メソッド

end() メソッド: jquery コマンドチェーン内で呼び出され、前のパッケージングセットに戻ります。

各フィルタリングメソッドはスタックにプッシュされます。前の状態に戻る必要がある場合は、end() を使用してポップ操作を実行し、スタック内の前の状態に戻すことができます。

end() メソッドは、現在のチェーン内の最新のフィルター操作を終了し、一致する要素のセットを以前の状態に戻します。

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

<頭>

<スクリプト src="
http://libs.baidu.com/jquery/1.9.0/jquery.js">>

アイテム 1

項目 2

項目 3

上記のコード例では、項目 1 のフォントの色が変更されただけで、背景の色は変更されていないことがわかります。それは

だからです 2 番目の find() メソッドの前の状態は、赤色のフォントでクラス値 2 を持つオブジェクトを返しました。そのため、2 番目の find() は

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

<スクリプトタイプ="text/javascript">

$('ul.one').find(".two").css("color","re​​d").end().find('.three').css("background","blue") ;

を返します。

が既に存在する場合は、指定されたクラス名を追加します。 class name は、指定されたクラス名を要素から削除します。
css(name,value) メソッド: 指定された値を、一致した各要素の指定された CSS スタイル属性に設定します

wrap() および WrapInner()

次のwrap()の例を見てください:
元の div の内容を新しい div のクラスとして使用し、各要素をラップします

HTML コード:

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

こんにちは

さようなら

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

$('.inner').wrap(function() {
return '

';
});

結果:

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

こんにちは

さようなら

次に、wrapInner() の次の例を見てください。

元の div の内容を新しい div のクラスとして使用し、各要素をラップします

HTML コード:

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

こんにちは

さようなら

jQuery コード:

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

$('.inner').wrapInner(function() {
return '

';
});

結果:

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

こんにちは

さようなら

メソッドをデタッチ、空にし、削除します

.detach( [selector ] ): DOM から一致する要素をすべて削除します。要素を削除してすぐにその要素を DOM に挿入する必要がある場合は、detach メソッドを使用する必要があります。

.empty(): このメソッドは、子要素 (および他の子孫要素) を削除するだけでなく、要素内のテキストも削除します。指示によれば、要素内のテキスト文字列は要素の子ノードとみなされます。

.remove( [selector ] ): DOM から要素を削除し、要素

のイベントと jQuery データを削除します。

empty() の例:

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

アイテム 1

項目 2

項目 3

次のremove()の例を見てください:

説明: DOM からすべての段落を削除します

HTML コード:

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

こんにちは

お元気ですか?

jQuery コード:

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

$("p").remove();

結果:

調子はどうですか
val() メソッド

val(): 一致する要素の現在の値を取得します。
説明: テキストボックスの値を取得します

jQuery コード:

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

$("input").val();

jQuery コード:

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

$("input").val("hello world!");

each() と map()

each() メソッドと map() メソッド: それぞれ元の配列を返し、新しい配列を作成しません。 Map メソッドは
を返します。新しいアレイ。マップを不必要に使用すると、メモリが無駄に消費される可能性があります。
各メソッド:

空の配列を定義し、各メソッドを通じて配列に ID 値を追加します。最後に、配列を文字列に変換した後、値をアラートします。

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

$(関数(){

var arr = [];

$(":checkbox").each(function(index){

arr.push(this.id);

});

var str = arr.join(",");

アラート(文字列);

})

マップメソッド:

各 :checkbox; に対して return this.id を実行し、これらの戻り値を jQuery オブジェクトとして自動的に保存し、get メソッドを使用してネイティブ JavaScript 配列に変換し、join メソッドを使用して文字列に変換します。最終的にアラートこの値;

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

$(関数(){

var str = $(":checkbox").map(function() {

return this.id;

}).get().join(); 

アラート(文字列);

})

配列の値が必要な場合は、map メソッドを使用すると非常に便利です。

さらに詳しい説明については、私の別の記事をクリックしてください: jQuery の組み込み関数 map() と each() の使用方法の詳細な説明

$.each()

jQuery の $(selector).each() 関数はループの選択された子要素を走査できますが、jQuery の $.each() 関数はオブジェクトや配列を含む任意のコレクションを走査でき、走査するコレクションとコールバック関数では、コールバック関数は配列の添字とその添字に対応する配列の値を毎回渡します。

$.each(配列,コールバック);

$.each(オブジェクト,コールバック);

配列インスタンス

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

$.each( [ "1", "two", "three" ], function( i, l ){

alert( "インデックス #" i ": " l );

});

コールバック(インデックス, インデックス値)

デモ:

インデックス 0: 1

インデックス 1: 2;
インデックス 2: 3
オブジェクトインスタンス

$.each({ name: "John", lang: "JS" }, function( k, v ) {

alert( "キー: " k "、値: " v );
});
コールバック(キー,値)
デモ:

キー: 名前、値: trigkit4

キー: 年齢、値: 21
.trigger()

説明: 一致する要素にバインドされた指定されたイベントタイプに基づいて、すべてのハンドラーとアクションを実行します。

.on() またはショートカットメソッドを介してバインドされたイベントハンドラーは、対応するイベントが発生するとトリガーされます。ただし、.trigger() メソッド

を使用して手動でトリガーできます。

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

<スクリプトタイプ="text/javascript">
$(document).ready(function(){
$("input").select(function(){
$("input").after("テキストが選択されました!");
})
$("ボタン").click(function(){

$("input").trigger("select");
})
})

.attr() および .prop()

.attr(): 一致した要素セット内の最初の要素の属性の値を取得するか、一致する各要素の 1 つ以上の属性を設定します。

.prop(): 上記と同じ
jQuery 1.6 より前では、.attr() メソッドは特定の属性の値を取得するときにプロパティの値を返すため、一貫性のない結果が発生していました。 jQuery 1.6 以降、.prop() メソッドはプロパティの値を返し、.attr() メソッドは属性の値を返します。

たとえば、selectedIndex、tagName、nodeName、nodeType、ownerDocument、defaultChecked、defaultSelected は、.prop() メソッドを使用して取得または割り当てる必要があります。

それらには対応する属性はなく、プロパティのみがあります。

.after() および .insertAfter()

1.after()

説明:
すべての段落の後に jQuery オブジェクト (DOM 要素の配列に似たもの) を挿入します。

HTML コード:

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

こんにちは

言いたいことがあります:

jQuery コード:

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

$("p").after( $("b") );

結果:

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

言いたいこと:

こんにちは

2.insertAfter()

説明:
すべての段落を要素の後に挿入します。 $("#foo").after("p")

と同じ

HTML コード:

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

言いたいことがあります:

こんにちは

jQuery コード:

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

$("p").insertAfter("#foo");

結果:

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

こんにちは

言いたいことがあります:

.before() および .insertBefore()

3.before()

説明:
すべての段落の前に jQuery オブジェクト (DOM 要素の配列に似たもの) を挿入します。

HTML コード:

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

言いたいこと:

こんにちは

jQuery コード:

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

$("p").before( $("b") );

結果:

こんにちは

言いたいことがあります:

.append() と .appendTo()

4.append()

説明: すべての段落にいくつかの HTML タグを追加します。

HTML コード:

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

言いたいこと:

jQuery コード:

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

$("p").append("こんにちは");

結果:

言いたいこと: こんにちは

5.appendTo()

説明: 新しい段落を div に追加し、クラスを追加します

HTML コード:

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

jQuery コード:

コードをコピーします

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

$("

")
.appendTo("div")
.addClass("テスト")
.end()
.addClass("test2");

結果:

.prepend() と .prependTo()

6.prepend()

説明: jQuery オブジェクト (DOM 要素の配列と同様) をすべての段落の先頭に追加します。

HTML コード:

言いたいこと:

こんにちは

jQuery コード:

$("p").prepend( $("b") );

結果:

こんにちは言いたいことがあります:

7.prependTo()

説明: すべての段落を ID 値 foo の要素に追加します。

HTML コード:

コードをコピーします

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

言いたいこと:

jQuery コード:

コードをコピーします

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

$("p").prependTo("#foo");

結果:

言いたいこと:

概要

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

4. .prependTo() と .prepend(): 要素を既存の要素の内側に前から挿入します