Videos eBook Forum Kontakt

jetzt Videos kaufen
zum Lernen von HTML,
CSS und Webdesign

Jetzt das HTML-Seminar bestellen als
Video-Tutorial mit über 210 Videos:
von den Grundlagen bis zur fertigen Website
Video-Kurs HTML5, CSS & Webdesign

Video-Kurs bestellen HTML5, CSS & Webdesign
Video-Kurs bestellen HTML5, CSS & Webdesign
jQuery und Maus

jQuery und Maus

Ereignisse wie Mausklick und Mausbewegung mit jQuery nutzen.

Es soll eine Ausgabe erfolgen, wenn man auf den Text mit der ID "absatz1" klickt.

Im ersten Schritt müssen wir das Element bestimmen, bei dem reagiert werden soll, wenn darauf geklickt wird.

$('#absatz1')

Und jetzt, was auf welches Ereignis reagiert werden soll:

$('#absatz1').click(function(){
});

Und dann innerhalb der function(){ … } was passieren soll:

$('#absatz1').click(function(){
    	alert('Es wurde auf #absatz1 geklickt');
});

Und hier der gesamte Code mit jQuery:

<script>
$(document).ready(function(){
    /* Hier der jQuery-Code */
    $('#absatz1').click(function(){
    	alert('Es wurde auf #absatz1 geklickt');
    });
});
</script>

Und das sind gleich richtig viele Klammern (runde wie geschweifte) – also höllenmäßig aufpassen, dass die Klammern die richtige Anzahl haben (zu jeder öffnenden muss es eine schließende geben) und die richtig sitzen.

Tipp dabei: sauber einrücken, dann werden Probleme auch schnell sichtbar.

Hat man einen guten Editor macht dieser gleich für jede öffnende eine schließende Klammer.

Mögliche Mausereignisse sind:

  • click
  • dblclick
  • hover
  • mouseleave
  • mousedown, mouseenter, mousemove, mouseout, mouseover, mouseup

Für aktive Formularfelder wird oft benötigt:

  • focus

Beispiel

$('#eingabefeld1').focus(function(){ ... });

Aufgabe: Färben Sie bei Klick auf die Überschrift die Überschrift orange (im letzten Kapitel hatten wir jQuery und CSS)

Wir können genauso auf Benutzereingaben über Tastatur reagieren. Dies wird im folgenden Kapitel kommen.