jQueryボタンクリックイベントの3つのメソッドを図で詳しく解説-jsチュートリアル-php.cn

jQueryボタンクリックイベントの3つのメソッドを図で詳しく解説

yulia

リリース： 2018-10-12 10:25:36

オリジナル

9195 人が閲覧しました

jQuery は JavaScript をベースにしたフレームワークで、そのシンプルさと利便性から広く使用されています。jQuery ボタンのクリックイベントを設定する方法をご存知ですか?この記事では、jQuery のクリックイベントをトリガーする方法について説明します。興味のある方は参考にしてください。

前の記事では、JavaScript でボタンのクリックイベントを処理する方法について説明しました。次に、jQuery のボタンクリックイベントについて直接説明します。

注: jQuery を使用する場合は、まず jQuery ファイル

方法 1 を導入する必要があります。 $ ("button").click(function () { })

click イベントは、click 要素がクリックされたときに発生します。この関数は、 click() メソッドによってクリックイベントをトリガーできます。クリックイベントが発生すると実行されます。

構文: $(selector).click(function)

例: ボタンがクリックされると、クリックイベントがトリガーされ、ダイアログボックスにコンテンツがポップアップ表示されます。

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
  <button>click</button>
 </body>
 <script type="text/javascript">
  $(document).ready(function(){
    $("button").click(function(){
     alert("祝你好运");
    });
  });
 </script>
</html>

ログイン後にコピー

レンダリング:

#メソッド 2. $(" button ").on("click",function () { })

on() メソッドは、選択した要素およびサブ要素に 1 つ以上のイベントを追加できます。イベントでは、off() メソッドを使用できます。

構文: $(selector).on(event,childSelector,data,function)

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
  <button>点我</button>
 </body>
 <script type="text/javascript">
  $(document).ready(function(){
    $("button").on("click",function(){
      alert("have a nice day ");
    });
  });
 </script>
</html>

ログイン後にコピー

メソッド 3, $( "button" ).bind("click",function(){ })

bind() メソッドは、選択した要素に 1 つ以上のイベントを追加でき、イベントが発生したときに関数が実行されます。が発生します。

構文: $(selector).bind(event,data,function,map)

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
  <button>按钮</button>
 </body>
 <script type="text/javascript">
  $(document).ready(function(){
    $("button").bind("click",function(){
      alert("阳光总在风雨后");
    });
  });
 </script>
</html>

ログイン後にコピー

上記では 3 種類のボタンを紹介しています。 jQuery のクリックイベントの方法は仕事のニーズや個人の習慣によって異なりますので、この記事が役立つことを願っています。

その他の関連チュートリアルについては、

jQuery ビデオチュートリアル

をご覧ください。

以上がjQueryボタンクリックイベントの3つのメソッドを図で詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。