Heim > Web-Frontend > js-Tutorial > jQuery implementiert Klick- und Mauserkennungsereignisse

jQuery implementiert Klick- und Mauserkennungsereignisse

韦小宝
Freigeben: 2017-11-30 09:10:03
Original
1547 Leute haben es durchsucht

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

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

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

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

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!

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