Beide Seiten der vorigen RevisionVorhergehende ÜberarbeitungNächste Überarbeitung | Vorhergehende Überarbeitung |
web:javascript:start [2015/10/15 11:12] – ros | web:javascript:start [2020/10/13 14:25] (aktuell) – Externe Bearbeitung 127.0.0.1 |
---|
[[http://code.jquery.com/jquery-2.1.4.min.js|jquery-2.1.4.min.js]] (Rechtsklick und **Ziel speichern unter** auswählen) | [[http://code.jquery.com/jquery-2.1.4.min.js|jquery-2.1.4.min.js]] (Rechtsklick und **Ziel speichern unter** auswählen) |
</WRAP> | </WRAP> |
| |
===== Einbindung in HTML ===== | ===== Einbindung in HTML ===== |
| |
===== Auf Ereignisse reagieren ===== | ===== Auf Ereignisse reagieren ===== |
| |
| Befehle, die direkt im ''[[web:html:script|<script>]]''-Element stehen, werden sofort ausgeführt. Oft möchte man aber Befehle erst zu einem späteren Zeitpunkt ausführen. Dazu wird eine **Funktion** definiert. Das ist eine Sammlung von Befehlen, die auf Wunsch ausgeführt werden können. |
| |
| Hier wird eine Funktion mit dem Namen ''changeContent'' definiert: |
| |
| <code javascript> |
| function changeContent() { |
| $('body').html('<h1>Neuer Inhalt</h1>'); |
| } |
| </code> |
| |
| **Achtung:** Ein Funktionsname darf nur aus Gross- und Kleinbuchstaben bestehen. |
| |
| Mit dem jQuery-Befehl ''click'' kann nun festgelegt werden, dass die in der Funktion definierten Befehle ausgeführt werden sollen, wenn auf ein bestimmtes Element geklickt wird: |
| |
| <code javascript> |
| $('h1').click(changeContent); |
| </code> |
| |
===== jQuery-Befehle ===== | ===== jQuery-Befehle ===== |
| |
| ==== HTML Ändern ==== |
| |
^ Befehl ^ Beschreibung ^ Beispiel ^ | ^ Befehl ^ Beschreibung ^ Beispiel ^ |
| ''addClass(class)'' | Fügt den Elementen eine Klasse hinzu | ''$('h1').addClass('greentext');'' | | | ''addClass(class)'' | Fügt den Elementen eine Klasse hinzu | ''$('h1').addClass('greentext');'' | |
| ''append(text)'' | Fügt zusätzlichen Inhalt in die Elemente ein | ''$('body').append('<p>Noch was...</p>');'' | | | ''append(text)'' | Fügt zusätzlichen Inhalt in die Elemente ein | ''$('body').append('<p>Noch was...</p>');'' | |
| ''hide()'' | Versteckt die Elemente | ''$('.loesung').hide();'' | | |
| ''html(text)'' | Ersetzt den Inhalt der Elemente | ''$('body').html('<h1>Hallo</h1>');'' | | | ''html(text)'' | Ersetzt den Inhalt der Elemente | ''$('body').html('<h1>Hallo</h1>');'' | |
| ''removeClass(class)'' | Entfernt eine Klasse aus den Elementen | ''$('h1').removeClass('greentext');'' | | | ''removeClass(class)'' | Entfernt eine Klasse aus den Elementen | ''$('h1').removeClass('greentext');'' | |
| |
| ==== Animationen ==== |
| |
| ^ Befehl ^ Beschreibung ^ Beispiel ^ |
| | ''hide()'' | Versteckt die Elemente | ''$('.loesung').hide();'' | |
| ''show()'' | Zeigt die Elemente an | ''$('.loesung').show();'' | | | ''show()'' | Zeigt die Elemente an | ''$('.loesung').show();'' | |
| ''slideDown()'' | Klappt die Elemente nach unten auf | ''$('.loesung').slideDown();'' | | | ''slideDown()'' | Klappt die Elemente nach unten auf | ''$('.loesung').slideDown();'' | |
| ''slideUp()'' | Klappt die Elemente nach oben zu | ''$('.loesung').slideUp();'' | | | ''slideUp()'' | Klappt die Elemente nach oben zu | ''$('.loesung').slideUp();'' | |
| ''toggle()'' | Ändert die Sichtbarkeit | ''$('.loesung').toggle();'' | | | ''toggle()'' | Ändert die Sichtbarkeit | ''$('.loesung').toggle();'' | |
| |
| ==== Ereignisse ==== |
| |
| ^ Befehl ^ Beschreibung ^ Beispiel ^ |
| | ''click(funktion)'' | Wenn auf ein Element geklickt wird... | ''$('h1').click(showContent);'' | |
| | ''hover(funktion)'' | Wenn der Mauszeiger über ein Element bewegt wird... | ''$('h1').hover(showContent);'' | |
| |
| ==== Zeitsteuerung ==== |
| |
| Mit ''setTimeout'' kann festgelegt werden, dass eine Funktion nach einer bestimmten Dauer (in Millisekunden) ausgeführt werden soll: |
| |
| <code javascript> |
| function doSomething() { |
| } |
| |
| setTimeout(doSomething, 1000); |
| </code> |
| |
| Mit ''setInterval'' wird die Funktion immer wieder nach der angegebenen Dauer ausgeführt: |
| |
| <code javascript> |
| function doSomething() { |
| } |
| |
| setInterval(doSomething, 1000); |
| </code> |
| |
| |
===== Links ===== | ===== Links ===== |