Was ist jQuery?

German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)

Avid-Leser von Envato Tuts + kommen aus einer Vielzahl von Hintergründen in Bezug auf Erfahrung, Kultur und was sie lernen möchten. Wenn es um Technologie geht, ist es einfach, diejenigen, die gerade erst anfangen, als selbstverständlich zu betrachten, besonders wenn Sie irgendeine Art von Entwicklung für einen längeren Zeitraum gemacht haben.

Wenn es um Technologie geht, ist es einfach, diejeniger, die gerade erst gestartet, als selbstverständliche zu betrachten, wenn Sie Kunst von Entwicklung für einen längeren Zeitraum gemacht haben.

Um sicherzustellen, dass wir ein möglichst breites Publikum erreichen, möchten wir Inhalte veröffentlichen, die sich direkt an Anfänger richten, die sich für eine bestimmte Sprache, Plattform oder Anwendung interessieren.

In diesem Artikel konzentrieren wir uns ausschließlich auf jQuery. Insbesondere werden wir einen Überblick über alles, was jQuery bietet, und darüber, wie es uns helfen kann, geben, und wir werden einige der Projekte besprechen, die auch aus der ursprünglichen Bibliothek entstanden sind.

Alles über jQuery

JQuery wurde erstmals im Jahr 2006 von John Resig veröffentlicht und entpuppte sich als plattformübergreifende JavaScript-Bibliothek, die das Schreiben von clientseitigen Lösungen erleichterte.

Zu der Zeit, als dies veröffentlicht wurde, war es besonders nützlich wegen der Inkonsistenzen zwischen JavaScript-Implementierungen in Internet Explorer, Firefox und schließlich Google Chrome (die erst 2008 veröffentlicht wurde).

Wie von Wikipedia definiert:

jQuery ist eine plattformübergreifende JavaScript-Bibliothek, die das clientseitige Scripting von HTML vereinfacht. jQuery ist die beliebteste JavaScript-Bibliothek, die heute verwendet wird. Die Installation erfolgt auf 65% der Top 10 der Websites mit den höchsten Zugriffszahlen im Web. jQuery ist eine freie Open-Source-Software, die unter der MIT-Lizenz lizenziert ist.

Außerdem sagt die jQuery-Website selbst:

jQuery ist eine schnelle, kleine und funktionsreiche JavaScript-Bibliothek. Mit einer einfach zu verwendenden API, die für eine Vielzahl von Browsern geeignet ist, werden Funktionen wie HTML-Dokumentdurchlauf und -manipulation, Ereignisbehandlung, Animation und Ajax viel einfacher. Mit einer Kombination aus Vielseitigkeit und Erweiterbarkeit hat jQuery die Art und Weise verändert, in der Millionen von Menschen JavaScript schreiben.

Aber was bedeutet das für uns als Entwickler? Vielleicht ist der beste Weg für uns zu verstehen, was die ganze Bibliothek bietet, zu prüfen, was sie zu bieten hat.

1. HTML Dokument Traversal

Wenn ein Browser eine Webseite rendert, handelt es sich um eine visuelle Darstellung des so genannten DOM (oder des Dokumentobjektmodells). Dieses Modell kann konzeptionell als eine Baumdatenstruktur modelliert werden, wobei bestimmte Knoten jeweils Wurzeln und Blätter aufweisen.

Sehen Sie sich beispielsweise dieses Bild an, das im Web Step Book bereitgestellt wird:

An example of the DOM for a basic web page

Wenn Sie mit jQuery arbeiten, können Sie den Inhalt des DOM problemlos durchlaufen, um die Knoten, Elemente oder Werte zu erreichen, die Sie abrufen möchten.

Das heißt, wenn Sie nach dem Text eines div-Elements suchen, das eine eindeutige ID hat, ist es einfach.

/**
 * This code looks for a div with the ID of "my unique element"
 * and then removes it from view.
 */
$( 'div#my-unique-element' ).hide();

Wenn Sie versuchen, alle span-Elemente zu durchlaufen, können Sie das auch tun:

