Erste Schritte mit jQuery
Erste Schritte mit jQuery
Erste Schritte mit jQuery ist eine kostenlose jQuery Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 1. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des jQuery Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der jQuery Academy-Kurs umfasst insgesamt 1 Lektionen.
Einführung
Guten Tag,
Um die JQuery-Bibliothek zu verwenden, müssen wir sie zunächst in das HTML-Dokument einbinden.
Im folgenden Beispiel wurde die Adresse der jQuery-Bibliothek als Wert des src-Attributs zwischen den head-Tags eingefügt.
Nun kann die jQuery-Bibliothek in unserem Projekt verwendet werden.
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.slim.js"></script>
</head>
<body>
</body>
</html>Jquery-Auswahl
Um mit HTML-Elementen zu arbeiten (wir nennen sie ab jetzt DOM), müssen wir zunächst das gewünschte Element auswählen.
In jQuery wird für eine Auswahl die Methode $() oder jQuery() verwendet.
Die Methode $() wird von Softwareentwicklern häufiger verwendet.
Welches Element ausgewählt werden soll, legen wir mit dem Parameter fest, den wir dieser Methode übergeben.
XPath
Der Ausdruck, den wir an die Methode $ übergeben, ist der XPath-Selektor, den wir auch aus CSS kennen.
Anders gesagt wählen wir HTML-Elemente in JQuery genauso aus wie in CSS.
XPath-Beispiele
Nehmen wir an, unser HTML-Code sieht wie folgt aus.
<div id="my-box" class="my-box">
<p class="my-p">
<span class="my-text">Hello jQuery</span>
</p>
</div>
Wählen wir HTML-Elemente mit jQuery aus.
// Dummy $ to demonstrate jQuery selectors in Node.js
function $(selector) {
console.log("Selector:", selector);
return [];
}
// Selects the element with the id of my-box.
$('#my-box')
// Selects the element with the my-box class.
$('.my-box')
// Selects all p elements that are descendants of the element with my-box id
$('#my-box p')
// Select the element with the .my-p class that is the child of the element with my-box class.
$('.my-box > .my-p')Mit jQuery konnten wir unseren Code kürzer schreiben
Wenn wir dasselbe mit Vanilla-(Plain-)JavaScript umsetzen wollten, müssten wir mehr Codezeilen schreiben.
Mit den eigenen Methoden von jQuery konnten wir unseren Code kürzer schreiben.
Warnung
JQuery ist lediglich eine Bibliothek und macht die Webentwicklung tatsächlich einfacher als Vanilla JavaScript.
Info
Ein weiterer Vorteil von jQuery besteht darin, dass alle modernen Browser den von uns geschriebenen Code unterstützen.
Code, den wir mit VanillaJS schreiben, kann in einigen Browsern Nebenwirkungen verursachen. jQuery stellt durch die bereitgestellte Abstraktion sicher, dass sich der Code in jedem Browser gleich verhält.
JQuery erspart uns beim Schreiben von Code browserspezifische Überlegungen.
$(document).ready
Bevor wir uns mit den Grundlagen von jQuery beschäftigen, lernen wir die Methode $(document).ready kennen.
Wie Sie sich aus dem Thema HTML erinnern, können Javascripts innerhalb von HTML an beliebiger Stelle zwischen dem head- oder dem body-Tag eingefügt werden.
$(document).ready 2
Nehmen wir an, wir haben HTML-Code wie im folgenden Beispiel.
Unser Browser interpretiert unseren Code vom Tag <!DOCTYPE html> bis zum schließenden Tag </html>.
Die Anweisung <script src = "https://code.jquery.com/jquery-3.5.1.slim.js"> </script> startet den Download der Bibliothek über code.jquery.com.
In der nächsten Zeile wird das DOM mit der $-Methode von jQuery ausgewählt. Hier gibt es jedoch ein Problem: Wenn das HTML-Dokument beim Aufruf der Methode $ ('# test') noch nicht vollständig geladen ist, schlägt unser JS-Code fehl.
In diesem Fall wird die Methode $(document).ready verwendet, um sicherzustellen, dass das Dokument vollständig geladen ist.
<div id="test">Hello Coddy</div>
<script>
$('#test').text('Hello Coddy')
</script>
$(document).ready 3
Nach der oben beschriebenen Definition
müssen wir lediglich die Methode $(document).ready() verwenden. Diese Methode wartet, bis alle Inhalte geladen sind, und führt den Code anschließend aus.
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<div id="test">Hello Coddy</div>
<script>
$(document).ready(function(){
$('#test').text('Hello Coddy')
})
</script>
</body>
</html>Frage
Los geht's, beantworten Sie die Frage!
Herzlichen Glückwunsch
Herzlichen Glückwunsch 🎉
In diesem Abschnitt haben wir begonnen, die jQuery-Bibliothek und ihre Methode $(document).ready() kennenzulernen.
Im nächsten Abschnitt lernen wir die Selektoren von jQuery kennen.
Häufig gestellte Fragen
Ist die Lektion „Erste Schritte mit jQuery“ kostenlos?
Ja — der vollständige Text von „Erste Schritte mit jQuery“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des jQuery Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der jQuery Academy-Kurs umfasst insgesamt 1 Lektionen.
Was lerne ich in „Erste Schritte mit jQuery“?
Erste Schritte mit jQuery Du übst jQuery Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um jQuery Academy zu starten?
Keine Vorkenntnisse erforderlich. jQuery Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 1.
Wie lange dauert die Lektion „Erste Schritte mit jQuery“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser jQuery Academy-Lektion Code schreiben und ausführen?
Ja. Jede jQuery Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.