Heim > Web-Frontend > js-Tutorial > Hauptteil

Detaillierte grafische Erläuterung der drei Methoden des jQuery-Schaltflächenklickereignisses

yulia
Freigeben: 2018-10-12 10:25:36
Original
9155 Leute haben es durchsucht

jQuery ist ein auf JavaScript basierendes Framework und wird aufgrund seiner Einfachheit und Bequemlichkeit häufig verwendet. Wissen Sie, wie man das Klickereignis der jQuery-Schaltfläche festlegt? In diesem Artikel erfahren Sie mehr über die Methode zum Auslösen von jQuery-Klicks. Interessierte Freunde können sich darauf beziehen.

Ein früherer Artikel hat Ihnen die Verarbeitungsmethode von Button-Klick-Ereignissen in JavaScript erklärt Wenn Sie es brauchen, können Sie einen Blick darauf werfen. Als nächstes erklären wir Ihnen direkt das jQuery-Button-Klick-Ereignis .

Hinweis: Wenn Sie jQuery verwenden, müssen Sie zuerst die jQuery-Datei einführen

Methode 1. $ ("button").click(function () { })

Ein Klickereignis tritt auf, wenn auf ein Klickelement geklickt wird. Die Methode click() kann ein Klickereignis auslösen, das festlegt, dass die Funktion wird ausgeführt, wenn ein Klickereignis auftritt.

Syntax: $(selector).click(function)

Beispiel: Wenn auf die Schaltfläche geklickt wird, wird das Klickereignis ausgelöst und im Dialogfeld wird ein Inhalt angezeigt.

Der Code lautet wie folgt:

<!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>
Nach dem Login kopieren

Rendering:

Detaillierte grafische Erläuterung der drei Methoden des jQuery-Schaltflächenklickereignisses

Methode 2, $( "button").on("click",function () { })

on()-Methode kann ein oder mehrere Ereignisse zu ausgewählten Elementen und Unterelementen hinzufügen, wenn Sie Ereignisse löschen müssen , können Sie die Methode off() verwenden.

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

Der Code lautet wie folgt:

<!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>
Nach dem Login kopieren

Methode 3, $( "button" ).bind("click",function(){ })

Die Methode bind() kann dem ausgewählten Element ein oder mehrere Ereignisse hinzufügen, und die Funktion wird ausgeführt, wenn das Ereignis eintritt auftritt.

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

Der Code lautet wie folgt:

<!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>
Nach dem Login kopieren

Oben werden die drei Arten von Schaltflächen vorgestellt Die Auswahl der Klickereignisse in jQuery hängt auch von den Arbeitsanforderungen und persönlichen Gewohnheiten ab. Ich hoffe, dieser Artikel kann Ihnen helfen.

Weitere verwandte Tutorials finden Sie unter jQuery-Video-Tutorial

Das obige ist der detaillierte Inhalt vonDetaillierte grafische Erläuterung der drei Methoden des jQuery-Schaltflächenklickereignisses. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage