jQuery

aus Wikipedia, der freien Enzyklopädie
Wechseln zu: Navigation, Suche
jQuery
Logo von jQuery
Entwickler John Resig
Aktuelle Version 1.11.1 / 2.1.1[1]
(1. Mai 2014)
Betriebssystem plattformunabhängig
Programmier­sprache JavaScript
Kategorie Bibliothek
Lizenz MIT
www.jquery.com

jQuery (auch: jQuery Core) ist eine freie JavaScript-Bibliothek, die Funktionen zur DOM-Navigation und -Manipulation zur Verfügung stellt. Die von John Resig entwickelte Bibliothek wurde im Januar 2006 auf dem BarCamp (NYC) in New York veröffentlicht und wird laufend weiterentwickelt.

Derzeit werden mit 1.x und 2.x zwei unabhängige Versionsstränge gepflegt, die sich hinsichtlich der Browserkompatibilität unterscheiden. Die Versionen 1.x (ab 1.9) und 2.x besitzen eine kompatible API.

Verbreitung[Bearbeiten]

Im September 2008 haben Microsoft und Nokia angekündigt, jQuery in ihren Produkten zu verwenden.[2] Microsoft hat jQuery in der Entwicklungsumgebung Visual Studio[3] in Verbindung mit dem ASP.NET MVC Framework und ASP.NET Ajax integriert[4][5] und Nokia plant, es in seine Web-Runtime-Plattform zu integrieren. jQuery wird in vielen Content-Management-Systemen und Webframeworks bereits mitgeliefert (z. B. WordPress[6], MediaWiki[7] oder Drupal[8]).

jQuery ist die meistverwendete JavaScript-Bibliothek.[9] Jede zweite Website[10] und drei Viertel der 10.000 meistbesuchten Websites nutzen jQuery (Stand: Juli 2014).[11]

jQuery 2.0[Bearbeiten]

Seit der Veröffentlichung der Alpha-Version 1.0 im Juni 2006[12] behielt das Framework die Hauptversion 1. Im April 2013 erschien jQuery 2.0.

Aufgrund besserer JavaScript-Unterstützung moderner Webbrowser (zum Beispiel Zugriffe auf DOM-Knoten) konnte der Quellcode von jQuery 2.0 grundlegend umstrukturiert und aufgeräumt werden. Dazu wurde die Unterstützung für ältere Browser, wie den Internet Explorer bis einschließlich Version 8 (und der Kompatibilitätsansicht in aktuelleren Versionen), entfernt. Weil diese Browser noch teilweise hohe Verwendungszahlen besitzen, wird aus Kompatibilitätsgründen die 1.x-Versionslinie weiterhin gewartet und aktualisiert. Damit wird die 1.x-Versionslinie nicht gänzlich abgelöst, sondern parallel weiterentwickelt.[13]

Funktionen[Bearbeiten]

jQuery bietet JavaScript-Entwicklern folgende Funktionen:

  • Elementselektion im Document Object Model über die Sizzle Selector Engine, die weitgehend den CSS-3-Selektoren entspricht
  • Document-Object-Model-Manipulation
  • Erweitertes Event-System
  • Hilfsfunktionen wie zum Beispiel die each-Funktion
  • Animationen und Effekte
  • Ajax-Funktionalitäten
  • Erweiterbarkeit durch zahlreiche freie Plug-ins, etwa jQuery UI für die einheitliche Gestaltung von Benutzeroberflächen

Benutzung[Bearbeiten]

Die jQuery-Basisbibliothek besteht aus einer JavaScript-Datei, in der alle grundlegenden DOM-, Ereignis-, Effekt- und Ajax-Funktionen enthalten sind.

Nachdem die das Framework enthaltene Datei im HTML-Dokument eingebunden ist, kann jQuery benutzt werden. Typischerweise wird durch den Zugriff auf Objekte mit der $-Funktion oder, um Kompatibilitätsproblemen mit anderen Bibliotheken aus dem Weg zu gehen und eine bessere Lesbarkeit zu erreichen, mit der jQuery-Funktion ein Objekt erzeugt. Dieses jQuery-Objekt kann dank Fluent Interfaces an andere Funktionen übergeben werden.

Um mit mehreren Bibliotheken, die das $-Zeichen als Aufruf nutzen, arbeiten zu können, kann man dieses bei jQuery deaktivieren:

// gibt das $-Zeichen für andere Bibliotheken frei (kann auch mit der $-Notation aufgerufen werden)
jQuery.noConflict();

