ホームページ  >  記事  >  ウェブフロントエンド  >  jQueryを使用する理由

jQueryを使用する理由

WBOY
WBOYオリジナル
2022-03-29 10:01:012030ブラウズ

jquery では、選択した要素およびサブ要素に 1 つ以上のイベント ハンドラーを追加する必要があるため、on() メソッドを使用する必要があります。このメソッドによって追加されたイベント ハンドラーは、現在およびfuture Elementの構文は「element object.on(event, 子要素のイベントハンドラ, 追加データ, function)」です。

jQueryを使用する理由

このチュートリアルの動作環境: Windows10 システム、jquery3.2.1 バージョン、Dell G3 コンピューター。

jquery の on

on() メソッドを使用して、選択した要素およびサブ要素に 1 つ以上のイベント ハンドラーを追加する理由。

jQuery バージョン 1.7 以降、on() メソッドは、bind()、live()、および delegate() メソッドに代わる新しいメソッドです。このメソッドは API に多くの利便性をもたらし、jQuery コード ベースを簡素化するため推奨されます。

注: on() メソッドを使用して追加されたイベント ハンドラーは、現在および将来の要素 (スクリプトによって作成された新しい要素など) に適用されます。

ヒント: イベント ハンドラーを削除する必要がある場合は、off() メソッドを使用します。

ヒント: 1 回だけ実行するイベントを追加して削除する必要がある場合は、one() メソッドを使用します。

構文

$(selector).on(event,childSelector,data,function)
  • event 必須。選択した要素から追加する 1 つ以上のイベントまたは名前空間を指定します。スペースで区切られた複数のイベント値を配列にすることもできます。有効なイベントである必要があります。

  • childSelector オプション。イベント ハンドラーを指定した子要素にのみ追加できるように指定します (非推奨の delegate() メソッドなどのセレクター自体には追加できません)。

  • データ オプション。関数に渡す追加データを指定します。

  • 関数 オプション。イベントの発生時に実行する関数を指定します。

例は次のとおりです。

<html>
<head>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").on("click",function(){
    alert("段落被点击了。");
  });
});
</script>
</head>
<body>
<p>点击这个段落。</p>
</body>
</html>

出力結果:

jQueryを使用する理由

After段落をクリックします:

jQueryを使用する理由

推奨される関連ビデオ チュートリアル: jQuery ビデオ チュートリアル

以上がjQueryを使用する理由の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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