Webengineering. jquery

Transkript

1 Webengineering jquery Marcel Vilas 1 DHBW - Stuttgart

2 jquery - Allgemein jquery ist eine JavaScript-Bibliothek (API) jquery ist eine Funktion (Funktionen sind Objekte) Vorteile: einfacher als vanilla JavaScript schnelle Selektion von DOM-Elementen Kümmert sich um Browserkompatibilität Einfache DOM-Manipulation performant 60% der bekanntesten Seiten benutzen jquery API Dokumentation: api.jquery.com 2

3 jquery - Allgemein jquery Module jquery API jquery UI API jquery Mobile API junit API jquery Core API: Bietet alle Basisfunktionalitäten Bietet UI Funktionalitäten (Animationen, Effekte, ) basieren auf jquery. Hilft beim Aufbau von Weblayouts für mobile Endgeräte. Unit-Test Suite für Javascript. 3

4 jquery - Beispiel Einfügen eines Elements im DOM: <script type= text/javascript"> // Vanilla JavaScript var div = document.createnode('div'); div.innerhtml = "Hello World!"; var parent = document.queryselector('#parent'); parent.appendchild(div); </script> <script type="text/javascript"> // jquery $('#parent').append("<div>hello World!</div>"); </script> 4

5 Das jquery Objekt: jquery oder $ ist das sogenannte jquery-objekt Das jquery-objekt bekommt einen Parameter: $(parameter) Das jquery-objekt gibt immer eine jquery-collection (Array) mit zusätzlichen Methoden und Objekten zurück Parameter: string function DOMElement Methoden: $.ajax() $.post() $.getjson() 5

6 jquery - Einbindung Lokal: <script type= text/javascript" src="js/jquery.min.js"></script> Offiziel: <script type= text/javascript" src="//code.jquery.com/jquery min.js"></script> CDN (Content Delivery Network): <script type="text/javascript"> src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> Vorteile: schnellere Server & nutzt das Browser-Caching jquery.min: komprimierte Datei, dadurch schneller geladen 6

7 Selektion: jquery $(string) Selektor Möglichkeiten für den Selektor: $('tag') $('.class') $('#id') Collection mit allen Elementen eines Tags Collection mit allen Elementen einer CSS-Klasse Collection mit einem Element, das die gegebene ID hat 7

8 Selektion: ggp c1 gp p e c2 $('#e').parent() $('#e').parents([selector]) $('#e').children([selector]) $('#e').find([selector]) $('#e').siblings([selector]) g1c1 g1c2 g2c2 8

9 Selektion: ggp gp $('#e').parent() p e Selektiert das Elternelement c1 c2 g1c1 g1c2 g2c2 9

10 Selektion: ggp gp $('#e').parents() $( #e').parents('#gp') p e Selektiert alle Elternelemente Kann durch Selektor eingegrenzt werden c1 c2 g1c1 g1c2 g2c2 10

11 Selektion: ggp gp $('#e').children() $( #e').children('#c2') p c1 e c2 Selektiert alle unmittelbaren Kindelemente Kann durch Selektor eingegrenzt werden g1c1 g1c2 g2c2 11

12 Selektion: ggp gp $('#e').find() $( #e').find('#g2c2') p e Selektiert alle Nachfahrenelemente Kann durch Selektor eingegrenzt werden c1 c2 g1c1 g1c2 g2c2 12

13 Selektion: ggp gp $('#e').siblings() $( #e').siblings('#er') p el e er Selektiert alle Geschwisterelemente Kann durch Selektor eingegrenzt werden c1 c2 g1c1 g1c2 g2c2 13

14 DOM-Manipulation: DOMElement.html([string h]); Erfragen/Setzen des HTML innerhalb des gegebenen Elements. DOMElement.text([string s]); Erfragen/Setzen des Texts innerhalb des gegebenen Elements. DOMElement.css(string p [, string v]); Erfragen/Setzen einer CSS-Eigenschaft p [mit Wert v]. DOMElement.remove(); Entfernen des gegebenen Elements. 14

15 DOM-Manipulation: DOMElement.append(mixed); Einfügen eines Kindelements am Ende des gegebenen Elements. DOMElement.prepend(mixed); Einfügen eines Kindelements am Anfang des gegebenen Elements. DOMElement.insertBefore(mixed); Einfügen eines Geschwisternelements vor dem gegebenen Elements. DOMElement.insertAfter(mixed); Einfügen eines Geschwisternelements nach dem gegebenen Elements. 15

16 DOM-Manipulation: DOMElement.attr(string p [, string v]); Erfragen/Setzen des HTML-Attributs p [mit Wert v]. DOMElement.on(event e [, selector s][, data d], handler f); Registrieren eines Eventhandlers mit Event e und Callback f. 16