Eine typische Manipulation von DOM-Elementen beginnt mit der $- oder jQuery-Funktion, die als Parameter einen CSS-ähnlichen Selektor erwartet. Zurückgegeben werden dann übereinstimmende DOM-Elemente, die dann mit jQuery-Methoden manipuliert werden können. Beispiel:

$("div.test, p.quote").addClass("blue").slideUp("slow");
// oder auch
jQuery("div.test, p.quote").addClass("blue").slideUp("slow");

In diesem Beispiel werden alle div-Elemente mit der Klasse test sowie alle p-Elemente mit der Klasse quote selektiert. Dann wird jedem der gefundenen Elemente die CSS-Klasse blue hinzugefügt. Abschließend wird das vertikale Zusammenklappen dieser Elemente animiert.

Zusätzlich existieren globale Hilfsfunktionen. Diese können mit Hilfe der $-/jQuery-Funktion aufgerufen werden. Im folgenden Beispiel-Script wird die each-Funktion demonstriert:

var meinArray = [1, 2, 3];
$.each(meinArray, function() {
  document.write(this + 1);
});

Dieses Beispiel schreibt 234 in das Dokument.

Ajax-Funktionalitäten können mit Hilfe von $.ajax aufgerufen werden. Im unten stehenden Beispiel erfolgt eine asynchrone HTTP-POST-Anfrage an ein PHP-Script. Ist der Aufruf erfolgreich, wird die Antwort des PHP-Scriptes mit einem Hinweisfenster ausgegeben.

$.ajax({
  type: "POST",
  url: "beispiel.php",
  data: "name=Mustermann&location=Berlin",
  success: function(response){
    alert( "Daten gespeichert: " + response );
  }
});

Mit Hilfe von jQuery können den DOM-Elementen auch Aktionen (englisch Events) hinzugefügt werden:

$(document).ready(function() {
  $("div.test a").on('click', function() {
    alert("Hello world!");
  });
});

In diesem Beispiel wird nach dem Laden der DOM-Struktur jedem „a“-Element, das sich innerhalb von div-Elementen mit der Klasse „test“ befindet, ein Event-Listener zugewiesen, der beim Klick auf das Element eine Nachricht ausgibt. Der Vorteil dieser Umsetzung besteht darin, dass das Klickverhalten an einer zentralen Stelle gesteuert werden kann und nicht an dem HTML-Element selbst hinterlegt ist.

Bezeichnung[Bearbeiten]

Ursprünglich sollte die Bibliothek jSelect genannt werden. Da die Domain für diesen Namen schon vergeben war, entschied sich Entwickler John Resig für den Namen jQuery.[14]

Siehe auch[Bearbeiten]

Literatur[Bearbeiten]

Weblinks[Bearbeiten]

 Commons: JQuery – Sammlung von Bildern, Videos und Audiodateien

Einzelnachweise[Bearbeiten]

  1. jQuery 1.11.1 and 2.1.1 Released. 1. Mai 2014, abgerufen am 2. Mai 2014 (englisch).
  2. John Resig: jQuery, Microsoft, and Nokia. jQuery, 28. September 2008, abgerufen am 14. April 2011.
  3. jQuery and Microsoft. 28. September 2008, abgerufen am 29. September 2008.
  4. ASP.NET 4 and Visual Studio 2010 Web Development Overview. Abgerufen am 16. März 2013 (PDF).
  5. Better Coding with Visual Studio 2010. Abgerufen am 16. März 2013.
  6. Nutzung von jQuery in WordPress. Abgerufen am 16. März 2013.
  7. jQuery im MediaWiki. Abgerufen am 16. März 2013.
  8. Working with JavaScript and jQuery. Drupal, abgerufen am 16. März 2013.
  9. Usage of javascript libraries for websites. Abgerufen am 7. Mai 2010.
  10. jQuery now runs on every second website. Abgerufen am 3. September 2012.
  11. jQuery Usage Statistics. BuiltWith.com, abgerufen am 5. August 2013 (englisch).
  12. jQuery 1.0 Alpha Release Ankündigung der Alphaversion 1.0 (englisch), abgerufen am 2. April 2013.
  13. jQuery 1.10 und 2.0.1: Synchronisierte Features und Cordova-Fix abgerufen am 27. Mai 2013.
  14. John Resig: BarCampNYC Wrap-up. 16. Januar 2006, abgerufen am 16. März 2013 (Kommentar des Entwicklers John Resig).