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 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:
  • http://www.ixedit.com/ (JavaScript-basiert im Browser)

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

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

jQuery einbinden

• Download und Bereitstellung der JavaScript-Bibliothek im eigenen Webspace

<script type="text/javascript" src="jquery-2.1.4.min.js"></script>

• Einbettung in der config.inc https://www.tu-chemnitz.de/urz/www/config.html
• weitere Informationen unter: https://www.tu-chemnitz.de/urz/www/jquery.html

• siehe Google AJAX Libraries API

Der jQuery-wrapper

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

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

$("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

• 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

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

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

jQuery erweiteren

jQuery und andere JavaScript-Bibliotheken

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