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!