/**
 * This is the basic way to setup a loop in jQuery. It will
 * take all of the span elements on the page and then
 * allow you to iterate through them.
 */
$( 'span' ).each(function() {
    // Process the span element here
});

Wir werden diese spezielle Funktionalität im nächsten Abschnitt ein wenig genauer betrachten, um einige der zusätzlichen Arbeiten zu zeigen, die Sie zur Manipulation der Seite ausführen können.

Zugegeben, diese Beispiele sind einfach, und die Dinge können komplizierter werden, vor allem, wenn wir Methodenverkettung einführen. Beispielsweise:

$excerpt.on( 'keydown', function( evt ) {

    if ( ( 17 === evt.keyCode || 91 === evt.keyCode ) || 86 === evt.keyCode ) {

  	if ( -1 === $.inArray( evt.keyCode, keymap ) ) {
			keymap.push( evt.keyCode );
		}

	}

    }).on( 'keyup', function() {

	if ( user_has_pasted_content( keymap ) ) {

		resize_textarea( this );
		keymap = [];

	}

});

An dieser Stelle sollten Sie nicht wissen, was mit dem Code passiert, aber es soll Ihnen zeigen, wie nützlich jQuery in bestimmten Situationen sein kann, durch die Verwendung von Hilfsfunktionen und Methodenverkettung.

Es genügt zu sagen, dass die Stärke von jQuery in seiner Fähigkeit liegt, das DOM (daher der Name jQuery) abzufragen und dann Anpassungen daran vorzunehmen, indem eine gut dokumentierte API verwendet wird (die Beispiele für die Verwendung der einzelnen Funktionen enthält). .

Man könnte argumentieren, dass alles andere nur aus diesem Merkmal stammt. Lassen Sie uns also weiter schauen, wie das aussieht.

2. HTML-Dokumentenmanipulation

Wenn es darum geht, das DOM tatsächlich zu manipulieren, verfügt jQuery über viele Funktionen, die es uns ermöglichen, das zu ändern, was unsere Besucher sehen.

Einige dieser Funktionen sind einfach, z. B. das show oder hide von Elementen, die beim Laden einer Seite nicht sichtbar sind. Andere Funktionen ermöglichen es uns, neue Elemente zu append und sie an ein prepend Element anzuhängen oder sie vor einer ganzen Liste anzuordnen.

Wenn Sie versuchen, alle span-Elemente zu durchlaufen, um ihnen ein Klassenattribut hinzuzufügen, können Sie das auch tun:

/**
 * This is the basic way to setup a loop in jQuery. It will
 * take all of the span elements on the page and then
 * add a custom class attribute to them.
 */
$( 'span' ).each(function() {
    $( this ).addClass( 'my-custom-class' );
});

Dadurch wird kaum die Oberfläche der DOM-Manipulationsfunktionalität in jQuery gekratzt. Wenn Sie sich die API ansehen, sehen Sie unter dem Abschnitt Manipulation, wie viele Optionen uns zur Verfügung stehen (zusammen mit guten Beispielen).

Um weitere Beispiele zu geben, können wir auch:

Bestimmen der Höhe oder Breite des Dokuments, des Fensters oder eines beliebigen Elements
schnappen Sie sich die Werte von jedem beliebigen Element (vorausgesetzt, es bietet diese Fähigkeit)
Klassennamen umschalten
und vieles mehr

Denken Sie daran, dass eines der Dinge, die jQuery zu einer attraktiven Lösung für so viele Entwickler machen, darin besteht, dass alle Funktionen und Beispiele, die wir in diesem Artikel betrachten, browserübergreifend kompatibel sind.

3. Ereignisbehandlung

Wenn Sie mit JavaScript noch nicht vertraut sind, ist es wichtig zu verstehen, wie es mit der im Webbrowser angezeigten Seite funktioniert, dass es auf verschiedene Ereignisse reagiert.

