jQuery - jQuery

jQuery

Originalautor(en)	John Resig
Entwickler	Das jQuery-Team
Erstveröffentlichung	26. August 2006 ; vor 15 Jahren ( 2006-08-26 )
Stabile Version	3.6.0 / (2. März 2021 ; vor 7 Monaten ) ( 2021-03-02 )
Repository
Geschrieben in	JavaScript
Plattform	Siehe § Browserunterstützung
Größe	27–274 KB
Typ	JavaScript-Bibliothek
Lizenz	MIT
Webseite	jquery .com

jQuery ist eine JavaScript-Bibliothek, die entwickelt wurde, um das Durchlaufen und Bearbeiten von HTML- DOM- Baum sowie die Ereignisbehandlung , CSS-Animation und Ajax zu vereinfachen . Es handelt sich um kostenlose Open-Source-Software , die die freizügige MIT-Lizenz verwendet . Im Mai 2019 wird jQuery von 73 % der 10 Millionen beliebtesten Websites verwendet. Die Webanalyse zeigt, dass es sich um die mit Abstand am weitesten verbreitete JavaScript-Bibliothek handelt, die mindestens 3- bis 4-mal mehr verwendet wird als jede andere JavaScript-Bibliothek.

Die Syntax von jQuery soll es einfacher machen, in einem Dokument zu navigieren, DOM- Elemente auszuwählen , Animationen zu erstellen , Ereignisse zu behandeln und Ajax- Anwendungen zu entwickeln. jQuery bietet Entwicklern auch Funktionen zum Erstellen von Plug-Ins zusätzlich zur JavaScript-Bibliothek. Auf diese Weise können Entwickler Abstraktionen für Interaktionen und Animationen auf niedriger Ebene, erweiterte Effekte und thematische Widgets auf hoher Ebene erstellen. Der modulare Ansatz der jQuery-Bibliothek ermöglicht die Erstellung leistungsstarker dynamischer Webseiten und Webanwendungen.

Der Satz von jQuery-Kernfunktionen – DOM-Elementauswahl, Traversierung und Manipulation –, die durch seine Selektor-Engine (ab Version 1.3 „Sizzle“ genannt) ermöglicht, hat einen neuen „Programmierstil“ geschaffen, der Algorithmen und DOM-Datenstrukturen vereint. Dieser Stil beeinflusste die Architektur anderer JavaScript-Frameworks wie YUI v3 und Dojo und stimulierte später die Erstellung der Standard- Selectors-API . Später wurde dieser Stil durch eine tiefere Algorithmus-Daten-Fusion in einem Erben von jQuery, dem D3.js- Framework, erweitert.

Microsoft und Nokia bündeln jQuery auf ihren Plattformen. Microsoft fügt es mit Visual Studio für die Verwendung in Microsofts ASP.NET AJAX- und ASP.NET MVC- Frameworks hinzu, während Nokia es in die Web Run-Time-Widget-Entwicklungsplattform integriert hat.

Überblick

jQuery ist im Kern eine Manipulationsbibliothek für das Document Object Model (DOM). Das DOM ist eine Baumstrukturdarstellung aller Elemente einer Webseite. jQuery vereinfacht die Syntax zum Suchen, Auswählen und Bearbeiten dieser DOM-Elemente. jQuery kann beispielsweise verwendet werden, um ein Element im Dokument mit einer bestimmten Eigenschaft zu finden (z. B. alle Elemente mit einem h1- Tag), eines oder mehrere seiner Attribute (z. B. Farbe, Sichtbarkeit) zu ändern oder es auf ein Ereignis reagieren zu lassen ( zB ein Mausklick).

