mouseover()/mouserout()
Mouseover/mouseout イベントは、マウスが要素またはその子孫要素に出入りするときにトリガーされます。
マウスオーバー イベントは、マウスアウト イベントと一緒に使用されることが最もよくあります。
バブリング メカニズムにより、mouseover/mouserout イベントが必要のないときに誤ってトリガーされることが多く、スクリプトの問題が発生します。
mouseenter()/mouseleave()
mouseenter/mouseleave は、マウスが選択された要素に入ったときにのみトリガーされます。マウスが子要素を通過するときはトリガーされません。ターゲット要素に子があるかどうかは関係ありません。
focusin() と focusout()
.focusin(): このイベントは、要素またはそのサブ要素がフォーカスを受け取ったときにトリガーされます
.focusout(): このイベントは、要素またはその子要素がフォーカスを失ったときにトリガーされます
focus() メソッドとは異なり、focusin() メソッドは、子要素がフォーカスを取得したときにもトリガーされます。
炎にフォーカス
火災に集中
eq() と get()
.get(): jQuery オブジェクトを通じて対応する DOM 要素を取得します。
.eq(): コレクション
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 メソッドを使用する必要がある場合は、次のように記述する必要があります。
フィルター()
filter() メソッド: 指定された式に一致する要素のセットをフィルターで除外します。
この方法は、マッチングの範囲を狭めるために使用されます。複数の式はカンマで区切ります。
filter(expression): (String|Function) パラメーターが文字列の場合、jQuery セレクターは、セレクターに一致しないすべての要素をパッケージング セットから削除し、セレクターに一致する要素のみを残すように定式化されます。 ; 引数が関数の場合、フィルタ基準を決定するために使用されます。この関数は、ラッピング セット内の要素ごとに 1 回呼び出されます。関数呼び出しから false を返した要素は、ラッピング セットから削除されます。
次のコードは、最初の要素と要素を選択クラスで保持することを意味します
HTML コード:
こんにちは
またこんにちは
またまた
jQuery コード:
結果:
こんにちは
、またまた
関数の別の例を見てください。関数はテスト要素のコレクションとして使用されます。これは、jQuery コレクション内の要素のインデックスであるパラメーター インデックスを受け入れます。関数では、これは現在の DOM 要素を指します。
HTML コード:
お元気ですか?
jQuery コード:
結果:
お元気ですか?
.bind(): イベント ハンドラーをバインドする最も基本的な方法は、.bind() メソッドを使用することです。これは live() メソッドと同じで、2 つのパラメータを受け入れます:
.bind(イベントタイプ、イベントハンドラー)
イベント ハンドラーをバインドする 2 つの方法:
alert("Hello World!");
}
});
delegate() メソッド: 1 つ以上のイベント ハンドラーを指定された要素 (選択された要素の子要素) に追加します。
そして、これらのイベントが発生したときに実行する関数を指定します。 jQuery 1.7 以降、.delegate() は .on() メソッドに置き換えられました。
構文:
$(selector).delegate(childSelector,event type,function)
childSelector が必要です。イベント ハンドラーがアタッチされる 1 つ以上の子要素を指定します。
イベントが必要です。要素に付加する 1 つ以上のイベントを指定します。スペースで区切られた複数のイベント値。有効なイベントである必要があります。
関数が必要です。イベントの発生時に実行する関数を指定します。
delegate() は次の 2 つの状況で使用されます:
1. 親要素があり、その子要素にイベントを追加する必要がある場合は、delegate() を使用できます。コードは次のとおりです。
});
を使用できます。
end() メソッド
end() メソッド: jquery コマンド チェーン内で呼び出され、前のパッケージング セットに戻ります。
各フィルタリング メソッドはスタックにプッシュされます。前の状態に戻る必要がある場合は、end() を使用してポップ操作を実行し、スタック内の前の状態に戻すことができます。
だからです 2 番目の find() メソッドの前の状態は、赤色のフォントでクラス値 2 を持つオブジェクトを返しました。そのため、2 番目の find() は
を返します。
toggleClass()`toggleClass() メソッド: `指定されたクラス名が要素に存在しない場合、要素に指定された
が既に存在する場合は、指定されたクラス名を追加します。
class name は、指定されたクラス名を要素から削除します。
css(name,value) メソッド: 指定された値を、一致した各要素の指定された CSS スタイル属性に設定します
wrap() および WrapInner()
`wrap() および WrapInner(): `前者は、一致するすべての要素を他の要素の構造化タグでラップします。 後者は、一致する各要素のサブコンテンツ (テキスト ノードを含む) を HTML 構造でラップします。
次のwrap()の例を見てください:
元の div の内容を新しい div のクラスとして使用し、各要素をラップします
HTML コード:
結果:
次に、wrapInner() の次の例を見てください。
元の div の内容を新しい div のクラスとして使用し、各要素をラップします
HTML コード:
jQuery コード:
結果:
メソッドをデタッチ、空にし、削除します
.detach( [selector ] ): DOM から一致する要素をすべて削除します。要素を削除してすぐにその要素を DOM に挿入する必要がある場合は、detach メソッドを使用する必要があります。
.empty(): このメソッドは、子要素 (および他の子孫要素) を削除するだけでなく、要素内のテキストも削除します。指示によれば、要素内のテキスト文字列は要素の子ノードとみなされます。
.remove( [selector ] ): DOM から要素を削除し、要素
のイベントと jQuery データを削除します。empty() の例:
次のremove()の例を見てください:
説明: DOM からすべての段落を削除します
HTML コード:
こんにちは
お元気ですか?jQuery コード:
結果:
調子はどうですか
val() メソッド
val(): 一致する要素の現在の値を取得します。
説明: テキスト ボックスの値を取得します
jQuery コード:
jQuery コード:
each() と map()
each() メソッドと map() メソッド: それぞれ元の配列を返し、新しい配列を作成しません。 Map メソッドは
を返します。
新しいアレイ。マップを不必要に使用すると、メモリが無駄に消費される可能性があります。
各メソッド:
空の配列を定義し、各メソッドを通じて配列に ID 値を追加します。最後に、配列を文字列に変換した後、値をアラートします。
マップメソッド:
各 :checkbox; に対して return this.id を実行し、これらの戻り値を jQuery オブジェクトとして自動的に保存し、get メソッドを使用してネイティブ JavaScript 配列に変換し、join メソッドを使用して文字列に変換します。最終的にアラート この値;
さらに詳しい説明については、私の別の記事をクリックしてください: jQuery の組み込み関数 map() と each() の使用方法の詳細な説明
$.each()
jQuery の $(selector).each() 関数はループの選択された子要素を走査できますが、jQuery の $.each() 関数はオブジェクトや配列を含む任意のコレクションを走査でき、走査するコレクションとコールバック関数では、コールバック関数は配列の添字とその添字に対応する配列の値を毎回渡します。
$.each(配列,コールバック);
$.each(オブジェクト,コールバック);
配列インスタンス
デモ:
インデックス 1: 2;
インデックス 2: 3
オブジェクトインスタンス
alert( "キー: " k "、値: " v );
});
コールバック(キー,値)
デモ:
キー: 年齢、値: 21
.trigger()
.on() またはショートカット メソッドを介してバインドされたイベント ハンドラーは、対応するイベントが発生するとトリガーされます。ただし、.trigger() メソッド
を使用して手動でトリガーできます。
$("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 コード:
結果:
言いたいこと:
こんにちは2.insertAfter()
説明:
すべての段落を要素の後に挿入します。 $("#foo").after("p")
HTML コード:
言いたいことがあります:
jQuery コード:
結果:
言いたいことがあります:
.before() および .insertBefore()
3.before()
説明:
すべての段落の前に jQuery オブジェクト (DOM 要素の配列に似たもの) を挿入します。
HTML コード:
言いたいこと:
こんにちはjQuery コード:
結果:
こんにちは
言いたいことがあります:
.append() と .appendTo()
4.append()
説明: すべての段落にいくつかの HTML タグを追加します。
HTML コード:
言いたいこと:
jQuery コード:
結果:
言いたいこと: こんにちは
5.appendTo()
説明: 新しい段落を div に追加し、クラスを追加します
HTML コード:
jQuery コード:
コードは次のとおりです:
結果:
6.prepend()
説明: jQuery オブジェクト (DOM 要素の配列と同様) をすべての段落の先頭に追加します。
HTML コード:
言いたいこと:
こんにちはjQuery コード:
$("p").prepend( $("b") );
こんにちは言いたいことがあります:
7.prependTo()
説明: すべての段落を ID 値 foo の要素に追加します。
HTML コード:
コードは次のとおりです:
言いたいこと:
jQuery コード:
コードは次のとおりです:
結果:
言いたいこと:
概要
1. .insertAfter() および .after(): 既存の要素の外側に要素を後ろから挿入します
2. .insertBefore() と .before(): 既存の要素の外側に要素を前から挿入します
3. .appendTo() および .append(): 既存の要素の内側に要素を後ろから挿入します