Das heißt, wenn ein Benutzer auf ein Element klickt, einen Tastendruck vornimmt oder mit der Maus klickt, dann gibt der Browser ein Signal entsprechend dem aufgetretenen Ereignis aus. Dies ermöglicht uns, die Interaktion des Benutzers mit dem Browser zu nutzen.

Insbesondere können wir jedes Mal, wenn ein Benutzer etwas für die Seite tut, mit einem benutzerdefinierten Ereignis antworten. Das Problem ist, dass nicht jeder Browser Ereignisse auf die gleiche Weise implementiert (deshalb ist eine Spezifikation erforderlich, aber das ist Inhalt für einen anderen Beitrag).

Glücklicherweise macht jQuery dies wesentlich einfacher, indem wir einen konsistenten Namen für alle Ereignisse definieren, so dass wir denselben Namen für ein Ereignis verwenden können, auf das wir antworten möchten, und es wird in allen gängigen Browsern funktionieren.

4. Animation

Als jQuery zum ersten Mal herauskam, war Flash immer noch relativ populär, und allgemeine Animationen im Internet waren nicht vollständig tot.

Wenn wir jedoch im Zusammenhang mit jQuery über Animation sprechen, handelt es sich nicht um die gleiche Art von Effekten oder Verhaltensweisen, die wir von älteren Technologien gewohnt sind. Stattdessen sprechen wir über Effekte, die Nutzern Feedback geben, dass etwas auf dem Bildschirm passiert ist. Darüber hinaus ist es weniger invasiv und kann einer Seite oder Anwendung bei korrekter Anwendung einen schönen Stil verleihen (alles kann jedoch missbraucht werden).

Sie können die gesamte Effekt-API auf dieser Seite anzeigen, aber es ist erwähnenswert, dass jQuerys Effekte von der einfachen Einblendung und Ausblendung von Elementen oder verschiebbaren Elementen bis hin zu etwas Komplexem wie der Bearbeitung der Liste der registrierten Effekte reichen können gegen ein Element feuern.

Zugegeben, der letztere Fall geht davon aus, dass Sie ein wenig Erfahrung mit der Effekt-API haben, aber es ist etwas natürlich, wenn Sie genügend Zeit mit der Bibliothek und der Dokumentation haben.

5. Ajax

Wenn Sie mit Ajax nicht vertraut sind, ist es im Wesentlichen eine Möglichkeit, dass eine Webseite den Server anruft, die Antwort verarbeitet und einen Teil einer Seite aktualisiert, ohne dass die gesamte Seite aktualisiert werden muss. Obwohl die Technologie schon seit geraumer Zeit existiert, ist sie immer noch etwas, das wirklich cool ist und im Kontext einer Seite oder einer Web-Anwendung eine wirklich ordentliche Funktionalität bietet, wenn sie angemessen und effektiv verwendet wird.

Obwohl die Unterstützung für Ajax nicht so schlecht ist wie vor fünf oder zehn Jahren, kann die Implementierung für die API in verschiedenen Browsern leicht variieren. Das bedeutet, dass wir den Ajax-Code speziell für einen Browser schreiben müssen, den Microsoft zur Verfügung stellt, den Google bietet, den Apple zur Verfügung stellt, den Chrome bereitstellt und so weiter.

Zumindest ist das ohne jQuery der Fall. Dank der Unterstützung von Ajax können wir Ajax auf verschiedene Weise nutzen, ohne auf browserübergreifende Inkonsistenzen zurückgreifen zu müssen. In der Tat ist es leicht, GET- und POST-Anfragen zu bearbeiten, während Sie mit der $.ajax-Methode weit fortgeschrittenere Anrufe durchführen können.

Sobald Sie sich daran gewöhnt haben, dass die API im Kern Ihrer Anwendung verfügbar ist oder Ihnen zur Verfügung steht, ist es schwer vorstellbar, nicht damit zu arbeiten (oder mit etwas Ähnlichem).

Ein Wort zur Erweiterbarkeit