jQuery bietet auch ein Paradigma für die Ereignisbehandlung, das über die grundlegende Auswahl und Manipulation von DOM-Elementen hinausgeht. Die Ereigniszuweisung und die Definition der Ereignisrückruffunktion erfolgen in einem einzigen Schritt an einer einzigen Stelle im Code. jQuery zielt auch darauf ab, andere häufig verwendete JavaScript-Funktionalitäten zu integrieren (zB Ein- und Ausblendungen beim Ausblenden von Elementen, Animationen durch Manipulation von CSS- Eigenschaften).

Die Prinzipien der Entwicklung mit jQuery sind:

• Trennung von JavaScript und HTML: Die jQuery-Bibliothek bietet eine einfache Syntax zum Hinzufügen von Ereignishandlern zum DOM mithilfe von JavaScript, anstatt HTML-Ereignisattribute hinzuzufügen , um JavaScript-Funktionen aufzurufen. Daher ermutigt es Entwickler, JavaScript-Code vollständig vom HTML-Markup zu trennen .
• Kürze und Klarheit: jQuery fördert Kürze und Übersichtlichkeit mit Funktionen wie "verkettbaren" Funktionen und Kurznamen von Funktionen.
• Beseitigung von browserübergreifenden Inkompatibilitäten: Die JavaScript-Engines verschiedener Browser unterscheiden sich geringfügig, sodass JavaScript-Code, der für einen Browser funktioniert, für einen anderen möglicherweise nicht funktioniert. Wie andere JavaScript-Toolkits behandelt jQuery all diese browserübergreifenden Inkonsistenzen und bietet eine konsistente Benutzeroberfläche, die in verschiedenen Browsern funktioniert.
• Erweiterbarkeit: Neue Events, Elemente und Methoden können einfach hinzugefügt und dann als Plugin wiederverwendet werden.

Geschichte

jQuery wurde ursprünglich im Januar 2006 im BarCamp NYC von John Resig erstellt , beeinflusst von Dean Edwards' früherer cssQuery- Bibliothek. Es wird derzeit von einem Entwicklerteam unter der Leitung von Timmy Willison gepflegt (wobei die jQuery-Selektor-Engine Sizzle von Richard Gibson geleitet wird).

jQuery wurde ursprünglich unter CC BY-SA 2.5 lizenziert und 2006 erneut unter der MIT-Lizenz lizenziert. Ende 2006 wurde es unter GPL- und MIT-Lizenzen doppelt lizenziert . Da dies zu einiger Verwirrung führte, wurde die GPL im Jahr 2012 fallengelassen und ist nur noch unter der MIT-Lizenz lizenziert.

Popularität

• Im Jahr 2015 wurde jQuery auf 62,7 % der Top 1 Million Websites (laut BuiltWith) und 17 % aller Internet-Websites verwendet.
• Im Jahr 2017 wurde jQuery auf 69,2% der Top 1 Million Websites (laut Libscore) verwendet.
• Im Jahr 2018 wurde jQuery auf 78% der Top 1 Million Websites verwendet.
• Im Jahr 2019 wurde jQuery auf 80 % der Top 1 Million Websites (laut BuiltWith) und 74,1 % der Top 10 Millionen (nach W3Techs) verwendet.
• Ab April 2021 wird jQuery von 77,8% der Top-10-Millionen-Websites (laut W3Techs) verwendet .

Merkmale

jQuery umfasst die folgenden Funktionen:

• DOM- Elementauswahl mit der Multi-Browser-Open-Source-Selektor-Engine Sizzle , einem Spin-off des jQuery-Projekts
• DOM-Manipulation basierend auf CSS-Selektoren, die die Namen und Attribute von Elementen wie ID und Klasse als Kriterien zur Auswahl von Knoten im DOM verwenden
• Veranstaltungen
• Effekte und Animationen
• Ajax
• Deferred- und Promise- Objekte zur Steuerung der asynchronen Verarbeitung
• JSON- Parsing
• Erweiterbarkeit durch Plug-Ins
• Dienstprogramme wie Feature-Erkennung
• Kompatibilitätsmethoden, die in modernen Browsern nativ verfügbar sind, aber Fallbacks für ältere Browser benötigen, wie jQuery.inArray()und jQuery.each().
• Cross-Browser- Unterstützung

