Share
Die begeisterten Leser von Envato Tuts + kommen aus Erfahrung, Kultur und Lerninhalten aus den verschiedensten Bereichen. Wenn es um Technologie geht, ist es für diejenigen, die gerade erst anfangen, leicht zu verstehen, vor allem, wenn Sie für längere Zeit irgendeine Art von Entwicklung durchgeführt haben.
Das Schöne daran, ein Entwickler zu werden, ist, dass es einfach ist, sie in andere Bereiche der Entwicklung zu übersetzen, sobald Sie sich mit einer bestimmten Sprache und einem Satz von Fähigkeiten befasst 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. Im Besonderen werden wir einen umfassenden Überblick über alles, was jQuery bietet, und wie es uns helfen kann, und wir werden einige der Projekte überprüfen, die auch aus der ursprünglichen Bibliothek verwirklicht wurden.
Lernen Sie JavaScript: Das komplette Handbuch
Wir haben ein umfassendes Handbuch zusammengestellt, mit dessen Hilfe Sie JavaScript erlernen können, egal ob Sie gerade erst als Webentwickler anfangen oder sich mit fortgeschrittenen Themen befassen möchten.
JQuery wurde erstmals 2006 von John Resig veröffentlicht und entwickelte sich als plattformübergreifende JavaScript-Bibliothek, die das Schreiben von clientseitigen Lösungen vereinfacht.
Zum Zeitpunkt der Veröffentlichung war dies besonders nützlich, da Inkonsistenzen zwischen den JavaScript-Implementierungen in Internet Explorer, Firefox und Google Chrome (die erst 2008 veröffentlicht wurden) vorhanden waren..
Wie von Wikipedia definiert:
jQuery ist eine plattformübergreifende JavaScript-Bibliothek, die das clientseitige Scripting von HTML vereinfacht. jQuery ist die am häufigsten verwendete JavaScript-Bibliothek, die derzeit auf 65% der Top-10-Millionen-Websites mit den höchsten Zugriffszahlen im Web installiert wird. jQuery ist freie Open-Source-Software, die unter der MIT-Lizenz lizenziert ist.
Darüber hinaus sagt die jQuery-Website selbst:
jQuery ist eine schnelle, kleine und funktionsreiche JavaScript-Bibliothek. Es vereinfacht das Durchqueren und Manipulieren von HTML-Dokumenten, die Ereignisbehandlung, Animation und Ajax mit einer benutzerfreundlichen API, die für eine Vielzahl von Browsern geeignet ist. Durch die Kombination von Vielseitigkeit und Erweiterbarkeit hat jQuery die Art und Weise verändert, wie Millionen von Menschen JavaScript schreiben.
Was bedeutet das für uns als Entwickler? Vielleicht ist der beste Weg für uns zu verstehen, was alle Bibliotheksangebote bieten, zu prüfen, was sie angeblich anbietet.
Wenn ein Browser eine Webseite darstellt, handelt es sich um eine visuelle Darstellung des sogenannten DOM (oder des Dokumentobjektmodells). Dieses Modell kann konzeptionell als Baumdatenstruktur modelliert werden, wobei bestimmte Knoten mit Wurzeln und Blättern vorhanden sind.
Sehen Sie sich dieses Bild beispielsweise so an, wie es vom Web Step Book bereitgestellt wird:
Wenn Sie mit jQuery arbeiten, können Sie den Inhalt des DOM problemlos durchlaufen, um die Knoten, Elemente oder Werte zu erreichen oder zu finden, die Sie abrufen möchten.
Dies bedeutet, wenn Sie nach dem Text von a suchen div Element, das eine eindeutige ID hat, ist einfach zu tun.
Accentsconagua
/ ** * Dieser Code sucht nach einem Div mit der ID von "my unique element" * und entfernt es dann aus der Ansicht. * / $ ('div # my-unique-element') .hide ();Wenn Sie versuchen, alle durchzugehen Spanne Elemente können Sie auch tun:
/ ** * Dies ist die grundlegende Methode zum Erstellen einer Schleife in jQuery. Es werden * alle Span-Elemente auf der Seite übernommen und * können Sie dann durchlaufen. * / $ ('span') .each (function () // Hier das Span-Element verarbeiten);Wir werden uns im nächsten Abschnitt etwas genauer mit dieser speziellen Funktionalität beschäftigen, da hier einige der zusätzlichen Arbeiten gezeigt werden, die Sie zur Bearbeitung der Seite leisten können.
Zugegeben, diese Beispiele sind einfach und Dinge können komplizierter werden, insbesondere wenn wir die Verkettung von Methoden einführen. Zum Beispiel:
$ excerpt.on ('keydown', Funktion (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 los ist, aber er soll Ihnen zeigen, wie nützlich jQuery in bestimmten Situationen durch die Verwendung von Hilfsfunktionen und Methodenverkettung sein kann.
Es genügt zu sagen, dass die Fähigkeit von jQuery darin liegt, das DOM abzufragen (daher der Name jQuery) und es dann mithilfe einer gut dokumentierten API anzupassen (dies ist voll mit Beispielen, wie die einzelnen Funktionen verwendet werden)..
Man könnte argumentieren, dass alles andere nur von diesem Feature herrührt. Lassen Sie uns damit fortfahren, einige davon zu betrachten, wie das aussieht.
Wenn es darum geht, das DOM tatsächlich zu manipulieren, hat jQuery dies viel von Funktionen, die es uns ermöglichen, das zu verändern, was unsere Besucher sehen.
Einige dieser Funktionen sind einfach und erlauben es uns Show oder verbergen Elemente, die beim Laden einer Seite nicht sichtbar sind. Andere Funktionen ermöglichen es uns, neue Elemente zu erstellen und anhängen sie zu einem vorhandenen Element oder voranstellen sie vor einer ganzen Liste.
Wenn Sie versuchen, alle durchzugehen Spanne Elemente, um ihnen ein Klassenattribut hinzuzufügen, können Sie dies auch tun:
/ ** * Dies ist die grundlegende Methode zum Erstellen einer Schleife in jQuery. Es nimmt * alle Span-Elemente auf der Seite und fügt * dann ein benutzerdefiniertes Klassenattribut hinzu. * / $ ('span') .each (function () $ (this) .addClass ('my-custom-class'););Dies kratzt kaum an der Oberfläche der DOM-Manipulationsfunktionen, die in jQuery verfügbar sind. Wenn Sie sich die API im Abschnitt Manipulation ansehen, können Sie sehen, wie viele Optionen uns zur Verfügung stehen (einschließlich guter Beispiele)..
Um weitere Beispiele zu geben, können wir auch:
Denken Sie daran, dass jQuery für so viele Entwickler eine attraktive Lösung ist, dass alle Funktionen und Beispiele, die wir in diesem Artikel betrachten, browserübergreifend kompatibel sind.
Wenn Sie JavaScript noch nicht kennen, ist das Wichtigste, um 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 ausführt oder mit der Maus klickt, gibt der Browser ein Signal aus, das dem Ereignis entspricht, das aufgetreten ist. Dies ermöglicht es uns, die Interaktion des Benutzers mit dem Browser zu nutzen.
Insbesondere bei jedem Benutzer etwas Auf der Seite können wir mit einem benutzerdefinierten Ereignis antworten. Das Problem ist, dass nicht alle Browser Ereignisse auf dieselbe Weise implementieren (deshalb ist eine Spezifikation erforderlich, aber das ist der Inhalt eines anderen Posts).
Glücklicherweise vereinfacht jQuery dies durch die Definition eines konsistenten Namens für alle Ereignisse, so dass wir denselben Namen für ein Ereignis verwenden können, auf das wir zu antworten versuchen, und dass es für alle wichtigen Browser geeignet ist.
Als jQuery zum ersten Mal auf den Markt kam, war Flash immer noch relativ beliebt und allgemeine Animationen im Web waren nicht völlig tot.
Wenn wir im Zusammenhang mit jQuery über Animationen sprechen, sprechen wir nicht von denselben Effekten oder Verhaltensweisen, die wir mit älterer Technologie gewohnt sind. Stattdessen sprechen wir über Effekte, die den Anwendern ein Feedback geben etwas ist auf dem Bildschirm passiert. Darüber hinaus ist es weniger invasiv und kann einer Seite oder Anwendung bei korrektem Gebrauch einen schönen Stil verleihen (alles kann jedoch missbraucht werden)..
Sie können die gesamte Effekt-API auf dieser Seite anzeigen, es sollte jedoch beachtet werden, dass die Effekte von jQuery von einem einfachen Einblenden und Ausblenden von Elementen oder von verschiebbaren Elementen bis hin zu etwas komplexeren Bereichen reichen können, z. B. das Bearbeiten der Warteschlange der registrierten Effekte gegen ein Element schießen.
Zugegeben, der letztere Fall setzt voraus, dass Sie etwas Erfahrung mit der Effekt-API haben, aber es ist etwas, das natürlich genug Zeit mit der Bibliothek und der Dokumentation bietet.
Wenn Sie mit Ajax nicht vertraut sind, können Sie mit einer Webseite den Server anrufen, die Antwort bearbeiten und einen Teil der Seite aktualisieren, ohne die gesamte Seite aktualisieren zu müssen. Obwohl die Technologie bereits seit geraumer Zeit verfügbar ist, ist sie immer noch etwas, das wirklich cool ist und im Rahmen einer Seite oder einer Webanwendung bei ordnungsgemäßer und effektiver Verwendung einige wirklich nette Funktionen bereitstellen kann.
Die Unterstützung für Ajax ist zwar nicht so schlecht wie vor fünf oder zehn Jahren, die Implementierung der API für Browser kann jedoch geringfügig variieren. Das bedeutet, dass wir den Ajax-Code speziell für einen Browser schreiben müssen, den Microsoft bereitstellt, den von Google bereitstellt, den von Apple bereitstellt, den von Chrome bereitstellt usw..
Zumindest ist das ohne jQuery der Fall. Dank der Unterstützung von Ajax können wir Ajax auf verschiedene Arten nutzen, ohne in die Browser-Inkonsistenzen eingreifen zu müssen. In der Tat ist es trivial einfach zu handhaben ERHALTEN und POST Anfragen und haben auch die Möglichkeit, weitaus fortgeschrittenere Anrufe über die $ .ajax Methode.
Wenn Sie sich erst einmal daran gewöhnt haben, dass die API im Kern Ihrer Anwendung verfügbar ist oder zu Ihrer Verfügung steht, können Sie sich schwer vorstellen, nicht mit ihr zu arbeiten (oder mit etwas Ähnlichem)..
Ein Feature, das viele serverseitige Frameworks und Bibliotheken bieten, ist die Möglichkeit, Erweiterungen für die Kerncodebase zu erstellen. Moderne clientseitige Bibliotheken und Frameworks erlauben dies, und jQuery unterscheidet sich nicht.
Angenommen, Sie arbeiten beispielsweise in einer bestimmten Nische, in der Sie die gleichen Funktionen für jedes Projekt erstellen. Oder was ist, wenn Sie ein Produkt verkaufen, das Sie verkaufen, und wenn Sie über ein wenig benutzerdefinierten Code verfügen, der in jQuery integriert werden muss, dies jedoch je nach Projekt andere Parameter erfordert?.
Was machst du dann?
Glücklicherweise unterstützt jQuery Plugins. Dies bedeutet, dass wir als Entwickler nicht nur die Möglichkeit haben, Plugins zu verwenden, die von anderen geschrieben wurden (von denen einige auf der jQuery-Website verfügbar sind, andere auf GitHub verfügbar sind), sondern wir können auch eigene Plugins entwickeln.
Wir können diesen Code dann in unseren eigenen Projekten wiederverwenden oder auf Websites wie GitHub anderen zur Verfügung stellen, um Beiträge, Korrekturen, Funktionen usw. anzubieten.
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 plattformübergreifend auszuführen.
Neben der Kernbibliothek hat jQuery auch zwei andere bemerkenswerte Projekte hervorgebracht, die erwähnt werden sollten, bevor wir diesen Artikel zusammenfassen. Obwohl wir uns nicht mit den Details der einzelnen Projekte befassen, werden wir jedes Projekt auf hoher Ebene betrachten, wenn wir aus keinem anderen Grund wissen, was uns zur Verfügung steht, falls wir dies für zukünftige Arbeiten benötigen.
Von der Homepage der jQuery-Benutzeroberfläche:
Bei der jQuery-Benutzeroberfläche handelt es sich um eine kuratierte Gruppe von Interaktionen, Effekten, Widgets und Designs der Benutzeroberfläche, die auf der jQuery-JavaScript-Bibliothek basiert. Egal, ob Sie interaktive Webanwendungen erstellen oder nur einen Datumsauswähler zu einem Formularsteuerelement hinzufügen müssen, die jQuery-Benutzeroberfläche ist die perfekte Wahl.
Diese Bibliothek wurde erstmals 2007 veröffentlicht, etwa ein Jahr nach jQuery. Es funktioniert als ergänzende Bibliothek zu jQuery, indem es die plattformübergreifende Kompatibilität der Bibliothek nutzt, um Widgets zu erstellen, die in einer Website verwendet werden können.
Viele der Widgets enthalten häufig verwendete Funktionen. Zum Beispiel:
Es gibt auch erweiterte Funktionen wie Effekte, Dienstprogramme und Interaktionen. Alles, was wir bisher behandelt haben (sowie die Dinge, die wir noch nicht gemacht haben), umfasst eine Vielzahl von Rückrufen, Attributen und Funktionen, die es uns ermöglichen, mit ihnen im vollen Umfang zu interagieren.
Alle oben genannten Funktionen bieten auch verschiedene Themen, um sicherzustellen, dass sie zum Erscheinungsbild Ihrer Website passen. Schließlich sind alle hier beschriebenen und auf der Website enthaltenen Funktionen gut dokumentiert.
Von der jQuery Mobile-Startseite:
jQuery Mobile ist ein HTML5-basiertes Benutzeroberflächensystem, mit dem responsive Websites und Apps für alle Smartphone-, Tablet- und Desktop-Geräte zugänglich gemacht werden.
Diese Bibliothek ist die jüngste Einführung in die Bibliotheksfamilie, die 2010 veröffentlicht wurde (die letzte stabile Version wurde 2014 veröffentlicht)..
Ähnlich wie sein Gegenstück zur Benutzeroberfläche bietet es eine gut dokumentierte API und benutzerdefinierte Designs, die ideal für die verschiedenen Geräte sind, auf die Ihr Projekt abzielt.
Während die beiden vorherigen Bibliotheken eine Reihe plattformübergreifender Funktionen bieten, mit denen wir jQuery und die dazugehörigen 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 ideal für unsere Natur sind entsprechendes Projekt.
Der Rahmen beinhaltet:
Von dort bietet die Bibliothek das, was Sie von einem Projekt erwarten, das die Webentwicklung für verschiedene mobile Geräte wesentlich vereinfacht. Dazu gehören Dinge wie:
Schließlich ist die Anzahl der Browser, die noch verfügbar und in freier Wildbahn verwendet werden, hoch. Obwohl die Nutzung älterer Versionen von Internet Explorer zurückgegangen ist und die Verbreitung von Chrome breiter geworden ist, gibt es aus verschiedenen Gründen immer noch bestimmte Benutzer, die sich an ältere Browser halten.
Diese Benutzer verwenden manchmal ältere Browser, da es sich um das Intranet ihres Unternehmens handelt. Manchmal hat es mit den mobilen Geräten und / oder Telefonen zu tun, die sie für ihre Arbeit zugewiesen haben. Und manchmal hat es einfach mit der Unfähigkeit zu tun, auf etwas Besseres aufzurüsten.
Aber egal. jQuery Mobile bietet Unterstützung für die meisten derzeit verfügbaren Browser und Betriebssysteme. Wenn Sie nicht sicher sind, ob die Plattform, auf die Sie abzielen, von der Bibliothek unterstützt wird, können Sie immer die Browser-Supportseite überprüfen.
Um zu verstehen, was jQuery ist (und was es nicht ist) und wie es mit JavaScript zusammenhängt, ist es wichtig, dass Sie wissen, was für Sie gemacht wird und was Sie tun können, wenn Sie mit der Bibliothek arbeiten müssen.
Wie bereits erwähnt, können einige argumentieren, dass Sie zuerst JavaScript und dann jQuery lernen müssen. Andere mögen argumentieren, dass das Erlernen von jQuery eine gute Möglichkeit ist, sich rückwärts zu JavaScript zu bewegen.
Wie auch immer, jQuery ist eine langjährige Bibliothek in der JavaScript-Wirtschaft und wird in einer Reihe sehr populärer Projekte (wie z. B. WordPress) verwendet. Wenn Sie also lernen, wird Ihnen dies auf verschiedene Weise ein Bein bringen.
JavaScript ist zu einer der De-facto-Sprachen geworden, die im Web arbeiten. Es ist nicht ohne Lernkurven, und es gibt viele Frameworks und Bibliotheken, um Sie zu beschäftigen. Wenn Sie nach zusätzlichen Ressourcen suchen, um zu studieren oder in Ihrer Arbeit zu verwenden, schauen Sie nach, was wir auf dem Envato-Marktplatz zur Verfügung haben.
Wenn das nicht genug ist, stehen Ihnen auch zahlreiche Dokumentationen und Open-Source-Code zur Verfügung, die Sie lesen und lesen können. Es gibt auch weithin verfügbare Plugins und ein aktives Blog, um Sie über alle Neuigkeiten rund um die Bibliotheksentwicklung auf dem Laufenden zu halten.
Für diejenigen, die sich für JavaScript interessieren (insbesondere im Zusammenhang mit WordPress), können Sie mir gerne auf meinem Blog und / oder Twitter unter @tommcfarlin folgen. Alle meine Kurse und Tutorials finden Sie auch auf meiner Profilseite.
Zögern Sie nicht, Fragen oder Kommentare in den untenstehenden Feed zu schreiben, und ich werde versuchen, auf jeden von ihnen zu antworten.
