Sie sind hier: Startseite -> Javascript-Grundlagen -> jQuery

Javascript-Bibliothek jQuery

Erweiterte Möglichkeiten samt Datenbank und PHP

Javascript gibt es schon sehr lange als Werkzeug für Webseiten, ist aber nicht unumstritten. Große Unternehmen bekamen eine Menge Kritik ab, wenn sie auf der Startseite gleich ein paar hundert Kilobyte mit Javascript-Code eingesetzt haben, um irgendwelche Effekte zu erzielen. Oft gingen die Effekte noch dazu ins Leere, weil sie niemanden interessiert haben.

Dazu kommt, dass sich im Internet viel verändert hat. Der Mouseover-Effekt spielt in Javascript nur noch eine kleine Rolle, weil man ohne zusätzlichen Code diesen mit CSS auch darstellen kann und damit haben viele nette Effekte und zum Teil auch Spielereien kaum mehr Platz auf professionell aufgebauten Webseiten.

Javascript durch jQuery ergänzen


Webhosting mit viel Software bei Alfahosting (Affiliate-Link)


Doch Javascript ist nicht immer böse und man kann damit schöne Lösungen erstellen. Ein besonders beliebt gewordener Ansatz hierzu ist jQuery, eine Bibliothek, auch Framework genannt, die sich aus unterschiedlichsten Funktionen zusammensetzt und trotzdem im entpackten Zustand weniger als 100 Kilobyte an Umfang mit sich bringt. jQuery wird wie eine CSS-Datei in die Webseite integriert und kann Funktionen bereitstellen, die sich als nützlich erweisen könnten. Dabei ist die Anwendung leicht zu erlernen und auch das Konzept von AJAX lässt sich kombinieren.

Was ist jQuery?

jQuery ist eine Zusammenstellung von Funktionen, die es ermöglichen, sofort auf Datenbanken zuzugreifen oder auf Nutzeranforderungen zu reagieren. In PHP ist es etwa so, dass man eine Seite aufrufen muss, um dort in einer Tabelle Daten aus der Datenbank angezeigt zu bekommen. Mit jQuery und der Ergänzung AJAX kann man das direkt auch lösen, indem der Besucher eine Funktion aufruft und auf der Seite bleibt, während Javascript mit jQuery dank PHP und Datenbank im Hintergrund die Daten erarbeitet. Man muss also die Seite nicht wechseln oder neu laden, um die dynamische Lösung zu erhalten.

Beispiele mit jQuery

Sie haben vielleicht schon auf einer Hotelseite eine Buchung vorgenommen und in ein Datumsfeld geklickt, woraufhin ein Kalender aufgepoppt ist. Dort konnten Sie bequem den Tag auswählen und die Eingabe ist auch schon erledigt. Eine solche Anwendung ist das Plugin Datepicker, eine Erweiterung von jQuery und mit wenigen Zeilen Code in die eigene Seite integriert.

Ein anderes Beispiel für jQuery ist die schon erwähnte Kombination mit AJAX. Stellen Sie sich eine Webseite vor, auf der man seine Kontaktdaten eintragen kann - zum Beispiel, um einen Rückruf eines Kundendienstes zu veranlassen. Normalerweise werden Sie auf eine Kontaktseite weitergeleitet und dort geht es mit der Kontaktaufnahme weiter. Man kann aber auch durch jQuery die Daten weiterleiten und der Besucher sieht eine abgedunkelte Startseite, auf der er sich immer noch befindet, und die Rückmeldung, dass die Daten erfolgreich angenommen wurden. Klickt man auf "OK", sieht man die Seite wieder im Normalzustand. Auch das ist jQuery.

jQuery und AJAX


Webhosting bei Alfahosting - jetzt gratis testen! (Affiliate-Link)


Gerade der Ansatz mit AJAX ist interessant, weil man eine Möglichkeit hat, die PHP zum Beispiel nicht anbieten kann. Stellen wir uns dazu eine Webseite vor, auf der man Einträge aus einer Datenbank gelistet bekommen kann. Aber zuerst muss in einem Select-Formularfeld ausgewählt werden, aus welchem Monat man die Einträge will.

Normaler Vorgang: man wählt den November des Vorjahres und schickt das Formular ab. Die Eingabe wird verarbeitet, die Seite neu geladen und man sieht die Dateneinträge.

Vorgang mit AJAX: Javascript erkennt die Eingabe, schickt sie per AJAX an PHP und PHP fragt die Datenbank ab und sendet das Ergebnis inklusive Formatierungen (Absatz, Liste, Tabelle) zurück und AJAX stellt das Ergebnis auf der Seite dar - ohne Neuladen der Seite.

Das heißt, dass man während einer Aktivität auf der Seite Handlungen setzen kann, die sonst nur mit neuerlichem Laden möglich sind.

Wann macht jQuery Sinn?

Das ist eine Frage, die jeder für sich entscheiden muss. Man kann mit der Bibliothek Effekte wie zu Beginn der Webdesign-Ära durchführen wie etwa das Austauschen von Farben, Datenbanken, Klassen und vielem mehr. Das wird man auf einer professionellen Seite kaum brauchen. Mit CSS hat man genug Rüstzeug für schöne Lösungen und den Austausch braucht man nicht wirklich.

Man kann aber mit AJAX auch dynamische Abfragen ohne Neuladen erstellen, was bei einigen Anwendungen sehr interessant sein kann und dann kann es sich auch lohnen, mehr Skriptvolumen zu riskieren, wobei die Ladezeit immer mehr zum Kriterium in den Suchmaschinen wird. Die Verarbeitung von Formularen gelingt mit PHP sehr gut, mit AJAX kann sie noch schneller und vielleicht auch sehr nutzerfreundlich ablaufen, das muss im Einzelfall bewertet werden.

Wo finde ich die Bibliothek und weitere Infos?

Der nachstehende Link bietet Informationen über die aktuellste Version, aktuelle Projekte und natürlich den Link zum Download der neuesten jQuery-Bibliothek.

https://jquery.com/

Lesen Sie auch

Ein wesentlicher Vorteil bei diversen Effekten mit Javascript ist die Tatsache, dass man das aktuelle Fenster und/oder Dokument direkt ansprechen kann. Mit dem Fenster-Objekt kann man festlegen, ob es sich in der Größe verändern darf, beim Dokument-Objekt kann man die Hintergrundfarbe ändern oder andere Daten abrufen.

Weitere Möglichkeiten gibt es mit den Event-Handler. Das sind die berühmten Funktionen rund um Links, wie der Mouseover-Effekt, aber auch bei Formularfeldern gibt es Möglichkeiten. Einige dieser Optionen sind aber durch CSS schon abgelöst worden. Eine andere Variante ist die umfangreiche Bibliothek jQuery, mit der mittels AJAX auch PHP-Abfragen von Datenbanken gelingen, ohne die Seite neu laden zu müssen.

Themenseiten

Diesen Artikel teilen

Infos zum Artikel

jQuery in JavascriptArtikel-Thema: Javascript-Bibliothek jQuery
Beschreibung: Mit der umfangreichen Javascript-Bibliothek 🎨 jQuery kann man dynamische Lösungen auf Webseiten erarbeiten wie etwa mit ✅ AJAX Datenbankabfragen in PHP.

Kategorien

Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen

Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel
Praxisartikel