Das Web interaktiv machen Eine Einführung in jQuery

jQuery ist eine clientseitige Skriptbibliothek, die von fast jeder modernen Website verwendet wird - sie macht Websites interaktiv. Es ist nicht die einzige Javascript-Bibliothek, aber es ist die am meisten entwickelte, am meisten unterstützte und am häufigsten verwendete. Es ist einer der Bausteine ​​einer modernen Website. Aber was genau ist jQuery, was macht es so beliebt und warum sollten Sie sich darum kümmern, wenn Sie als Webentwickler anfangen??

Was ist jQuery??

jQuery ist eine Erweiterung von Javascript, einer Bibliothek mit Javascript-Funktionen und -Dienstprogrammen, die visuelles Flair hinzufügen und die Implementierung erweiterter Funktionen in wenigen Codezeilen vereinfachen. Es wird von Browsern und Open Source unterstützt. Außerdem können Sie die jQuery-Funktionalität mit einfach zu verwendenden Plugins erweitern.

jQuery basiert auf Javascript, fügt jedoch Methoden und Funktionen hinzu, die in reinem Javascript nicht gefunden werden. Es wurde erstellt, um die Verwendung von Javascript zu vereinfachen und die Probleme mit der verschiedenen Javascript-Implementierung in verschiedenen Browsern zu beseitigen. Mit jQuery können Sie einfach nur einmal schreiben, und jQuery interpretiert Ihren Code für jeden Browser korrekt.

Die Hauptfunktion von jQuery ist die DOM-Manipulation (DOM ist das Document Object Model). Dies bedeutet die zugrunde liegende Struktur jeder von Ihnen besuchten Webseite. Alles, was Sie auf der Seite sehen - und viele, die Sie nicht sehen - wird im DOM dargestellt.

jQuery ist nicht die einzige Javascript-Bibliothek, aber es ist die beliebteste - ungefähr 55% der Top-10.000-Websites verwenden sie. Prototyp, MooTools und Scriptaculous sind beliebte Alternativen, werden aber bei weitem nicht so gut unterstützt.

Clientseite vs. Serverseite

Die meisten Webseiten werden auf der Serverseite generiert. MakeUseOf verwendet PHP und MySQL (in Form von WordPress), um die Artikeldaten aus einer Datenbank abzurufen und dann eine Vorlage auf diese Daten anzuwenden. Die resultierende Seite wird an Ihren Browser gesendet, interpretiert und Ihnen angezeigt. Wenn Sie auf einen Link klicken, wird eine weitere Anforderung an die Datenbank gesendet, und eine weitere Seite wird generiert. Was aber, wenn Sie eine Art Interaktivität auf der Seite erstellen möchten? Ein Formular, das überprüft, was der Benutzer eingibt (z. B. Twitter, das zählt, wie viele Buchstaben noch übrig sind), eine Schaltfläche, die ein Dialogfeld öffnet, oder Sie möchten vielleicht weitere Daten laden, ohne die gesamte Seite neu laden zu müssen?

Das ist wo clientseitige Skripterstellung kommt ins Spiel. Dort übernimmt der Client - Ihr Browser - das Heben. Die meisten Websites, darunter auch diese, verwenden etwas von beiden.

Warum jQuery verwenden??

Visuelles Flair

Mit jQuery können Sie Teile der Webseite als Reaktion auf Benutzeraktionen ändern. Als schnelles Beispiel, Klicken Sie auf diesen Link - jeder Link auf der Seite wird angezeigt zu rot wechseln. Nutzlos? Vielleicht, aber Sie verstehen den Punkt. Bild-Diashows werden häufig von jQuery verwendet. Das Abwägen sinnloser visueller Effekte und wirklich nützliche Ergänzungen der Benutzererfahrung ist Teil der Fähigkeiten eines Webentwicklers.

Hier ist eine kurze Liste einiger wirklich beeindruckender Effekte, die Sie erzielen können.

Einfache Events

Nahezu die gesamte Software arbeitet mit einem Ereignismodell - klicken Sie auf etwas und ein Klickereignis wird ausgelöst. Ziehen Sie Ihren Finger über ein Tablett, und ein Ziehereignis wird ausgelöst. Anwendungen “Hör mal zu” Wenn Sie diese Ereignisse durchführen und etwas tun möchten, können Sie dies mit jQuery in einem Browser tun.

AJAX einfach durchführen

Asynchrones Javascript und XML ist eine Möglichkeit, mit einem Remote-Server zu kommunizieren, ohne eine weitere Seite laden zu müssen. Ein gutes Beispiel dafür ist der Facebook-Statusstrom. Scrollen Sie durch alle Updates, bis Sie zum Ende kommen. Du kannst nicht Sobald Sie das Ende erreicht haben, erkennt jQuery, dass Sie sich in der Nähe befinden, und sendet eine AJAX-Anforderung, um weitere Status anzuzeigen.

Sie fügt sie dann in die aktuelle Seite ein, ohne dass Sie es merken. Sie erhalten einen unendlichen Strom von Updates, die jedoch nicht alle beim Start geladen werden.

Erweiterte Benutzeroberflächen

Neben dem Core-Plug-In für die jQuery-Benutzeroberfläche können Sie vollständige Webanwendungen mit Standardformularkomponenten erstellen. Fortschrittsbalken, Schieberegler, Schaltflächen, Registerkarten, Ziehen und Ablegen - alles ist vorhanden. Mit einem einfachen Themensystem können Sie das Erscheinungsbild anpassen oder einen der Standardwerte verwenden.

Kümmert mich das?

Wenn Sie überhaupt Interesse an der Entwicklung von Websites haben Welche Programmiersprache muss man lernen - Webprogrammierung Welche Programmiersprache muss man lernen - Webprogrammierung Heute werfen wir einen Blick auf die verschiedenen Webprogrammiersprachen, die das Internet unterstützen. Dies ist der vierte Teil einer Programmierserie für Anfänger. In Teil 1 haben wir die Grundlagen von… Lesen Sie mehr, dann ja - jQuery ist eine Sache, die Sie unbedingt lernen müssen. Wenn Sie sich jemals gefragt haben “Wie kann ich X zu Y machen, wenn der Benutzer Z macht??”, dann wirst du jQuery lieben. Das Hinzufügen zu Ihrer Site ist so einfach wie das Hinzufügen eines Links in der Kopfzeile. oder WordPress sagen, es zu laden.

Möchten Sie jQuery lernen? Lass es uns in den Kommentaren wissen und ich werde sehen, was ich tun kann.

Bildnachweise: Dynamische, rotierende Werbetafel, erstellt mit jQuery, PistolSlut.com, Diagramm mit jQuery