Mittendrin.

Zurück

Flurfunk der eXperts.

Hier erfahren Sie mehr über eXperts, Technologien und das wahre Leben in der SDX.

SDX Web Dojo #1: jQuery Basics

18.07.201108:21 Uhr , Patric Schouler

Der monatliche SDX Office Day stellt einen wichtigen Tag für jeden eXpert dar. Man kommt in den Arbeitsräumen der SDX zusammen, um sich auszutauschen und Wissen untereinander weiterzugeben. Am 01.07. hat diese Wissensweitergabe ein weiteres Format am Office Day erhalten: das SDX Web Dojo.

Ziel des Web Dojos ist es, den eXperts in knapper Form (max. 45 Minuten) kurz und prägnant Wissen zu einem spezifischen Aspekt aktuellster Web-Technologien (HTML5, jQuery, ASP.NET MVC, …) weiterzugeben. Das soll einen Einblick in die jeweilige Technologie geben und Lust auf mehr machen. Es ist geplant, zukünftig an jedem Office Day ein Web Dojo abzuhalten und so den Austausch zu aktuellsten Web-Technologien in der SDX zu fördern.

Bei unserem ersten Web Dojo am 01.07. drehte sich alles um die Grundlagen von jQuery: was ist jQuery, warum braucht man es, was sind Selektoren und wie können Events an Elemente gebunden werden. Einen Teil des Wissens davon möchte ich hier weitergeben.

jQuery – DOM-Manipulation leicht gemacht

jQuery ist eine sehr populäre JavaScript-Bibliothek, die vor allem zur Low-Level-Bearbeitung des DOM-Baums einer HTML-Seite eingesetzt werden kann. Sie zeichnet sich durch eine eingängige Syntax sowie eine sehr einfache Selektion und Manipulation von DOM-Elementen aus. Die Bibliothek ist Cross-Browser-kompatibel und auf allen "modernen" Browsern bis hinunter zum IE6 konsistent einsetzbar, ohne dass sich der Entwickler um den Zielbrowser größere Gedanken machen muss. Daneben gibt es eine Vielzahl von Plugins, welche jQuery sehr funktionell machen und die Entwicklung dynamischer Webseiten stark vereinfachen. jQuery ist Open Source und wird von der Community weiterentwickelt. Zudem stellt Microsoft Support für jQuery bereit, indem sie u.a. Intellisense für jQuery-Code in Visual Studio liefern und aktiv an der Weiterentwicklung beteiligt sind. Das Potential von jQuery ist enorm und jeder Entwickler, der heute JavaScript lernt bzw. moderne Web-Entwicklung betreibt, wird nur schwerlich daran vorbeikommen.

jQuery-Wrapper

jQuery stellt eine sehr intuitive API zur Verfügung, mit der DOM-Elemente selektiert werden können. Grundlage dafür bildet zunächst die $(…)-Syntax. Mit $(elem) (bzw. gleichbedeutend jQuery(elem)) wird ein jQuery-Wrapper um das jeweilige DOM-Element gelegt, mit $(document) z.B. um das vollständige DOM der Seite. Damit wird die jQuery-Funktionalität (Event-Bindings, Manipulierungs-Funktionalität, etc.) auf dem eingeschlossenen DOM-Element zur Verfügung gestellt.

Zur Einbindung von jQuery-Funktionalität kann man sich mit $(document).ready(function(){…}) bzw. abgekürzt: $(function(){…}) in die Seite einhängen. Die jeweilige Funktion darin wird ausgeführt, wenn das DOM der HTML-Seite vollständig geladen wurde, noch bevor Ressourcen wie z.B. Bilder heruntergeladen werden.

Selektion ist Trumpf