Eine Funktion, die viele serverseitige Frameworks und Bibliotheken bieten, ist die Möglichkeit, Erweiterungen für die Codebasis zu erstellen. Moderne clientseitige Bibliotheken und Frameworks erlauben dies, und jQuery unterscheidet sich nicht.

Angenommen, Sie arbeiten in einer bestimmten Nische, in der Sie die gleiche Funktionalität für jedes Projekt erstellen. Oder was ist, wenn Sie ein Produkt haben, das Sie verkaufen, und Sie ein wenig benutzerdefinierten Code haben, der in jQuery integriert werden muss, aber je nach Projekt möglicherweise andere Parameter benötigt.

Was machst du dann?

Glücklicherweise unterstützt jQuery Plugins. Das bedeutet, dass wir als Entwickler nicht nur Plugins verwenden können, die andere geschrieben haben (einige davon sind auf der jQuery-Website verfügbar, andere sind auf GitHub verfügbar), sondern wir sind auch in der Lage, eigene Plugins zu entwickeln .

Wir können diesen Code dann in unseren eigenen Projekten wiederverwenden oder auf Websites wie GitHub für andere bereitstellen, um Beiträge, Fixes, Funktionen usw. anbieten zu können.

Zusätzliche jQuery-Projekte

Seit seiner Gründung hat sich jQuery zu mehr als nur einer JavaScript-Bibliothek entwickelt, die uns die Möglichkeit bietet, sowohl einfache als auch leistungsstarke Operationen auf plattformübergreifende Weise durchzuführen.

Neben der Kernbibliothek hat jQuery auch zu zwei anderen bemerkenswerten Projekten geführt, die es wert sind, erwähnt zu werden, bevor wir diesen Artikel schreiben. Auch wenn wir nicht auf die Details der einzelnen Projekte eingehen werden, werden wir jedes Projekt auf hoher Ebene betrachten, wenn wir nur wissen, was uns zur Verfügung steht, wenn wir dies für zukünftige Arbeiten benötigen.

jQuery UI

Auf der jQuery-Benutzeroberfläche:

jQuery UI ist ein kuratierter Satz von Benutzeroberflächeninteraktionen, Effekten, Widgets und Designs, die auf der jQuery-JavaScript-Bibliothek basieren. Ob Sie hoch interaktive Webanwendungen erstellen oder nur eine Datumsauswahl zu einem Formularsteuerelement hinzufügen möchten, jQuery UI ist die perfekte Wahl.

Diese Bibliothek wurde erstmals 2007 veröffentlicht, etwa ein Jahr nach jQuery. Es fungiert als ergänzende Bibliothek zu jQuery, da es die plattformübergreifende Kompatibilität der Bibliothek nutzt, um Widgets zu erstellen, die auf einer Website verwendet werden können.

Viele der Widgets enthalten häufig verwendete Funktionen. Beispielsweise:

Es gibt auch erweiterte Funktionen wie Effekte, Dienstprogramme und Interaktionen. Alles, was wir bisher behandelt haben (und auch die Dinge, die wir nicht haben), beinhalten eine Vielzahl von Rückrufen, Attributen und Funktionen, die es uns ermöglichen, mit ihnen in vollem Umfang zu interagieren.

Alle oben genannten Funktionen bieten auch verschiedene Themen, um sicherzustellen, dass sie das Aussehen und die Haptik Ihrer Website anpassen. Schließlich sind alle hier beschriebenen und auf der Website enthaltenen Funktionen gut dokumentiert.

jQuery Mobile

Von der jQuery Mobile Startseite:

jQuery Mobile ist ein HTML5-basiertes Benutzeroberflächensystem, das entwickelt wurde, um responsive Websites und Apps zu erstellen, auf die auf allen Smartphone-, Tablet- und Desktopgeräten zugegriffen werden kann.

Diese Bibliothek ist die neueste Einführung in die Bibliotheksfamilie, die 2010 veröffentlicht wurde (die letzte stabile Version ist 2014).

Ähnlich wie sein UI-Gegenstück bietet es eine gut dokumentierte API und benutzerdefinierte Designs, die ideal für die verschiedenen Geräte sind, auf die Ihr Projekt abzielen kann.

