Jetzt werde ich dir die Grundlagen
zum Einsatz von jQuery auf
einer Webseite zeigen.
Der erste Schritt besteht darin,
die jQuery-Bibliothek mit
einem '<script>'-Tag einzubinden.
Vorher haben wir JavaScript innerhalb
unseres ''-Tags verwendet,
aber dieses Mal werde ich
ein 'src'-Attribut hinzufügen.
Und das muss ich auf eine URL setzen.
Wie soll diese URL lauten?
Wenn ich an meinem eigenen
Computer arbeiten würde
und jQuery in den gleichen
Ordner wie meine Webseite heruntergeladen hätte,
könnte ich hier einfach 'jquery.js' schreiben.
Aber das funktioniert hier bei Khan Academy nicht.
Hier brauche ich eine absolute URL von jQuery
irgendwo auf einem Online-Server.
Und es gibt eine Liste von
diesen URLs unter jquery.com.
Eine davon werde ich hier einfügen.
So geht's.
Jetzt möchte ich auf ein paar Dinge
über diese URL hinweisen.
Die erste Sache ist, dass
sie mit "https" beginnt.
Das bedeutet, dass es sich um eine sichere URL handelt.
Auf Khan Academy-Webseiten
erlauben wir dir nur,
sichere Ressourcen zu verwenden.
Denn das ist generell eine gute
Praxis in der Webentwicklung.
Okay. Die zweite Sache ist,
dass diese Seite
auf einem Google-Server ist: googleapis.com.
Dieser Server wird ein CDN genannt,
ein Content Delivery Network,
was bedeutet, dass er optimiert ist,
um statische Dateien wie JavaScript-Bibliotheken
sehr schnell bereitzustellen.
Diesem Google-Server vertraue ich
und generell solltest du
immer den Servern vertrauen,
von denen du Skripte einbindest.
Denn sie könnten möglicherweise
schädliche Dinge mit deiner Seite anstellen.
Okay. Die dritte Sache ist,
dass eine Versionsnummer
in dieser URL steht: 2.1.4.
Die jQuery-Bibliothek ist
in aktiver Entwicklung
und es werden häufig neue Versionen veröffentlicht.
Die Zahlen weiter links
stehen für größere Versionsänderungen,
derweil die Zahlen weiter rechts
die kleineren Versionen darstellen.
Ich verwende hier jQuery 2,
das in modernen Browsern,
aber nicht im IE8 funktioniert.
Auf deiner eigenen Website
kannst du entscheiden, welche Version
du je nach Bedarf verwenden willst.
Also gut. Wir haben also jQuery eingebunden.
Jetzt wollen wir es tatsächlich
in einem anderen '<script>'-Tag verwenden.
Jede JavaScript-Bibliothek stellt Funktionen zur Verfügung
und sie geben ihren Funktionen Namen.
Wir müssen in der Dokumentation nachsehen,
wie diese Funktionsnamen lauten
und was sie tatsächlich tun.
Nun, die jQuery-Bibliothek
stellt eine Hauptfunktion
mit einem sehr kurzen Namen zur Verfügung.
Es ist nur ein Dollarzeichen.
Wir schreiben also
zuerst einfach Dollar.
Dann zwei Klammern,
weil es eine Funktion ist,
und natürlich ein Semikolon.
Es ist schön, dass dieser
Funktionsname so kurz ist,
denn wir werden diese Funktion
sehr oft aufrufen.
Es gibt eine Menge Dinge, die wir
an diese Funktion übergeben können,
aber für dieses erste Beispiel
werde ich nur 'h1' übergeben.
Wenn ich das getan habe,
sagt dies jQuery, dass es
alle 'h1'-Elemente auf der Seite finden und
sie als ein jQuery-Objekt zurückgeben soll.
Jetzt, wo ich das getan habe,
kann ich andere Methoden auf
dem jQuery-Objekt aufrufen,
um alle gefundenen
'h1'-Elemente zu bearbeiten.
Wenn ich zum Beispiel den
Text aller Elemente ändern möchte,
kann ich die Funktion 'text' aufrufen
und ihr einen String übergeben.
Es funktioniert!
Ja!
Und wir sind fertig!
Das ist unser erstes Stück jQuery.
Wir haben also die jQuery
Bibliothek mit dem 'script'-Tag eingebunden,
jQuery angewiesen, alle
'H1' auf der Seite zu finden
und dann jQuery gebeten,
den Text von allen zu ändern.
Bald werden wir noch mehr lernen.
Wir gehen mehr ins Detail,
werden mehr Möglichkeiten zur Auswahl haben
und auch Elemente manipulieren.
Wir verwenden jQuery, um auf Benutzerereignisse
auf der Seite zu reagieren. Und wir werden auch
lustige Sachen wie Animationen
und Effekte ausprobieren.