Browser-Unterstützung

jQuery 3.0 und höher unterstützt "aktuelle-1 Versionen" (d. h. die aktuelle stabile Version des Browsers und die vorherige Version) von Firefox (und ESR), Chrome , Safari und Edge sowie Internet Explorer 9 und höher. Auf Mobilgeräten unterstützt es iOS 7 und neuer sowie Android 4.0 und neuer.

Verteilung

Die jQuery-Bibliothek wird normalerweise als einzelne JavaScript-Datei verteilt, die alle ihre Schnittstellen definiert, einschließlich DOM-, Events- und Ajax-Funktionen. Sie kann in eine Webseite eingefügt werden, indem eine Verknüpfung zu einer lokalen Kopie hergestellt wird, oder indem eine Verknüpfung zu einer der vielen Kopien hergestellt wird, die auf öffentlichen Servern verfügbar sind. jQuery verfügt über ein Content Delivery Network (CDN), das von MaxCDN gehostet wird. Google im Dienst Google Hosted Libraries und Microsoft hosten die Bibliothek ebenfalls.

Beispiel für das lokale Verknüpfen einer Kopie der Bibliothek (von demselben Server, der die Webseite hostet):

<script src="jquery-3.5.1.min.js"></script>

Beispiel für das Verknüpfen einer Kopie der Bibliothek aus dem öffentlichen CDN von jQuery:

<script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>

Schnittstelle

Funktionen

jQuery bietet zwei Arten von Funktionen , statische Dienstprogrammfunktionen und jQuery- Objektmethoden . Jeder hat seinen eigenen Nutzungsstil.

Auf beide wird über die Hauptkennung von jQuery zugegriffen: jQuery. Dieser Bezeichner hat einen Alias ​​namens $. Auf alle Funktionen kann über einen dieser beiden Namen zugegriffen werden.

jQuery-Methoden

Die jQueryFunktion ist eine Factory zum Erstellen eines jQuery-Objekts, das einen oder mehrere DOM-Knoten darstellt. jQuery-Objekte verfügen über Methoden zum Bearbeiten dieser Knoten. Diese Methoden (manchmal auch Befehle genannt) sind verkettebar, da jede Methode auch ein jQuery-Objekt zurückgibt.

Der Zugriff auf und die Manipulation mehrerer DOM-Knoten in jQuery beginnt normalerweise mit dem Aufrufen der $Funktion mit einem CSS-Selektor-String. Dies gibt ein jQuery-Objekt zurück, das auf alle übereinstimmenden Elemente in der HTML- Seite verweist . $("div.test")gibt beispielsweise ein jQuery-Objekt mit allen divElementen der Klasse zurück test. Diese Knotenmenge kann durch Aufrufen von Methoden für das zurückgegebene jQuery-Objekt manipuliert werden.

Statische Dienstprogramme

Dies sind Hilfsfunktionen und wirken nicht direkt auf ein jQuery-Objekt. Sie werden als statische Methoden über die jQuery- oder $-Kennung aufgerufen. Ist beispielsweise $.ajax()eine statische Methode.

Konfliktfreier Modus

jQuery bietet eine $.noConflict()Funktion, die die Kontrolle über den $Namen aufgibt . Dies ist nützlich, wenn jQuery auf einer Webseite verwendet wird, die auch eine andere Bibliothek verlinkt, die das $Symbol als Bezeichner erfordert . Im No-Conflict-Modus können Entwickler jQueryals Ersatz verwenden, $ohne die Funktionalität zu verlieren.

Typischer Ausgangspunkt

Normalerweise wird jQuery verwendet, indem Initialisierungscode und Ereignisbehandlungsfunktionen in . Dies wird von jQuery ausgelöst, wenn der Browser die Erstellung des DOM für die aktuelle Webseite abgeschlossen hat. $(handler)

