Universitätsrechenzentrum
jQuery

Grundlagen

  • jQuery ist darauf ausgerichtet, HTML-Elemente einer Webseite zu selektieren und auf diese ausgewählten Elemente Operationen anzuwenden
  • Die Entwickler von jQuery legen besonderes Augenmerk auf die Funktionalität unter verschiedenen Browsern, browserspezifische Besonderheiten werden transparent gelöst
  • Die Funktionalität kann mittels Plugins-Schnittstelle erweitert werden
  • jQuery-Funktionen werden analog JavaScript in HTML-Dokumente eingebettet oder durch einen Link auf eine .js -Datei eingebunden

Werkzeuge

Erstellen und Bearbeiten

  • Erstellen und Bearbeiten von jQuery-Funktionen in HTML-Dokumente oder externen JavaScript-Dateien mittels Texteditor
  • Einsatz von HTML-Editoren wie Bluefish, Kompozer u.ä. ist möglich, sofern diese die Bearbeitung des HTML-Quellcode unterstützten
  • interaktive Design-Werkzeuge:

Verifizieren

  • Entwicklung und Test mit dem favorisierten Browser
  • Abschliessende Test mit verschiedenen Browsern

Debuggen

  • Firefox: Extras → Web-Entwickler → Fehlerkonsole ([STRG]+[SHIFT]+[J]) für die Ananlyse des JavaScript-Code (Syntaxfehler, fehlende Variablenbezeichner, ...)

Gute Dienste bei der Codeanalyse und -testung leistet die Firefox-Erweiterung: Firebug
Für Firebug gibt es eine auf jQuery ausgerichtete Erweiterung : FireQuery

jQuery einbinden

Die jQuery-Funktionalität ist als JavaScript-Code implementiert.
Die Bibliothek steht in komprimierten Form als jquery-<version>.min.js für produktiven Einsatz und als "lesbare" Entwicklerversion jquery-<version>.js auf http://jquery.com/ zum Download bereit.

Einbinden als lokale Quelle

  • Download und Bereitstellung der JavaScript-Bibliothek im eigenen Webspace 
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>

zentrale Webserver der TUC

Einbindung über Content Delivery Network (CDN)

Der jQuery-wrapper

Anforderung

  • Auswahl von Elementen oder Gruppen von Elementen einer Webseite
  • Auswahl nach Attributen oder der Position innerhalb eines HTML-Dokumentes
→ Selector

Beispiel: Alle Links <a> innerhalb eines Absatz <p>

Notation

jQuery(selector) oder $(selector)
$(p a)

$() ist ein Alias für jQuery()

Die $() -Funktion liefert ein JavaScript-Objekt, welches eine Array der ausgewählten DOM-Elemente enthält. (wrapped set)

Auf das zurückgelieferte Objekt können eine Vielzahl vordefinierter Methoden (jQuery-Kommandos) angewendet werden. 

$("img.kurz_sichtbar").fadeOut();

Als besonderes Feature können jQuery-Kommandos nacheinander auf die ursprüngliche Auswahl angewendet werden. (jQuery chains) 

$("img.kurz_sichtbar").fadeOut().addClass("removed");

Hilfsfunktionen

  • neben der Auswahl von Elementen stellt jQuery eine Reihe nützlicher Funktionen bereit 

$.trim(myString);

  • Die Bindung der Funktionen an den Namensraum von jQuery erlaubt die Koexistenz mit anderen client-side Bibliotheken.

Der document ready handler

Problem: Wann soll die Ausführung des JavaScript-Code erfolgen?

  • traditionell wird der window.onload -Handler benutzt, wobei die Funktionen erst nach dem vollständigen laden aller ELemente ausgeführt werden.
    (große Bilder mit langer Ladezeit verzögern die Ausführung)
  • jQuery stellt einen Methode der document -Instanz bereit, bei welcher der DOM-Baum bereits existiert, aber bspw. das Laden von Bildern noch nicht abgeschlossen sein muß. 

$(document).ready(function() {
   ... code ...
});

Erzeugen von DOM-Elementen

  • jQuery bietet die Möglichkeit, DOM-Elemente "on the fly" zu erzeugen: 

$("<p>Ein neuer Absatz, ...</p>")

  • dabei muß das kreierte Element aber noch im DOM-Baum positioniert werden:
    (z.B. nach einem Absatz mit der ID nach_mir) 

$("<p>Ein neuer Absatz, ...</p>").insertAfter("#nach_mir");

unobtrusive (unaufdringliches) JavaScript

jQuery verfolgt mit dem Ansatz, den JavaScript-Teil vom HTML-Dokument zu trennen das Konzept des unaufdringlichen JavaScripts.
Damit ergibt sich die Möglichkeit, HTML-Dokumente zu erstellen, welche auch bei deaktiviertem JavaScript funktionieren. 

<script type="text/javascript">
$(document).ready(function() {
  $("#form").submit(function(evt){
    if (!validateForm()) {
      evt.preventDefault();
    }
 });
});

<form id="form" action="form.php" method="post">
...

Validierung von Formularen im Browser verbessern die Bedienbarkeit, befreien aber nicht von der Validierung der tatsächlich übermittelten Daten!

jQuery erweiteren

Erweiterung der jQuery-Funktionalität durch Plugins.
weiter Informationen: http://docs.jquery.com/Plugins/Authoring

jQuery und andere JavaScript-Bibliotheken

jQuery reserviert im globalen Namensraum die Variablen $ und jquery.
Um Kollisionen mit anderen JavaScript-Bibliotheken zu verhindern kann die Variable $ umbenannt werden.
(Im Beispiel wird das jQuery-Objekt über jq referenziert.) 

<script type="text/javascript">
  var jq = jQuery.noConflict();
</script>

TUCaktuell