jqueryのDOM&イベントの解説

学習中によく遭遇するjquery DOM&イベントについてこの記事では詳しく説明します。

ライブラリとフレームワークの違いは何ですか?

ライブラリには、倉庫内のさまざまな小さなツールに相当する多くのメソッドが用意されており、ツールが必要なときに直接使用できます。

フレームはただの棚が設置されているだけで、本体が決まっているので、そこにさまざまなツールを詰め込むだけです。

jQueryで何ができるの? jqueryオブジェクトとDOMネイティブオブジェクトの違いは何ですか?変換方法は?

jquery は、HTML テキストの走査、DOM ノードの操作、イベント、アニメーション、および Ajax 関数の処理ができるため、互換性を考慮することなく、より多くのプラットフォームで使用できます。
特徴: 軽量 (32kb)、CSS3 と互換性、クロスブラウザー、

jquery オブジェクトと DOM ネイティブ オブジェクトの違いは、jqery オブジェクトがネイティブ オブジェクトのパッケージ化されたオブジェクトであり、jquery オブジェクト専用のメソッドがいくつかあることです。とても使いやすいです。

配列([インデックス番号添字])を直接使用するクエリメソッドは、eqメソッドを使用した場合、結果もクエリオブジェクトになります。ネイティブ オブジェクトを jquery オブジェクトに変換するには、それを $() でラップするだけです。
例:

jquery オブジェクトをネイティブ $(#head)[0]

ネイティブ オブジェクトを jquery > $(native object)

jquery でイベントをバインドするにはどうすればよいですか?バインド、バインド解除、デリゲート、ライブ、オン、オフの機能は何ですか?どれがおすすめですか？ on を使用してイベントをバインドし、イベント プロキシを使用するにはどうすればよいですか?

jquery では、次のようにイベントをバインドできます:

$("button").click(function() {
    alert(1);
} );
$("button").bind('click', function(e){    console.log(e);
    alert(2);
});
$("button").on('click', function(){    console.log(e);    console.log(this);    console.log($(this));
});

bind 要素にバインディング イベントを追加します (バージョン 1.7 以降では、bind の代わりに on を使用することをお勧めします)

unbind 要素バインディング イベントのバインドを解除します (バージョン以前に使用されていたメソッド) 1.7) )

delegate は、要素に 1 つ以上のバインディング イベントを追加するイベント プロキシ (要素を指定可能) と同等です (バージョン 1.7 以降では、代わりに on を使用することをお勧めします)

live は、イベント プロキシを使用するのと同等です(ルート ノードの場合) 1 つ以上のバインド イベントを要素に追加します。 1 つ以上のバインド イベント (バージョン 1.7 以降は非推奨となり、on に置き換えられます)

on 選択した要素およびサブ要素 (最も推奨される方法)

off は、.on() メソッドによって追加されたイベント ハンドラーを削除するために使用します。

on() メソッドは上記のメソッドを統合するため、現在は、次のように記述された .on() メソッドを使用することが推奨されています。 :

$( "#members" ).on( "click","li a",function( e ) {} );
ここで、子要素の位置は click の後であることに注意してください。これは、イベント プロキシを意味します。が使用されています

jqueryはどのように要素を表示/非表示にしますか? jQueryアニメーションの使い方は？

要素の表示: $(selector).show(speed,callback);

要素の非表示: $(selector).hide(speed,callback);

表示と非表示の切り替え: $(selector).toggle(speed, callback);

フェードインとフェードアウト:

$(selector).fadeIn(speed,callback); //淡入
$(selector).fadeOut(speed,callback); //
淡出$(selector).fadeToggle(speed,callback); //
淡入淡出切换$(selector).fadeTo(speed,opacity,callback);  //渐变到透明度

スライドインとスライドアウト:

$(selector).slideDown(speed,callback); //スライドイン$(selector).slideUp(speed,callback); /Slide out $(selector).slideToggle(speed,callback); //Switch

オプションの速度パラメータは、非表示/表示の速度を指定し、「slow」、「fast」、またはミリ秒の値を指定できます。
オプションのコールバックパラメータは、非表示または表示の完了後に実行される関数の名前です。

jqueryアニメーション $(selector).animate({parmas},speed,callback);

paramsは必須パラメータであり、アニメーションのCSSプロパティです。 Speed はアニメーション効果の継続時間を指定するオプションのパラメータで、遅い、速い、またはミリ秒の値を取ります。 classback はアニメーションが完了した後に実行される関数です。

要素内の HTML コンテンツを設定および取得するにはどうすればよいですか?要素の内部テキストを設定および取得するにはどうすればよいですか?

HTMLコンテンツの設定または取得: $(selector).html()

テキストコンテンツの設定または取得: $(selector).text()

パラメータがある場合は設定を意味し、パラメータがない場合はそれを意味します得るという意味です。

フォームユーザーが入力または選択した内容を設定および取得するにはどうすればよいですか?要素のプロパティを設定および取得するにはどうすればよいですか?

フォームのユーザー入力コンテンツを設定または取得 $('#input').val()

フォーム選択コンテ​​ンツを設定または取得 $('input:checked') または $(':checked')

Set または要素の属性を取得 $("div").attr(e,d) eは取得を表し、dは設定が必要な属性を表し、空の場合は取得を表します

特定の属性を持つ要素を取得します $ ('[data-img]') または $('[data-img="xxx"]')

この記事では、jquery DOM とイベントについて説明します。さらに関連した知識については、php の中国語 Web サイトを参照してください。

関連する推奨事項:

関連するモジュールの基本

dom オブジェクトの innerText と innerHTML の違いは何ですか?

JS に関する基本的な質問

以上がjqueryのDOM&イベントの解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。