$(function () {
        // This anonymous function is called when the page has completed loading.
        // Here, one can place code to create jQuery objects, handle events, etc.
});

oder

$(fn); // The function named fn, defined elsewhere, is called when the page has loaded.

Historisch gesehen war $(document).ready(callback)dies das De-facto-Idiom für das Ausführen von Code, nachdem das DOM fertig ist. Seit jQuery 3.0 wird Entwicklern jedoch empfohlen, $(handler)stattdessen die viel kürzere Signatur zu verwenden.

Verkettung

jQuery-Objektmethoden geben normalerweise auch ein jQuery-Objekt zurück, das die Verwendung von Methodenketten ermöglicht :

$('div.test')
  .on('click', handleTestClick)
  .addClass('foo');

Diese Zeile findet alle div Elemente mit dem Klassenattribut test, registriert dann einen Ereignishandler für jedes Element für das "Klick"-Ereignis und fügt dann das Klassenattribut foozu jedem Element hinzu.

Bestimmte jQuery-Objektmethoden rufen bestimmte Werte ab (anstatt den Zustand zu ändern). Ein Beispiel hierfür ist die val()Methode, die den aktuellen Wert eines Texteingabeelements zurückgibt . In diesen Fällen kann eine Anweisung wie z. B. $('#user-email').val()nicht zur Verkettung verwendet werden, da der Rückgabewert kein jQuery-Objekt referenziert.

Neue DOM-Elemente erstellen

Neben dem Zugriff auf vorhandene DOM-Knoten über jQuery ist es auch möglich, neue DOM-Knoten zu erstellen, wenn der als Argument an die $()-Factory übergebene String wie HTML aussieht. Der folgende Code findet beispielsweise ein HTML- selectElement und erstellt ein neues optionElement mit dem Wert "VAG" und dem Label "Volkswagen", das dann an das Auswahlmenü angehängt wird :

$('select#car-brands')
  .append($('<option>')
    .prop(value,"VAG")
    .text('Volkswagen')
  );

Ajax

Es ist möglich, Ajax- Anfragen (mit Cross-Browser- Unterstützung) zu stellen $.ajax(), um Remote-Daten zu laden und zu manipulieren.

$.ajax({
  type: 'POST',
  url: '/process/submit.php',
  data: {
    name : 'John',
    location : 'Boston',
  },
}).then(function(msg) {
  alert('Data Saved: ' + msg);
}).catch(function(xmlHttpRequest, statusText, errorThrown) {
  alert(
    'Your form submission failed.\n\n'
      + 'XML Http Request: ' + JSON.stringify(xmlHttpRequest)
      + ',\nStatus Text: ' + statusText
      + ',\nError Thrown: ' + errorThrown);
});

Dieses Beispiel setzt die Daten name=Johnund location=Bostonzu /process/submit.phpauf dem Server. Wenn diese Anforderung abgeschlossen ist, wird die Erfolgsfunktion aufgerufen, um den Benutzer zu benachrichtigen. Wenn die Anforderung fehlschlägt, wird der Benutzer auf den Fehler, den Status der Anforderung und den spezifischen Fehler aufmerksam gemacht.

Im obigen Beispiel werden die Methoden .then()und .catch()verwendet, um Rückrufe zu registrieren, die ausgeführt werden, wenn die Antwort abgeschlossen ist. Diese Promise-Callbacks müssen aufgrund der asynchronen Natur von Ajax- Anforderungen verwendet werden.

jQuery-Plug-Ins

Die Architektur von jQuery ermöglicht es Entwicklern, Plug-in- Code zu erstellen , um seine Funktion zu erweitern. Es gibt Tausende von jQuery - Plug-In auf dem Web , die eine Reihe von Funktionen, wie zum Beispiel Ajax - Helfer decken, Web - Service , Datagrids, dynamische Listen, XML und XSLT - Tools, Drag & Drop , Veranstaltungen, Cookie Handhabung und modale Fenster .

