Comment configurer et commencer à utiliser jQuery?

JQuery est l'une des bibliothèques JavaScript les plus utilisées de l'heure actuelle, JQuery permet à ses utilisateurs d'effectuer des fonctions qui nécessitent normalement beaucoup de lignes de code avec seulement quelques phrases courtes de JavaScript. Les développeurs de jQuery ont enveloppé des fonctionnalités importantes qu'un développeur Web a besoin assez souvent dans différentes fonctions qu'il peut alors implémenter en appelant simplement la fonction et en suivant une syntaxe spécifique.

Mais, comment configurer jQuery dans votre projet? Eh bien, il existe 3 principales façons d'importer jQuery dans votre projet. Ces 3 méthodes sont:

• Télécharger jQuery et l'ajouter dans votre fichier HTML en tant que script
• Utilisation d'un jQuery hébergé par CDN dans votre projet
• Si vous travaillez sur un projet NodeJS, vous pouvez installer jQuery à partir du NPM

Passons en revue ces trois méthodes

Méthode 1: Télécharger et lier jQuery dans votre projet

La première façon la plus standard de configurer et d'utiliser jQuery est de passer à leur site officiel.

Sur le site Web de JQuery, il existe deux versions différentes disponibles en téléchargement, l'une des versions est connue sous le nom de «Version de production»Et l'autre est connu comme le«Version de développement". La principale différence entre ces deux versions est que la production est compressée et est la plus adaptée aux sites Web en direct tandis que le développement est une version non compressée pour tester les fonctionnalités et les fonctionnalités bêta nouvellement publiées également.

Une fois que vous avez téléchargé la version, vous semblez adéquate, vous devez inclure le fichier jQuery dans le HTML avec le étiquette de script Parce que, à la fin de la journée, JQuery est la bibliothèque de JavaScript.

Pour ce lien, vous utilisez les lignes de code suivantes:

Et avec ceux-ci, vous êtes maintenant prêt à écrire du code jQuery sur votre site Web.

Méthode 2: Utilisation d'un jQuery hébergé par CDN dans votre projet

CDN signifie Content Delivery Network, et vous pouvez utiliser jQuery qui est hébergé sur un CDN, par exemple, CDN de Google. Allez sur Google et recherchez "jQuery CDN Google" et vous obtiendrez un lien vers JQuery de Google CDN comme indiqué ci-dessous:

Copiez ce lien et collez-le dans votre fichier html sous la balise de script, il ressemblera à ceci

L'utilisation d'un jQuery hébergé par CDN a ses propres avantages, d'abord et l'avantage avant tout l'utiliser est que votre jQuery est toujours à jour. Et deuxièmement, la plupart des navigateurs sont tombés sur une jQuery hébergée par CDN lors de la surfer sur Internet, donc lorsque le client vient sur votre site Web, son navigateur n'a pas besoin de télécharger la jQuery car elle est déjà présente dans sa mémoire de cache.

Méthode 3: Utilisation de NPM pour installer jQuery

JQuery est également disponible sur la bibliothèque NPM et peut donc être installé dans un projet NodeJS en utilisant la ligne suivante dans le terminal de l'éditeur de code:

NPM Installer JQuery

Et si vous travaillez sur un CLI basé sur le fil, vous pouvez installer jQuery en utilisant la ligne suivante:

fil Ajouter jQuery

Et c'est à peu près tout sur la façon de configurer jQuery, maintenant vous pouvez écrire votre code avec jQuery inclus à l'intérieur.

Utilisation de jQuery

Pour démontrer l'utilisation de jQuery, créez un nouveau fichier HTML et ajoutez les lignes suivantes dans ce fichier:

Je suis un champ de texte

Avec ceux-ci, vous obtiendrez la sortie suivante sur votre navigateur:

Maintenant, créez une balise de script et écrivez les lignes jQuery suivantes à l'intérieur pour modifier la couleur d'arrière-plan du champ de texte:

Avec ces lignes, vous observerez le changement suivant dans la sortie:

Voilà, vous avez réussi à installer et à utiliser jQuery.

Conclusion

JQuery est une bibliothèque JavaScript incontournable en ce qui concerne le codage des sites Web en raison du fait que cela économise des tonnes de temps pour le développeur. JQuery contient des opérations fréquemment utilisées pour le développement Web qui nécessitent plusieurs lignes de code enveloppées dans une fonction qui peut ensuite être utilisée en utilisant la quantité minimale de code nue. JQuery peut être inclus dans notre projet de trois manières différentes et nous avons couvert ces trois façons dans ce post.