jQuery
Eine kleine einfach zu erlernende und funktionsreiche JavaScript-Bibliothek.
jQuery – Die Grundlagen
„JavaScript offers us a self explanatory function too“- callmenick.com
HTML, CSS und JavaScript sind die drei Grundsprachen des Internets. Wir strukturieren unsere Webseiten mit HTML, gestalten sie mit CSS und fügen interaktive Funktionalität mit JavaScript hinzu. In der Tat werden die meisten Animationen und jede Aktion, die als Ergebnis eines Benutzerklicks resultieren, mit JavaScript konstruiert.
JQuery ist die „Write Less, Do More“ (frei nach dem Motto: Schreiben Sie weniger, machen Sie mehr) JavaScript-Bibliothek, welches PlugIns enthält. Es ist ein JavaScript-Toolkit, das entworfen wurde, um verschiedene Aufgaben zu vereinfachen, indem man weniger Code schreibt. Es ist nicht eine Programmiersprache, sondern ein Werkzeug, das verwendet wird, um das Schreiben von gemeinsamen JavaScript-Aufgaben präziser zu machen. JQuery hat den zusätzlichen Vorteil der Cross-Browser-Kompatibilität, was bedeutet, Sie können sicher sein, die Ausgabe Ihres Codes wird in jedem modernen Browser richtig dargestellt.
Um mit jQuery arbeiten zu können, werden Grundlagen von JavaScript, HTML und CSS benötigt. Hilfestellung bietet dabei das beliebte Forum W3Schools (https://www.w3schools.com/jquery/jquery_intro.asp). JQuery vereinfacht die JavaScript-Programmierung erheblich. Es macht Dinge wie zum Beispiel die HTML-Dokument Manipulation, Event-Nutzung, Animation und Ajax viel einfacher. Dies wird mit einer einfach zu bedienenden API sichergestellt, die über eine Vielzahl von Browsern funktioniert. Die Bibliothek besitzt Elemente und Komponenten, die eine individuelle Interaktivität herstellt und Animationen auf Ihrer Website einbindet.
jQuery besitzt viele eingebaute Animationseffekte, die Sie auf Ihren Webseiten nutzen können. Die Wahl der Möglichkeit, eine JavaScript-Funktion zu festzulegen, kann für Anfänger verwirrend sein, da es verschiedene Möglichkeiten gibt, Funktionen mit JavaScript/jQuery zu erstellen. Es ist ein sehr kompakter und gut geschriebener JavaScript-Code, der die Produktivität des Entwicklers erhöht, indem er ihnen ermöglicht, kritische UI-Funktionalität zu erreichen, indem er sehr wenig Code geschrieben hat.
Es ist keine Notwendigkeit, eine neue Syntax zu lernen, um jQuery zu verwenden. Das Wissen einer einfachen JavaScript-Syntax ist genug . Es ist ein einfacher und gut lesbarer Code, und es gibt keine Notwendigkeit, mehrere Zeilen von Codes zu schreiben, um eine komplexe Funktionalität zu erreichen.
Das DOM – Document Object Model
Im Kern wird jQuery verwendet, um mit HTML-Elementen im Browser über das DOM zu verbinden. Das Document Object Model (DOM) ist die Methode, mit der JavaScript (und jQuery) mit dem HTML in einem Browser interagieren. Um genau zu sehen, was das DOM ist, in Ihrem Webbrowser enthält, klicken Sie mit der rechten Maustaste auf die aktuelle Website. Dies eröffnet Entwickler-Tools. Der HTML-Code, der da zu sehen ist, ist der DOM.
Jedes HTML-Element (Beispiel: alle „div“- Elemente oder „title“-Elemente) gilt als Knoten im DOM – ein Objekt, das JavaScript berühren und ansprechen kann. Diese Objekte sind in einer Baumstruktur angeordnet, wobeinäher an der Wurzel liegt und jedes verschachtelte Element ein Zweig weiter entlang des Baums ist.
JavaScript kann diese Elemente hinzufügen, entfernen und ändern. Die jQuery machte es einfach, DOM-Elemente auszuwählen, sie zu durchqueren und ihre Inhalte zu modifizieren, indem sie ein Cross-Browser-Open-Source-Selektor-Programm namens Sizzle verwenden. Wenn Sie mit der rechten Maustaste auf die Seite klicken und auf View Page Source klicken, sehen Sie die rohe HTML-Ausgabe der Website.
Es passiert schnell, dass das DOM mit der HTML-Quelle verwechselt wird, aber es gibt gravierende Unterschiede- die Seitenquelle ist genau das, was in der HTML-Datei geschrieben ist. Es ist statisch und wird sich nicht ändern und wird nicht von JavaScript betroffen sein. Das DOM ist dynamisch und kann sich ändern. Die äußerste Schicht des DOM, die Schicht, die den gesamten-Knoten verpackt, ist das Dokumentobjekt.
Um die Seite mit jQuery zu manipulieren, müssen wir sicherstellen, dass das Dokument zuerst fertig ist. JQuery erkennt diesen Zustand der Bereitschaft, so dass der Code, der in dieser Funktion („function“) enthalten ist, nur ausgeführt wird, sobald das Document Object Model für den JavaScript-Code bereit ist.
AJAX Support
Die jQuery hilft Ihnen, eine reaktionsfähige und funktionsreiche Websites mit der Technologie von AJAX zu entwickeln. Mit dieser Technik können einzelne Teile der Website aktualisiert werden, ohne die komplette Seite neu zu laden. Zum Beispiel gilt dies für Videos, oder auch Live-Ticker. Dabei werden Daten vom Server geladen und angefordert ohne Einfluss auf andere Funktionen.
Selektor
Mit Selektoren sagen wir jQuery, welche Elemente wir bearbeiten möchten (z. B. „title“-Elemente oder Überschriften). Die meisten jQuery Selektoren sind die gleichen wie das, was Sie in CSS kennen, mit ein paar jQuery-spezifischen Ergänzungen.
Events
Ein Event ist jederzeit, wenn der Benutzer mit dem Browser interagiert. Normalerweise geschieht dies mit der Maus oder der Tastatur. Beispiel: click() (Ereignis beim Klick auf eine Stelle der Website). Aus der offiziellen jQuery-Dokumentation können Sie eine vollständige Liste der jQuery-Ereignismethoden anzeigen.
Gängige Funktionen und Möglichkeiten
Die Alert () -Methode zeigt ein Alert-Feld mit einer angegebenen Meldung und eine OK-Taste an. Eine Alert wird oft verwendet, wenn Sie sicherstellen möchten, dass Informationen an den Benutzer übergehen. Die Alert-Box nimmt den Fokus weg vom aktuellen Fenster und zwingt den Browser, die Nachricht zu lesen. Auf der Suche nach der optimalen Programmierung für mobile Endgeräte, gibt es zahlreiche Plugins (eine Auswahl hier zu finden: https://jquery.com/ ) , die die Funktionalität der Webanwendung erweitern.
„Lazy Load“ wäre da ein Beispiel für ein Plugin, das verwendet werden kann, um die Ladezeit mobiler Seiten zu verbessern, indem nur die Datei des Bildes geladen wird, die sich im Ansichtsfenster befindet. Das kann man beschleunigen. Dann muss der Benutzer nicht auf die Bilder warten, die sich nicht einmal im angezeigten Fenster befinden, bevor die Seite geladen wird.
Manchmal, wenn eine Webseite auf einem mobilen Gerät betrachtet wird, werden bestimmte Elemente kleiner dargestellt, um in das Ansichtsfenster zu passen. Wenn die Elemente kleiner werden, halten sie nicht immer die gleiche Menge an Inhalt wie zuvor auf der Desktopversion. Das jQuery dot dot dot plugin ist ein kostenloser, leichter Weg, um dieses potenzielle Problem zu bewältigen.
„In jQuery, a similar function goes down when getting the style.“ (callmenick.com) Die jQuery-Entwickler-Community ist einer der großzügigsten und engagiertesten im Internet. Sie bietet immer wieder neue Werkzeuge an, die das Arbeiten mit jQuery, und vor allem in Bezug auf das Webdesign, erleichtern. Die Menge und Qualität der kostenlosen jQuery Plugins ist immens.
