ホームページ > 記事 > ウェブフロントエンド > jqueryのDOM&イベントの解説

jqueryのDOM&イベントの解説

jackloveオリジナル: 2018-05-21 10:39:141386ブラウズ

学習中によく遭遇する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(&#39;click&#39;, function(e){    console.log(e);
    alert(2);
});
$("button").on(&#39;click&#39;, 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 サイトを参照してください。

jqueryのDOM&イベントの解説

関連記事