Eine hohe Flexibilität und Einfachheit des Zugriffs auf DOM-Elemente stellen dann die sogenannten Selektoren dar. Innerhalb von $(…) kann man ähnlich zu CSS Statements angeben, um aus dem DOM einer Seite ein oder mehrere Elemente zu selektieren und dann Aktionen auf diesen auszuführen. Ein paar der wichtigsten Selektoren sind nachfolgend aufgeführt:

  • $(‚div‘): Tag-Selektor; selektiert alle div-Tags des Dokuments
  • $(‚.highlighted‘): Class-Selektor; selektiert alle DOM-Elemente, welchen die CSS-Klasse "highlighted" zugeordnet ist
  • $(‚#myelem‘): ID-Selektor; selektiert alle DOM-Elemente, welche die ID "myelem" besitzen
  • $(‚a[href="xyz.html"]‘): Attribut-Selektor; selektiert alle Anchor-Tags, welche als href den Wert "xyz.html" gesetzt haben
  • $(‚a[href*="xyz.html"]‘): Attribut-Selektor; selektiert alle Anchor-Tags, welche als href den Wert "xyz" enthalten
  • $(‚div a‘): selektiert alle Anchor-Tags, welche auf beliebiger Ebene innerhalb eines div’s liegen
  • $(‚div > a‘): selektiert alle Anchor-Tags, welche direkte Kind-Elemente in einem div sind
  • $(‚tr:even‘), $(‚tr:odd‘): selektiert alle Table-Rows (tr), deren Index in der Resultatmenge gerade (even) bzw. ungerade (odd) ist
  • $(‚tr:eq(1)‘): selektiert das Element mit dem Index 1 aus der Resultat-Menge aller Table-Rows (beginnt bei 0)
  • $(’span:contains("xyz")‘): selektiert alle span-Elemente, welche den Text "xyz" beinhalten
  • Noch viel mehr Selektoren: jQuery-Dokumentation

Events, sie zu binden

Entgegen manuellem JavaScript werden Event-Bindings nicht direkt im HTML-Code verankert, sondern finden in jQuery ebenfalls über Selektoren statt.

Ein direktes Binding kann dabei über $(elem).event(function(){…}) erfolgen, z.B. fängt $(‚input‘).keyup(function(){…}) alle Tastaturanschläge auf allen input-Elementen ab und führt bei Eintritt des Ereignisses die entsprechende Funktion aus.

Alternativ lassen sich Event-Bindings auch über $(elem).bind(‚event‘, function(){…}) erstellen, z.B. mit $(‚input‘).bind(‚keyup‘, function(){…}), äquivalent ist hier auch ein Entfernen von Event-Handlern mittels $(elem).unbind(‚event‘) möglich.

Innerhalb eines Event Handlers hat man dabei mit $(this) Zugriff auf das DOM-Element, welches das Event ausgelöst hat.

WebDojo1Direkt ausprobieren!

Einige weitere grundlegende jQuery-Funktionen sind in der Online-Demo des Web Dojos auf jsFiddle enthalten, welches direkt angesehen, ausprobiert und abgeändert werden kann. In dieser Demo wird die Hintergrundfarbe beim Hovern über ein input-Element über eine CSS-Klasse geregelt, zudem wird ein Header-Text aktualisiert, sobald der Benutzer einen Namen eingibt.

Viel Spaß beim Rumprobieren und den ersten jQuery-Schritten: Online-Demo auf jsFiddle

Insgesamt kann man sagen: gerade wenn man den Krampf mit "manuellem" JavaScript kennt, wird man jQuery lieben! "Write less, do more!" – dieses Credo von jQuery wird voll erfüllt, weshalb diese Bibliothek im Repertoire keines modernen Web-Entwicklers fehlen sollte.

0 Kommentare
Dein Kommentar wartet auf Freischaltung.

Artikel kommentieren

Zurück

Tag Cloud


Kontakt aufnehmen


Anrufen

Gerne beantworten wir Ihre Fragen in einem persönlichen Gespräch!


Kontakt aufnehmen

Schreiben Sie uns eine E-Mail mit Ihren Fragen und Kommentaren!