Eine wichtige Quelle für jQuery-Plug-ins ist die Plugins-Unterdomäne der jQuery-Projektwebsite. Die Plugins in dieser Subdomain wurden jedoch im Dezember 2011 versehentlich gelöscht, um die Site von Spam zu befreien. Die neue Site ist ein von GitHub gehostetes Repository, das von den Entwicklern verlangt, ihre Plugins erneut einzureichen und den neuen Einreichungsanforderungen zu entsprechen. jQuery bietet ein "Learning Center", das Benutzern helfen kann, JavaScript zu verstehen und mit der Entwicklung von jQuery-Plugins zu beginnen.

Um diese Plug-Ins zu erstellen, können Entwickler entweder ihren eigenen Code von Grund auf neu schreiben oder auf einer bestehenden Struktur wie der jQuery Boilerplate aufbauen .

Veröffentlichungsverlauf

Testrahmen

QUnit ist ein Testautomatisierungs-Framework zum Testen des jQuery-Projekts. Das jQuery-Team hat es als interne Unit-Testing-Bibliothek entwickelt. Das jQuery-Team verwendet es, um seinen Code und seine Plugins zu testen, aber es kann jeden generischen JavaScript-Code testen, einschließlich serverseitigem JavaScript-Code.

Seit 2011 verwendet das jQuery- Testteam QUnit mit TestSwarm , um jede jQuery-Codebase-Version zu testen.

Alternativen zu jQuery

Durch die Vereinfachung von Aufgaben wie das Durchlaufen von HTML-Dokumenten, Animationen und Ereignisbehandlung hat die bewährte jQuery-JavaScript-Bibliothek das Gesicht der Webentwicklung verändert. Laut dem Webtechnologie-Survey W3Techs wird jQuery im Mai 2019 noch auf 74 Prozent der bekannten Websites verwendet. Dennoch wird die jQuery-Bibliothek, die im August 2006 debütierte, von einigen Entwicklern inzwischen als eine ältere Technologie angesehen, deren Zeit vorbei ist. In den letzten Jahren sind Alternativen zu jQuery entstanden, wie die Cash-Bibliothek oder einfach nur modernes, Vanille-JavaScript, da Webbrowser alle JavaScript auf die gleiche Weise handhaben und jQuery nicht mehr benötigt wird, um Kompatibilitätsprobleme zu lösen. Argumente auf Reddit und Videos auf YouTube belegen, dass jQuery obsolet geworden ist oder zumindest nicht mehr so ​​wichtig ist wie früher.

—  Paul Krill, InfoWorld (2019)

Da die Cross-Browser-Kompatibilität nicht mehr so ​​wichtig ist, kann jQuery heutzutage größtenteils durch moderne Webstandards ersetzt werden, ohne viel Komfort zu verlieren. Teilweise aus diesem Grund hat GitHub jQuery 2018 von seinen Seiten entfernt.

Alternative Bibliotheken

• Kasse
• Zepto

Siehe auch

• Vergleich von JavaScript-Frameworks
• jQuery Mobile
• jQuery-Benutzeroberfläche

Verweise

Weiterlesen

• John Resig (Sprecher) (13. April 2007). John Resig: JavaScript mit Bibliotheken voranbringen (YouTube-Video) . YUI-Theater . Abgerufen am 9. Januar 2018 .
• Krill, Paul (31. August 2006). "JavaScript, .Net-Entwickler in separatem Projekt unterstützt" . InfoWelt . Abgerufen am 15. April 2019 .
• Taft, Darryl K. (30. August 2006). "jQuery erleichtert die JavaScript- und AJAX-Entwicklung" . eWoche . Abgerufen am 15. April 2019 .

Externe Links

• Offizielle Website