Heim > Artikel > Web-Frontend > jQuery implementiert Klick- und Mauserkennungsereignisse
jQuery implementiert Klick- und Mauserkennungsereignisse. Schüler, die mit den Ereignissen von jQuery nicht vertraut sind, verstehen möglicherweise nicht viel über jQuery Schüler, die an Click- und Mouse-Sensing-Events teilnehmen, können es einsammeln und einen Blick darauf werfen!
1. Implementieren Sie den dynamischen Wechsel von Klickereignissen
Wir haben bereits über toggleClass() gesprochen. Für Klickereignisse bietet jQuery auch den dynamischen Wechsel Die Methode toggle() wird eingeführt. Diese Methode akzeptiert zwei Parameter. Beide Parameter sind Abhörfunktionen und werden abwechselnd im Click-Ereignis verwendet.
Beispiel: dynamische Interaktion von Klickereignissen.
<script type="text/javascript"> $(function() { $("#ddd").toggle( function(oEvent) { $(oEvent.target).css("opacity", "0.5"); }, function(oEvent) { $(oEvent.target).css("opacity", "1.0"); } ); }); </script> <div id="ddd">11</div>
2. Um die Mauserkennung zu implementieren, kann
in CSS verwendet werden: Hover Pseudoklasse Stil erreichen Überarbeitet, um separate CSS-Stile zu implementieren. Nach der Einführung von jQuery können fast alle Elemente hover() verwenden, um die Maus zu erkennen. Und kann komplexere Effekte erzeugen. Ihr Kern ist die Zusammenführung von Mouseover- und Mouseout-Ereignissen. Die
hover(over,out)-Methode akzeptiert zwei Parameter, die beide Funktionen sind. Der erste wird ausgelöst, wenn sich die Maus über das Element bewegt, und der zweite wird ausgelöst, wenn sich die Maus aus dem Element herausbewegt.
<script type="text/javascript"> $(function() { $("#ddd").hover( function(oEvent) { //第一个函数相当于mouseover事件监听 $(oEvent.target).css("opacity", "0.5"); }, function(oEvent) { //第二个函数相当于mouseover事件监听 $(oEvent.target).css("opacity", "1.0"); } ); }); </script> <div id="ddd">11</div>
Im Vergleich zum ersten Beispiel wird toggle() nur durch hover() ersetzt.
Schreiben Sie unter der Anleitung von wenzi0_0 ein paar kleine Beispiele zu toggle()
1. Konventionelle Anwendungen
<script type="text/javascript"> $(function() { $("#ddd").click(function(){ $("#eee").toggle(); }); }); </script> <div id="ddd">11</div> <div id="eee">122</div>
2.css-Eigenschaften
<script type="text/javascript"> $(function(){ $("#eee").toggle(function() { $("#ddd").css("background-color", "green"); }, function() { $("#ddd").css("background-color", "red"); }, function() { $("#ddd").css("background-color", "yellow"); } ); }); </script> <div id="ddd">11</div> <div id="eee">122</div>
Dieser Artikel endet hier zuerst. Haben die Schüler? ein neues Verständnis von jQuery-Mausereignissen?
Verwandte Empfehlungen:
Wenn Mouseout und Mouseover untergeordnet sind Elemente in jQuery-Ereignissen
JQuery-Ereignisse schweben, Mouseenter und Mouseleave lösen die Animation nur einmal aus
Der Unterschied zwischen jQuery-Ereignissen Mouseover, Mouseout und Hover
Das obige ist der detaillierte Inhalt vonjQuery implementiert Klick- und Mauserkennungsereignisse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!