jQuery für Anfänger
jQuery für Anfänger
jQuery für Anfänger 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,
willkommen zum Kurs jQuery für Anfänger.
In diesem Abschnitt beginnen wir damit, uns ausführlich mit jQuery zu beschäftigen.
Einführung 2
Bevor Sie mit diesem Kurs beginnen,
müssen Sie die folgenden Kurse absolviert haben.
- HTML – Grundlagen
- CSS – Grundlagen
- Javascript – Grundlagen
- Wenn Sie bereits Kenntnisse in diesen Themenbereichen haben, können Sie den Kurs fortsetzen.
Beginnen wir
Beginnen wir.
Beantworten wir zunächst die Frage, wofür JQuery verwendet wird.
Bevor Sie die Frage beantworten, wiederholen wir zunächst die Grundlagen
Bevor Sie die Frage beantworten, wiederholen wir zunächst die Grundlagen.
Die Sprache HTML ist eine Auszeichnungssprache. Sie dient also zur Textauszeichnung und ist keine Programmiersprache. Sie hat mit Konzepten wie der objektorientierten Programmierung wenig zu tun. Anders gesagt: Ihre Struktur enthält keine Objekte; die uns bekannten Elemente sind HTML-Tags, Attribute usw.
Javascript führt Operationen am DOM aus
Oft müssen wir Operationen an HTML-Elementen auf Webseiten durchführen. Damit dies möglich ist und HTML-Elemente für JS zugänglich werden, bilden wir sie mithilfe des sogenannten DOM (Document Object Model) ab.
Javascript führt Operationen am DOM aus, dem objektbasierten Abbild der Webseite. Dies wird als DOM-Manipulation bezeichnet.
Beispiel
Sehen wir uns ein Beispiel an.
Wir haben ein Schaltflächenelement wie im folgenden Beispiel mit dem Text „Not Clicked“. Wenn wir auf die Schaltfläche klicken, ändern wir ihren Text in „Clicked“.
Dafür müssen wir mit der Sprache Javascript eine DOM-Manipulation durchführen.
In unserem Kurs „Einführung in Javascript“ haben wir gelernt, wie man ein Webdokument mit Javascript bearbeitet. JQuery ist eine Bibliothek, mit der sich DOM-Manipulationen mit Javascript kürzer und übersichtlicher umsetzen lassen.
<!--Initial Element -->
<button id="my-button">Not Clicked</button>
<!---Desired Element after clicking the button-->
<button id="my-button">Clicked</button>Frage
Eine Frage für Sie!
Beispiel 2
Im folgenden Beispiel haben wir eine Schaltfläche mit der ID my-button definiert.
Nun greifen wir über das DOM mit Javascript auf dieses Element zu.
Wenn wir auf die Schaltfläche klicken, greifen wir mit JS-Code auf das DOM zu und ändern die innerHTML-Eigenschaft des Elements mit der ID my-button in click.
<button id="my-button">
Not Clicked
</button>
<script>
let myButton = document.getElementById('my-button');
myButton.addEventListener("click",
function(){
myButton.innerHTML = "Clicked"
})
</script>Warnung
JQuery ist lediglich eine Bibliothek, die entwickelt wurde, um die Verwendung von Funktionen und Methoden im JS Core zu vereinfachen.
Anders gesagt ermöglicht sie es uns, viele Aufgaben, die wir mit VanillaJS erledigen können, mit einer einfacheren und besser lesbaren Syntax umzusetzen.
Erklärung des Beispiels
Sehen wir uns den Code an.
let myButton = document.getElementById('my-button');
Mit der Methode getElementById weisen wir das Javascript-document-Objekt der Variable myButton zu.
myButton.addEventListener("click", function(){
myButton.innerHTML = "Clicked"
})
Anschließend haben wir sowohl auf das click-Ereignis der Schaltfläche reagiert als auch Änderungen an der Schaltfläche vorgenommen.
Wir haben eine DOM-Manipulation mithilfe der grundlegenden Sprachfunktionen durchgeführt, ohne eine Bibliothek oder ein Framework zu verwenden. Dies wird oben als „native“ oder „vanilla“ bezeichnet.
Schreiben wir denselben Code nun mit jQuery und nutzen wir die Funktionen, die uns die jQuery-Bibliothek bietet.
Warnung
Das Konzept, das an vielen Stellen als VanillaJS bezeichnet wird, umfasst tatsächlich nur die reinen JavaScript-Kernobjekte, -methoden und -funktionen sowie die Nutzung der vom Browser angebotenen Funktionen.
jQuery-Beispiel
Unten haben wir unser vorheriges Beispiel mit JQuery umgesetzt.
Achten Sie jedoch darauf, den Code nicht durch das Weglassen der Syntax zu stark zu verkürzen.
<script>
$('#my-button').on('click', function(){
$(this).text('Clicked');
})
</script>
<button id="my-button">Not Clicked</button>Herzlichen Glückwunsch
Herzlichen Glückwunsch 🎉
In diesem Abschnitt haben wir begonnen, jQuery zu lernen, und verstanden, wie sehr jQuery uns das Leben erleichtern kann.
Bis zum nächsten Abschnitt!
Häufig gestellte Fragen
Ist die Lektion „jQuery für Anfänger“ kostenlos?
Ja — der vollständige Text von „jQuery für Anfänger“ 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 „jQuery für Anfänger“?
jQuery für Anfänger 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 „jQuery für Anfänger“?
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.