Während die beiden vorherigen Bibliotheken eine Reihe von plattformübergreifenden Funktionen bieten, mit denen wir jQuery und begleitende Widgets auf relativ einfache Weise schreiben können, enthält jQuery Mobile ein CSS-Framework, mit dem wir auch Benutzeroberflächen entwerfen können, die für die Natur unserer geeignet sind entsprechendes Projekt.

Das Framework beinhaltet:

Von dort bietet die Bibliothek das, was Sie von einem Projekt erwarten, das darauf ausgerichtet ist, die Webentwicklung für verschiedene mobile Geräte zu vereinfachen. Dazu gehören Dinge wie:

ein konsistentes Icon-Set
Ereignisse, die auf einer Vielzahl von Geräten funktionieren
Eigenschaften für die aktive Seite
eine Reihe von Widgets, die ideal für mobile Schnittstellen sind

Schließlich ist die Anzahl der Browser, die noch verfügbar sind und in freier Wildbahn verwendet werden, hoch. Obwohl die Verwendung älterer Versionen von Internet Explorer und die zunehmende Verbreitung von Chrome rückläufig sind, haben bestimmte Nutzer aus verschiedenen Gründen immer noch Probleme mit älteren Browsern.

Manchmal befinden sich diese Benutzer aufgrund der Art ihres Firmenintranets in älteren Browsern. Manchmal hat es mit den mobilen Geräten und / oder Telefonen zu tun, denen sie für ihre Arbeit zugewiesen wurden. Und manchmal hat es einfach damit zu tun, dass man nicht auf etwas Besseres upgraden kann.

Aber egal. jQuery Mobile bietet Unterstützung für die meisten derzeit verfügbaren Browser und Betriebssysteme. Wenn Sie nicht sicher sind, ob die von Ihnen ausgerichtete Plattform von der Bibliothek unterstützt wird, können Sie auf der Unterstützungsseite des Browsers nachsehen.

Zusätzliche Ressourcen

Abschluss

Es ist wichtig zu verstehen, was jQuery ist (und was es ist) und wie es mit Javascript zusammenhängt, damit Sie wissen, was Sie für Sie tun und was Sie tun können, wenn Sie es brauchen.

Wie bereits erwähnt, können einige argumentieren, dass Sie zuerst JavaScript lernen und dann jQuery lernen müssen; Andere können argumentieren, dass das Lernen von jQuery eine gute Möglichkeit ist, sich rückwärts zu JavaScript zu arbeiten.

Wie dem auch sei, jQuery ist eine lange Bibliothek in der JavaScript-Wirtschaft und wird in einer Reihe von sehr populären Projekten (wie WordPress) verwendet, so dass Sie es auf verschiedene Arten lernen können.

JavaScript ist zu einer der De-facto-Sprachen für die Arbeit im Web geworden. Es ist nicht ohne Lernkurven und es gibt viele Frameworks und Bibliotheken, die Sie beschäftigen. Wenn Sie nach zusätzlichen Ressourcen suchen, die Sie für Ihre Arbeit nutzen können, finden Sie auf dem Envato-Marktplatz Informationen zu unseren Ressourcen.

Wenn das nicht genug ist, gibt es viel Dokumentation und Open-Source-Code für Sie zum Lesen und Lesen. Es gibt auch weit verbreitete Plugins und einen aktiven Blog, um Sie auf dem Laufenden zu halten, mit all den Neuigkeiten, die mit der Entwicklung der Bibliothek geschehen.

Für diejenigen, die sich für JavaScript interessieren (insbesondere im Zusammenhang mit WordPress), können Sie mir auf meinem Blog und / oder Twitter unter @tommcfarlin folgen. Sie können alle meine Kurse und Tutorials auch auf meiner Profilseite sehen.

Zögern Sie nicht, Fragen oder Kommentare im Feed unten zu hinterlassen, und ich werde darauf abzielen, auf jeden von ihnen zu antworten.