IT-Zertifikat: Advanced Web Basics - Kurzreferenz jQuery

Universität zu Köln
Historisch-Kulturwissenschaftliche Informationsverarbeitung
IT-Zertifikat der Phil.-Fak.: Advanced Web Basics
Jan G. Wieners, MA - jan.wieners@uni-koeln.de
1/4
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 normalisiert die Unterschiede zwischen Webbrowsern: Wir brauchen unsere Skripten nicht für
einzelne Browser anzupassen.
 […]
 „Die Lernkurve ist nicht allzu steil, weil jQuery auf Konzepten aufbaut, die die meisten Entwickler und
Designer schon kennen (zum Beispiel CSS und HTML).“ (jQuery Community Experts: jQuery
Kochbuch. Köln: O’Reilly Verlag, 2010. S. 3.)
Document
<html>
<head>
<title>
„Beispielwebsite“
<body>
„Inhalt des HTML-Dokumentes
(sichtbarer Bereich)“

2/4
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

3/4
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( {
'background-color' : '#cccccc',
'height' : '250px'
});
});

4/4
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>
<button>Bitte hier klicken</button>
<div id="slidediv">
Der Inhalt dieses Div-Containers wird per Knofdruck
angezeigt - und verborgen
</div>
</body>
</html>

IT-Zertifikat: Advanced Web Basics - Kurzreferenz jQuery

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (8)

Mehr von Institute for Digital Humanities, University of Cologne

Mehr von Institute for Digital Humanities, University of Cologne (20)

IT-Zertifikat: Advanced Web Basics - Kurzreferenz jQuery