Utiliser le module jQuery NPM

Sheeraz Gul 15 février 2024
Utiliser le module jQuery NPM

NPM fait partie du package node.js. Ce tutoriel montre comment installer et utiliser le module jQuery npm.

Utiliser le module jQuery NPM

Installer Node.js avec NPM

Pour utiliser d’abord le module jQuery npm, nous devons d’abord installer le module npm, qui est inclus dans le package node.js. Accédez à ce lien et téléchargez votre programme d’installation.

Installateur NPM

Une fois le programme d’installation téléchargé, l’étape suivante consiste à exécuter le programme d’installation.

Exécutez le programme d’installation de NPM

Après avoir exécuté le programme d’installation, appuyez sur Suivant et acceptez l’accord ; après cela, appuyez trois fois sur Suivant.

Accepter le programme d’installation NPM

Cochez l’option installer automatiquement les outils nécessaires, cliquez sur Suivant puis cliquez sur Installer.

Installation de NPM

Une fois l’installation terminée, cliquez sur Terminer, et le Node.js avec npm est installé.

Vérifiez l’installation via l’invite de commande ou PowerShell. Exécutez la commande suivante.

npm -v

Vérifier NPM

Une fois le Node.js avec npm installé, l’étape suivante consiste à installer le module jquery avec npm.

Installer jquery avec NPM

Assurez-vous d’installer le module jquery, et non le jquery. Suivez les étapes ci-dessous.

Étape 1 : Créez le fichier package.json en utilisant la commande suivante dans l’invite de commande pour garder une trace des dépendances et des modules.

npm init -y

La sortie de la commande ci-dessus ressemblera à ceci :

C:\>npm init -y
Wrote to C:\package.json:

{
  "name": "",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Étape 2 : Installez le module jquery ; utilisez la commande suivante.

npm install jquery

Étape 3 : Une fois le module jquery installé, l’étape suivante consiste à installer jsdom car jQuery est une bibliothèque frontale ; c’est pourquoi il a besoin d’une fenêtre pour les opérations de backend. Utilisez la commande suivante pour installer jsdom.

npm install jsdom

Etape 4 : Importez le module jsdom en JavaScript.

const dom = new jsdom.JSDOM("")

Etape 5 : Créez une nouvelle fenêtre jsdom créée par l’objet jsdom avec le code HTML en paramètre. Voir l’exemple ci-dessous.

const dom = new jsdom.JSDOM("")

Étape 6 : Importez maintenant jquery et fournissez-lui une fenêtre. Utilisez le code suivant.

const jquery = require('jquery')(dom.window)

Essayons maintenant un exemple pour utiliser jquery avec npm. Voir exemple :

// Import the jsdom module
const jsdom = require('jsdom');

// Create a window with a document
const dom = new jsdom.JSDOM(`<!DOCTYPE html>
<body>
<h2> DELFTSTACK </h2>
<p>This is delftstack.com</p>
</body>
`);

// Import the jquery with window
const jquery = require('jquery')(dom.window);

// Append a HTML element to the body
jquery('body').append('<p> The Best Tutorial Site </p>');

// Get the content of the body
const Body_Content = dom.window.document.querySelector('body');

// Print the content of body
console.log(Body_Content.textContent);

Le code ci-dessus utilisera npm jquery pour ajouter du contenu HTML au corps. Voir la sortie :

jquery NPM

Auteur: Sheeraz Gul
Sheeraz Gul avatar Sheeraz Gul avatar

Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.

LinkedIn Facebook