Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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

626 Aufrufe

Veröffentlicht am

Veröffentlicht in: Bildung
  • Als Erste(r) kommentieren

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

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>

×