Universität zu KölnHistorisch-Kulturwissenschaftliche InformationsverarbeitungIT-Zertifikat der Phil.-Fak.: Advanced Web B...
Universität zu KölnHistorisch-Kulturwissenschaftliche InformationsverarbeitungIT-Zertifikat der Phil.-Fak.: Advanced Web B...
Universität zu KölnHistorisch-Kulturwissenschaftliche InformationsverarbeitungIT-Zertifikat der Phil.-Fak.: Advanced Web B...
Universität zu KölnHistorisch-Kulturwissenschaftliche InformationsverarbeitungIT-Zertifikat der Phil.-Fak.: Advanced Web B...
Nächste SlideShare
Wird geladen in …5
×

IT-Zertifikat: Advanced Web Basics - Kurzreferenz jQuery

575 Aufrufe

Veröffentlicht am

Veröffentlicht in: Bildung
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
575
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
105
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

IT-Zertifikat: Advanced Web Basics - Kurzreferenz jQuery

  1. 1. Universität zu KölnHistorisch-Kulturwissenschaftliche InformationsverarbeitungIT-Zertifikat der Phil.-Fak.: Advanced Web BasicsJan G. Wieners, MA - jan.wieners@uni-koeln.de1/4IT-Zertifikat: Advanced Web Basics – jQueryDocument 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 dargestelltwerden. 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)).jQueryjQuery ist eine sehr umfangreiche JavaScript-Klassenbibliothek, die Funktionen zur Manipulation des DOM-Baumes (traversieren, Elemente auswählen, Elemente bearbeiten, etc.) bereitstellt. Die jQuery Bibliothekbesteht 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 GeneralPublic License (GPL). jQuery normalisiert die Unterschiede zwischen Webbrowsern: Wir brauchen unsere Skripten nicht füreinzelne Browser anzupassen. […] „Die Lernkurve ist nicht allzu steil, weil jQuery auf Konzepten aufbaut, die die meisten Entwickler undDesigner schon kennen (zum Beispiel CSS und HTML).“ (jQuery Community Experts: jQueryKochbuch. Köln: O’Reilly Verlag, 2010. S. 3.)Document<html><head><title>„Beispielwebsite“<body>„Inhalt des HTML-Dokumentes(sichtbarer Bereich)“
  2. 2. Universität zu KölnHistorisch-Kulturwissenschaftliche InformationsverarbeitungIT-Zertifikat der Phil.-Fak.: Advanced Web BasicsJan G. Wieners, MA - jan.wieners@uni-koeln.de2/4jQuery – erste SchritteEinbinden der jQuery Bibliothek in eine HTML-SeitejQuery 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 DOMUm 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ählenDer einfachste Weg, ein bestimmtes Element oder eine Menge von Elementen in einem Dokument zuerhalten, ist die Verwendung eines CSS-Selektors:jQuery(‘#meindiv’);  Wähle den div-Container mit der ID meindiv ausjQuery(‘#meindiv p’);  Wähle alle Absätze innerhalb von #meindiv ausjQuery(‘#meindiv p a’);  Wähle Hyperlinks innerhalb aller Absätze innerhalb von #meindiv ausjQuery(‘.meineclass‘);  Wähle den div-Container bzw. das DOM-Element mit der Klassemeineclass aus
  3. 3. Universität zu KölnHistorisch-Kulturwissenschaftliche InformationsverarbeitungIT-Zertifikat der Phil.-Fak.: Advanced Web BasicsJan G. Wieners, MA - jan.wieners@uni-koeln.de3/4Das Verhalten und die Darstellung von DOM-Elementen beeinflussenDOM-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 wirdjQuery(.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. Universität zu KölnHistorisch-Kulturwissenschaftliche InformationsverarbeitungIT-Zertifikat der Phil.-Fak.: Advanced Web BasicsJan G. Wieners, MA - jan.wieners@uni-koeln.de4/4EffektejQuery bietet einige Effekte und Animationsmöglichkeiten, um die Darstellung der DOM-Elementeanzupassen, 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-Elementeserfahren ü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 Knofdruckangezeigt - und verborgen</div></body></html>

×