Document
<html>
<head>
<title>
„Beispielwebsite“
<body>
„Inhalt des HTML-Dokumentes (sichtbarer Bereich)“
IT-Zertifikat: Advanced Web Basics – jQuery Document Object Model (DOM)
Das Document Object Model (Dokumentobjektmodell, DOM) ist eine Programmierschnittstelle, die definiert, wie auf die Objekte zugegriffen wird, aus denen ein (HTML)-Dokument besteht. HTML-Dokumente verfügen über eine hierarchische Struktur eingebetteter Tags, die im DOM als ein Baum von Objekten dargestellt werden. So lässt sich das folgende HTML-Dokument
<html><head><title>Beispielwebsite</title><head>
<body>Inhalt des HTML-Dokumentes (sichtbarer Bereich)</body>
</html>
visualisieren als Baumstruktur:
Das Dokumentobjektmodell repräsentiert ein HTML-Dokument als einen Baum von Knotenobjekten (Elternknoten, Kindknoten (childNodes)).
jQuery
jQuery ist eine sehr umfangreiche JavaScript-Klassenbibliothek, die Funktionen zur Manipulation des DOM- Baumes (traversieren, Elemente auswählen, Elemente bearbeiten, etc.) bereitstellt. Die jQuery Bibliothek besteht aus einer einzigen Datei jquery-*.js (Download unter http://docs.jquery.com/Downloading_jQuery).
Vorteile von jQuery
jQuery ist Open Source (i.e. der Quellcode ist einsehbar).
jQuery ist frei: Die Klassenbibliothek ist lizensiert unter einer MIT-Lizenz und einer GNU General Public License (GPL).
jQuery – erste Schritte
Einbinden der jQuery Bibliothek in eine HTML-Seite
jQuery lässt sich auf zwei Weisen einbinden: Die erste Möglichkeit besteht darin, jQuery von der jQuery- Website http://jquery.com/ herunterzuladen, lokal zu speichern und über das <script> Tag einzubinden:
<script type="text/javascript" src="jquery-VERSIONSNUMMER.min.js"></script>
Die andere Möglichkeit besteht darin, jQuery als externe Ressource einzubinden:
<script type="text/javascript"
src="ajax.googleapis.com/ajax/libs/jquery/VERSIONSNUMMER/jquery.min.js ">
</script>
Ausführen von jQuery-Code nach dem Laden des DOM
Um sicherstellen zu können, dass der Browser das Dokumentobjektmodell vollständig geladen hat, verwenden wir den folgenden jQuery-Code:
<script type="text/javascript">
$(document).ready(function() {
// Hier kommt der jQuery Code rein, z.B.:
alert("Hello world!");
});
</script>
Elemente mit jQuery auswählen
Der einfachste Weg, ein bestimmtes Element oder eine Menge von Elementen in einem Dokument zu erhalten, ist die Verwendung eines CSS-Selektors:
jQuery(‘#meindiv’); Wähle den div-Container mit der ID meindiv aus jQuery(‘#meindiv p’); Wähle alle Absätze innerhalb von #meindiv aus
jQuery(‘#meindiv p a’); Wähle Hyperlinks innerhalb aller Absätze innerhalb von #meindiv aus jQuery(‘.meineclass‘); Wähle den div-Container bzw. das DOM-Element mit der Klasse
meineclass aus
Das Verhalten und die Darstellung von DOM-Elementen beeinflussen DOM-Elemente ausblenden:
jQuery('.beispielklasse').hide();
DOM-Elemente einblenden:
jQuery('.beispielklasse').show();
DOM-Elemente ein- oder ausblenden, je nach ihrem vorherigen Zustand:
jQuery('.beispielklasse').toggle();
DOM-Elemente löschen (Achtung, das DOM-Element ist anschließend tatsächlich gelöscht…):
jQuery('#meineID‘).remove();
Ein Element dem DOM hinzufügen:
jQuery('<p>Ein per jQuery generierter Absatz</p>').appendTo('body');
Den Inhalt eines DOM-Elementes setzen:
jQuery('#meineID‘).text('Hallo Welt');
Den Inhalt eines DOM-Elementes auslesen:
jQuery('#meineID‘).text();
Ein DOM-Element ersetzen:
jQuery('.beispielklasse').replaceWith('<div id="ersetztesDiv">Hallo</div>');
Ein DOM-Element anklickbar gestalten:
jQuery('#zweiteklasse').click(function() {
// An dieser Stelle befindet sich der jQuery-Code, der bei Klick ausgefuehrt wird jQuery('.beispielklasse').toggle();
});
jQuery und CSS – CSS per jQuery ändern:
jQuery('#zweiteklasse').css( {
'background-color' : '#cccccc', 'height' : '250px'
} );
Anwendungsbeispiel:
jQuery('#togglezweiteklasse').click(function() { jQuery('#zweiteklasse').css( {
});
Effekte
jQuery bietet einige Effekte und Animationsmöglichkeiten, um die Darstellung der DOM-Elemente anzupassen, u.a.: fadeIn, fadeOut, slideUp, slideDown.
Ein DOM-Element mit fadeOut langsam ausblenden:
jQuery('#beispielid').fadeOut('slow');
Ein DOM-Element mit fadeOut schnell ausblenden:
jQuery('#beispielid').fadeOut('fast);
Ein DOM-Element mit fadeOut langsam einblenden:
jQuery('#beispielid').fadeIn('slow');
Ein DOM-Element mit slideUp langsam einfahren:
jQuery('#beispielid').slideUp('slow');
Ein DOM-Element mit slideUp langsam ausfahren:
jQuery('#beispielid').slideDown('slow');
Mit slideToggle lassen sich DOM-Elemente situationsabhängig ein- bzw. ausfahren:
jQuery('#beispielid').slideToggle('slow');
Ohne Verwendung von slideToggle lässt sich der aktuelle Zustand des zu bearbeitenden DOM-Elementes erfahren über die jQuery-Funktion .is(). Im folgenden Beispiel wird über <button> die Sichtbarkeit des div- Containers #slidediv verändert:
<html>
[…]
<script>
$(document).ready(function(){
$(document.body).click(function () { if ($("#slidediv").is(":hidden")) { $("#slidediv").slideDown("slow");
} else {
$("#slidediv").hide();
} });
});
</script>
<style>
#slidediv {display: none;height: 250px;width: 250px;background-color: red;}
</style>
</head>
</body>
</html>
