jQuery-DOM-Manipulationen – 1
jQuery-DOM-Manipulationen
jQuery-DOM-Manipulationen – 1 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 in die Methoden
Guten Tag,
Bisher haben wir gesehen, wofür JQuery verwendet wird und wie der Selektor eingesetzt wird.
Sehen wir uns nun die Methoden an, mit denen wir das DOM manipulieren können.
text-Methode
text()-Methode
Mit der text()-Methode greifen wir auf den Inhalt eines HTML-Elements zu.
Verwenden Sie $ (selector).text(), um den Inhalt eines Elements auszulesen.
Außerdem dient die text-Methode dazu, den Inhalt eines Elements zu aktualisieren. Dazu genügt es, den neuen Inhalt als Argument an die text-Methode zu übergeben.
<h1 id="hello">Hello Coddy</h1>
<h2 id="target"></h2>
<script>
$(document).ready(function(){
/*
With the $ ('# hello') statement,
we selected the element with hello id
and set the element's content related
to the text method of this object to
the variable named result.
*/
var result = $('#hello').text();
/*
We find the element with the
target id in the DOM and assign the value
of the result variable to the
text method of this object.
*/
$('#target').text(result);
/*
As a result, we have assigned
the value of the h1 element
to the h2 element.
*/
});
</script>
Frage
html-Methode
html()-Methode
Unsere nächste Methode ist html().
Wie der Name bereits vermuten lässt, liefert sie das gesamte Element und nicht nur den Inhalt des ausgewählten Elements.
Definieren wir zunächst ein Beispiel für ein HTML-Element.
Es werden zwei HTML-Elemente mit den IDs base und target definiert. Anschließend, sobald das DOM geladen ist,
wird der gesamte HTML-Inhalt des Elements base kopiert und zum Element mit der ID target hinzugefügt.
<div id="base">
<p>Hello Coddy</p>
<p>I'm p element</p>
</div>
<div id="target"></div>
<script>
/*
Callback will run as son as
the DOM is loaded
*/
$(document).ready(function(){
//copy the base element HTML
var baseHTML = $('#base').html();
/* update target element
by using baseHTML value
*/
$('#target').html(baseHTML);
})
</script>Attributauswahl
attr()-Methode
Wir verwenden Attribute, um zusätzliche Eigenschaften für HTML-Elemente festzulegen.
Oft möchten wir beim Schreiben unseres Javascript-Codes auf die Werte dieser Attribute zugreifen.
In diesen Fällen verwenden wir die attr-Methode.
Lernen wir diese Methode anhand des folgenden Beispiels kennen.
<a href="https://www.coddykit.com"
target="_blank"
title="CoddyKit Web App" class="base">
Go CoddyKit
</a>
<br/>
<span id="link-title"></span>
<script>
/*
Callback will run as son
as the DOM is loaded
*/
$(document).ready(function(){
//Read link's title attribute
var linkTitle = $('a').attr('title');
/* update target element content
by using linkTitle value
*/
$('#link-title').text(linkTitle);
})
</script>Attribut
Das Festlegen neuer Attribute funktioniert ähnlich wie bei den zuvor kennengelernten Methoden text() und html().
Indem wir der beim Auslesen verwendeten Methode attr() ein Argument übergeben, können wir ein neues Attribut für unser Zielelement festlegen.
/*
The target attribute of the element with
my-link id has been passed the _blank value.
*/
// Mock for Judge0 Node environment
const element = { attr: function(name, value) { console.log(`Setting ${name} to ${value} for #my-link`); } };
const $ = (selector) => element;
$('#my-link').attr('target', '_blank');removeAttr
removeAttr()
Wir haben gelernt, wie man ein Attribut hinzufügt;
sehen wir uns nun an, wie man ein vorhandenes Attribut löscht.
Dafür verwenden wir die Methode removeAttr().
Sehen wir uns unser Beispiel an.
/*
All elements
with tag a have been deleted.
*/
// Simulated DOM for Node.js
const elements = [
{ tag: 'a', target: '_blank' },
{ tag: 'a', target: '_self' },
{ tag: 'p' }
];
elements.forEach(el => {
if (el.tag === 'a') delete el.target;
});
console.log(JSON.stringify(elements));val-Methode
val()-Methode
Formulare sind aus modernen Webanwendungen nicht wegzudenken. Mit der Methode val() lesen wir die von unseren Benutzern in Formularelemente eingegebenen Daten aus.
<input type="text" id="name"
name="yourname"
value="CoddyKit" />
<p>
Your name: <span id="target"></span>
</p>
<script>
/*
Callback will run as son as
the DOM is loaded
*/
$(document).ready(function(){
//copy the input elemens value
var yourName = $('#name').val();
/* update target element
text by using yourName value
*/
$('#target').text(yourName);
})
</script>Warnung
In unserer Lektion zur Ereignisbehandlung lernen wir, wie wir jede Eingabe abhören und an unser span-Element weitergeben.
Zusätzliche Informationen
Um den Wert eines input-Elements zu aktualisieren, übergeben wir, wie Sie vielleicht vermuten, Argumente an die val-Methode.
const $ = (selector) => ({
val: (value) => console.log(`Set ${selector} to ${value}`)
});
$('#name').val('New value')Herzlichen Glückwunsch
Herzlichen Glückwunsch 🎉
Wir haben begonnen, DOM-Manipulationen zu lernen.
Im nächsten Abschnitt setzen wir das Lernen von DOM-Manipulationen mit jQuery fort.
Häufig gestellte Fragen
Ist die Lektion „jQuery-DOM-Manipulationen – 1“ kostenlos?
Ja — der vollständige Text von „jQuery-DOM-Manipulationen – 1“ 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-DOM-Manipulationen – 1“?
jQuery-DOM-Manipulationen 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-DOM-Manipulationen – 1“?
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.