Elemente von Grund auf neu erstellen | Computerprogrammierung | Khan Academy

Lerne, wie du die jQuery JavaScript-Bibliothek mithilfe eines Skript-Tags in deine Seite einbindest und wie du jQuery verwenden kannst, um Teile einer Seite zu verändern.

Übe diese Lektion gleich selbst auf KhanAcademy.org:
https://www.khanacademy.org/computing/computer-programming/html-js-jquery/jquery-intro/p/challenge-your-first-jquery?utm_source=YT&utm_medium=Desc&utm_campaign=computerprogramming

Schau dir die nächste Lektion an: https://www.khanacademy.org/computing/computer-programming/html-js-jquery/jquery-dom-access/p/finding-elements-with-jquery?utm_source=YT&utm_medium=Desc&utm_campaign=computerprogramming

Hast du die vorherige Lektion verpasst? https://www.khanacademy.org/computing/computer-programming/html-js-jquery/jquery-intro/v/what-is-jquery?utm_source=YT&utm_medium=Desc&utm_campaign=computerprogramming

Computerprogrammierung auf Khan Academy: Lerne, wie man Zeichnungen, Animationen und Spiele mit JavaScript und ProcessingJS programmiert, oder wie man Webseiten mit HTML und CSS erstellt. Du kannst alles, was du erstellst, mit anderen teilen, sehen, was andere erstellt haben und voneinander lernen!

Über Khan Academy: Khan Academy ist eine gemeinnützige Organisation, die es sich zur Aufgabe gemacht hat, jedem und überall eine kostenlose, erstklassige Bildung zu bieten. Wir glauben, dass Lernende jeden Alters unbegrenzten Zugang zu kostenlosen Bildungsinhalten haben sollten, die sie in ihrem eigenen Tempo meistern können. Wir nutzen intelligente Software, fundierte Datenanalysen und intuitive Benutzeroberflächen, um Schüler/innen und Lehrer/innen auf der ganzen Welt zu unterstützen. Unsere Ressourcen decken den gesamten Bildungsbereich von der Vorschule bis zum College ab, einschließlich Mathe, Biologie, Chemie, Physik, Wirtschaft, Finanzen, Geschichte, Grammatik und mehr. In Zusammenarbeit mit dem Entwickler des Tests, dem College Board, bieten wir eine kostenlose, personalisierte SAT-Testvorbereitung an. Khan Academy wurde in Dutzende von Sprachen übersetzt, und jedes Jahr nutzen 100 Millionen Menschen weltweit unsere Plattform. Weitere Informationen findest du unter www.khanacademy.org, folge uns auf Facebook oder auf Twitter unter @khanacademy. Und denk daran: Du kannst alles lernen.

Umsonst. Für jeden. Für immer. #YouCanLearnAnything

Abonniere den Computerprogrammier-Kanal von Khan Academy: https://www.youtube.com/channel/UCzYDKG5mmfPPIosXuQ1PvEA?sub_confirmation=1
Abonnieren Sie Khan Academy: https://www.youtube.com/subscription_center?add_user=khanacademy

- Jetzt werde ich dich
dich durch die Grundlagen führen

der Verwendung von jQuery auf deiner Webseite.

Der erste Schritt besteht darin, die
die jQuery-Bibliothek einzubinden

mit einem '<script>'-Tag

Vorher haben wir JavaScript
innerhalb unseres ''-Tags ein,

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 habe jQuery heruntergeladen

in den gleichen Ordner wie meine Webseite heruntergeladen,

Ich könnte hier einfach "jquery.js" schreiben.

Aber das wird hier bei Khan Academy nicht funktionieren.

Hier brauche ich eine absolute URL von jQuery

irgendwo auf einem Online-Server.

Und es gibt eine Liste von
dieser URLs unter jquery.com,

und ich habe eine davon
ich hier einfach einfügen.

So geht's.

So ist es gut. Jetzt möchte ich
auf ein paar Dinge hinweisen

über diese URL.

Die erste Sache ist, dass
sie mit "https" beginnt.

Das bedeutet, dass es sich um eine sichere URL handelt.

Wir erlauben dir nur
sichere Ressourcen einzubringen

auf Khan Academy-Webseiten

und das ist generell eine gute
Praxis in der Webentwicklung.

Okay. Die zweite Sache
ist, dass diese Seite

auf einem Google-Server: googleapis.com.

Dieser Server wird CDN genannt,

ein Content Delivery Network,

was bedeutet, dass er optimiert ist

für die Bereitstellung statischer Dateien
wie JavaScript-Bibliotheken

und sie sehr schnell bereitzustellen.

Diesem Google-Server vertraue ich

und generell solltest du
immer den Servern vertrauen

von denen du Skripte einspielst

denn sie könnten möglicherweise
schädliche Dinge mit deiner Seite anstellen.

Okay. Die dritte Sache ist
dass es eine Versionsnummer gibt

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

im Vergleich zu den Zahlen weiter rechts,

die kleinere Versionen darstellen.

Ich verwende hier jQuery 2,

das in modernen Browsern funktioniert

aber im IE8 funktioniert es nicht.

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 benutzen

in einem anderen '<script>'-Tag.

Jede JavaScript-Bibliothek stellt Funktionen zur Verfügung

und sie geben ihren Funktionen Namen.

Wir müssen in der Dokumentation nachsehen

um herauszufinden, wie diese Funktionsnamen lauten

und was sie tatsächlich tun.

Nun, die jQuery-Bibliothek
stellt eine Hauptfunktion zur Verfügung

und sie hat einen sehr kurzen Namen.

Sie besteht nur aus dem Dollarzeichen.

Das bedeutet, dass das erste, was wir schreiben

Dollar ist

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 würden diese Funktion
diese Funktion sehr oft aufrufen.

Es gibt eine Menge Dinge, die wir
an diese Funktion übergeben können,

aber für dieses einführende Beispiel,

werde ich nur die Zeichenkette "h1" übergeben.

Wenn ich das getan habe,

sagt dies jQuery, dass es

alle "h1"-Elemente auf der Seite zu finden

und sie als ein
jQuery-Sammelobjekt zurückzugeben.

Jetzt, wo ich das getan habe,

kann ich andere Methoden aufrufen
für das jQuery-Objekt aufrufen

aufrufen, um alle gefundenen
h1"-Elemente zu bearbeiten.

Wenn ich zum Beispiel den
inneren Text aller Elemente ändern möchte,

kann ich die Funktion "text" aufrufen

aufrufen und ihr einen String übergeben.

Es passiert.

Ja!

Und wir sind fertig!

Das ist unser erstes Stück jQuery.

Wir haben also die jQuery
Bibliothek mit dem ''-Tag eingebunden,

jQuery angewiesen, alle
h1s" auf der Seite zu finden,

zu finden und dann jQuery zu bitten
den Text von allen zu ändern.

Wenn du weitermachst, werden wir
viel mehr durchgehen

mehr ins Detail gehen,

mehr Möglichkeiten zur Auswahl und
und Elemente zu manipulieren,

Verwendung von jQuery zur Reaktion auf
Benutzerereignisse auf der Seite zu reagieren,

sowie lustige Sachen mit Animationen und Effekten.