So richten und verwenden Sie JQuery?

So richten und verwenden Sie JQuery?
JQuery ist eine der am häufigsten verwendeten JavaScript -Bibliotheken der aktuellen Zeit. JQuery ermöglicht es seinen Benutzern, Funktionen auszuführen, für die normalerweise viele Codezeilen mit nur wenigen kurzen JavaScript -Sätzen erforderlich sind. Die Entwickler von JQuery haben wichtige Funktionen eingeholt, die ein Webentwickler häufig in verschiedenen Funktionen benötigt, die er dann implementieren kann, indem er einfach die Funktion aufruft und eine bestimmte Syntax befolgt.

Aber wie Sie JQuery in Ihrem Projekt einrichten? Nun, es gibt 3 Hauptmethoden, um JQuery in Ihrem Projekt zu importieren. Diese 3 Methoden sind:

  • Laden Sie JQuery herunter und fügen Sie es in Ihrer HTML -Datei als Skript hinzu
  • Mit einem CDN gehosteten JQuery in Ihrem Projekt
  • Wenn Sie an einem NodeJS -Projekt arbeiten, können Sie JQuery aus dem NPM installieren

Lassen Sie uns alle drei dieser Methoden durchgehen

Methode 1: Herunterladen und Verknüpfung von JQuery in Ihrem Projekt

Die erste und standardmäßigste Möglichkeit, JQuery einzurichten und zu verwenden, besteht darin, auf ihre offizielle Website zu gehen.

Auf der Website von JQuery gibt es zwei verschiedene Versionen zum Download. Eine der Versionen ist als die sogenannte "ProduktionsversionUnd der andere ist als das bekannt "Entwicklungsversion”. Der Hauptunterschied zwischen diesen beiden Versionen besteht darin, dass die Produktion eines komprimiert ist und für Live -Websites am besten geeignet ist, während die Entwicklung One eine unkomprimierte Version zum Testen neu veröffentlichter Funktionen und Beta -Funktionen ist.

Sobald Sie die Version heruntergeladen haben, die Sie angemessen scheinen, müssen Sie die JQuery -Datei in die HTML mit dem aufnehmen Skript -Tag Denn am Ende des Tages ist JQuery Javascripts Bibliothek.

Für diese Verknüpfung verwenden Sie die folgenden Codezeilen:



Und mit diesen sind Sie jetzt bereit, JQuery -Code in Ihre Website zu schreiben.

Methode 2: Verwenden eines CDN -gehosteten JQuery in Ihrem Projekt

CDN steht für Content Delivery Network und Sie können JQuery verwenden, das beispielsweise auf einem CDN gehostet wird, Googles CDN. Gehen Sie zu Google und suchen Sie nach "Jquery CDN Google". Sie erhalten einen Link zu Google CDNs JQuery, wie unten gezeigt:

Kopieren Sie diesen Link und fügen Sie ihn in Ihre HTML -Datei unter dem Skript -Tag ein. Er sieht so aus



Die Verwendung eines CDN-Hosted JQuery hat seine eigenen Vorteile, in erster Linie und der wichtigste Vorteil, dass Ihr JQuery immer aktuell ist. Und zweitens sind die meisten Browser beim Surfen im Internet auf einen von CDN veranstalteten JQuery gestoßen. Wenn der Kunde auf Ihre Website kommt, muss der Browser das JQuery nicht herunterladen, da es bereits in seinem Cache-Speicher vorhanden ist.

Methode 3: Verwenden Sie NPM zur Installation von JQuery

JQuery ist auch in der NPM -Bibliothek verfügbar und kann somit in einem NodeJS -Projekt durch die folgende Zeile im Terminal des Code -Editors installiert werden:

npm install JQuery

Und wenn Sie an einer Garn-basierten CLI arbeiten, können Sie JQuery mit der folgenden Zeile installieren:

Garn fügen Sie JQuery hinzu

Und so ist es dabei.

Mit jQuery

Um die Verwendung von JQuery zu demonstrieren, erstellen Sie eine neue HTML -Datei und fügen Sie in den folgenden Zeilen in dieser Datei hinzu:


Ich bin ein Textfeld


Mit diesen erhalten Sie die folgende Ausgabe in Ihrem Browser:

Erstellen Sie nun ein Skript -Tag und schreiben Sie die folgenden JQuery -Zeilen darin, um die Hintergrundfarbe des Textfelds zu ändern:

Mit diesen Linien beobachten Sie die folgende Änderung der Ausgabe:

Das war's, Sie haben erfolgreich eingerichtet und JQuery verwendet.

Abschluss

JQuery ist eine Must-Have-JavaScript-Bibliothek, wenn es darum geht, Websites zu codieren, da dies für den Entwickler jede Menge Zeit spart. JQuery enthält häufig verwendete Operationen für die Webentwicklung, bei denen mehrere Codezeilen in einer Funktion eingewickelt werden müssen, die dann mithilfe der bloßen Mindestmenge verwendet werden kann. JQuery kann auf drei verschiedene Arten in unser Projekt einbezogen werden und wir haben alle drei dieser Wege in diesem Beitrag behandelt.