Heim >Web-Frontend >Front-End-Fragen und Antworten >So führen Sie JQuery in eine JS-Datei ein

So führen Sie JQuery in eine JS-Datei ein

WBOY
WBOYOriginal
2023-05-18 16:04:086183Durchsuche

In der Webentwicklung ist jQuery eine sehr beliebte JavaScript-Bibliothek, die das Schreiben von JavaScript-Code und die Manipulation von DOM erheblich vereinfacht, ohne dass man sich zu viele Gedanken über Kompatibilitätsprobleme machen muss. Wenn wir die Entwicklung eines Projekts abschließen, verwenden wir normalerweise jQuery, um die Entwicklungseffizienz zu beschleunigen und die Wartbarkeit und Stabilität des Projekts zu verbessern. Wie führt man also jQuery in eine JS-Datei ein? In diesem Artikel werden zwei gängige Methoden detailliert beschrieben.

Methode 1: Einführung über CDN

CDN (Content Delivery Network) ist eine Gruppe von an verschiedenen Orten verstreuten Servern, die die Übertragung von Website-Inhalten zwischenspeichern und beschleunigen können, wodurch die Website schneller geladen wird. jQuery verfügt über einige CDN-Dienstanbieter (wie Google, Microsoft, Baidu usw.), und wir können jQuery über die von ihnen bereitgestellten Links vorstellen.

Am Beispiel von Google CDN können wir den folgenden Code kopieren und in die HTML-Datei einfügen:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

In diesem Code gibt das „src“-Attribut an, wo der jQuery-Code geladen werden soll. Wenn die Seite geladen wird, lädt der Browser jQuery automatisch vom Google-Server herunter und speichert es im Cache, anstatt es von unserem Server herunterzuladen, was die Ladegeschwindigkeit der Seite erheblich verbessern kann.

Wenn wir JS-Code schreiben, müssen wir nur das „$“-Symbol in der entsprechenden JS-Datei verwenden, wie zum Beispiel:

$(document).ready(function() {
    // ...
});

Zu diesem Zeitpunkt haben wir jQuery erfolgreich eingeführt und können das $-Symbol verwenden, um auf verschiedene Funktionen zu verweisen bereitgestellt in der jQuery-Funktionsfunktion.

Methode 2: Importieren über Dateien

Zusätzlich zum Importieren von jQuery aus dem CDN können wir jQuery auch lokal herunterladen und über Dateien importieren. Die spezifische Methode ist wie folgt:

  1. Besuchen Sie die offizielle jQuery-Website (https://jquery.com/) und laden Sie die neueste jQuery-komprimierte Datei herunter.
  2. Extrahieren Sie die heruntergeladene Datei auf Ihren lokalen Computer, kopieren Sie beispielsweise jquery.min.js in den Ordner „js“.
  3. Fügen Sie den folgenden Code in die HTML-Datei ein:
<script src="js/jquery.min.js"></script>
<script src="js/myscript.js"></script>

Die erste Codezeile hier spezifiziert das Laden des jQuery-Skripts, während die zweite Codezeile das JS-Skript angibt, das wir selbst geschrieben haben, zum Beispiel „myscript.js“.

  1. Verwenden Sie in der Datei myscript.js das $-Symbol, um jQuery einzuführen, zum Beispiel:
$(document).ready(function() {
    // ...
});

Hier ist zu beachten, dass wir bei der Verwendung einer Datei zum Einführen von jQuery sicherstellen müssen, dass die jQuery-Datei korrekt referenziert wird Die Reihenfolge des Codes ist ebenfalls sehr wichtig. Wenn wir unsere eigenen JS-Dateien vor jQuery einfügen, meldet der Code einen Fehler.

Die oben genannten sind zwei gängige Methoden zur Einführung von jQuery. Wenn wir jQuery verwenden müssen, müssen wir nur einen Weg wählen, der zu uns passt, und können dann problemlos wartbare und stabile Webanwendungen schreiben.

Das obige ist der detaillierte Inhalt vonSo führen Sie JQuery in eine JS-Datei ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:jquery ändert den EingabewertNächster Artikel:jquery ändert den Eingabewert