Maison > interface Web > Questions et réponses frontales > Comment introduire jquery dans un fichier js

Comment introduire jquery dans un fichier js

WBOY
Libérer: 2023-05-18 16:04:08
original
6220 Les gens l'ont consulté

Dans le développement Web, jQuery est une bibliothèque JavaScript très populaire, qui simplifie grandement l'écriture de code JavaScript et la manipulation du DOM sans trop se soucier des problèmes de compatibilité. Lorsque nous terminons le développement d'un projet, nous utilisons généralement jQuery pour accélérer l'efficacité du développement et améliorer la maintenabilité et la stabilité du projet. Alors, comment introduire jQuery dans un fichier JS ? Cet article détaillera deux méthodes courantes.

Méthode 1 : Introduire via CDN

CDN (Content Delivery Network) est un groupe de serveurs dispersés à différents endroits qui peuvent mettre en cache et accélérer la transmission du contenu du site Web, accélérant ainsi le chargement du site Web. jQuery dispose de certains fournisseurs de services CDN (tels que Google, Microsoft, Baidu, etc.), et nous pouvons présenter jQuery via les liens qu'ils fournissent.

En prenant Google CDN comme exemple, nous pouvons copier et coller le code suivant dans le fichier HTML :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
Copier après la connexion

Dans ce code, l'attribut "src" précise où charger le code jQuery. Lorsque la page se charge, le navigateur télécharge automatiquement jQuery depuis le serveur Google et le met en cache au lieu de le télécharger depuis notre serveur, ce qui peut grandement améliorer la vitesse de chargement de la page.

Lorsque nous écrivons du code JS, il nous suffit d'utiliser le symbole "$" dans le fichier JS correspondant, tel que :

$(document).ready(function() {
    // ...
});
Copier après la connexion
Copier après la connexion

À ce stade, nous avons introduit avec succès jQuery, et nous pouvons utiliser le symbole $ pour référencer diverses fonctions fourni dans la fonction jQuery Function.

Méthode 2 : Importer via des fichiers

En plus d'importer jQuery depuis CDN, nous pouvons également télécharger jQuery localement et importer via des fichiers. La méthode spécifique est la suivante :

  1. Visitez le site officiel de jQuery (https://jquery.com/) et téléchargez le dernier fichier compressé jQuery.
  2. Extrayez le fichier téléchargé sur votre ordinateur local, par exemple, copiez jquery.min.js dans le dossier "js".
  3. Ajoutez le code suivant dans le fichier HTML :
<script src="js/jquery.min.js"></script>
<script src="js/myscript.js"></script>
Copier après la connexion

La première ligne de code ici spécifie le chargement du script jQuery, tandis que la deuxième ligne de code spécifie le script JS que nous avons écrit nous-mêmes, par exemple "myscript.js".

  1. Dans le fichier myscript.js, utilisez le symbole $ pour introduire jQuery, par exemple :
$(document).ready(function() {
    // ...
});
Copier après la connexion
Copier après la connexion

Il est à noter ici que lors de l'utilisation d'un fichier pour introduire jQuery, nous devons nous assurer que le fichier jQuery est correctement référencé , et l'ordre du code est également très important . Si nous mettons nos propres fichiers JS avant jQuery, le code signalera une erreur.

Voici deux manières courantes d'introduire jQuery. Lorsque nous devons utiliser jQuery, il nous suffit de choisir la méthode qui nous convient, puis nous pouvons écrire avec plaisir des applications Web maintenables et stables.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal