jqueryの一般的なメソッドと使用例のまとめ_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 コード:

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

1. こんにちは

お元気ですか?

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() は

内の .two のみを検索します。 () メソッドはチェーン操作のコードを次のように変更します:

コードをコピーします コードは次のとおりです:
<スクリプトタイプ="text/javascript">
$('ul.one').find(".two").css("color","re​​d").end().find('.three').css("background","blue") ;



ここでの end() メソッドは、find() を呼び出す前の状態、つまり $('ul.one')

を返します。

toggleClass()
`toggleClass() メソッド: `指定されたクラス名が要素に存在しない場合、要素に指定された

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


wrap() および WrapInner()

`wrap() および WrapInner(): `前者は、一致するすべての要素を他の要素の構造化タグでラップします。 後者は、一致する各要素のサブコンテンツ (テキスト ノードを含む) を HTML 構造でラップします。

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

HTML コード:

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


さようなら






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

$('.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(): 要素 を既存の要素の内側に前から挿入します

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。