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.
Une fois le programme d’installation téléchargé, l’étape suivante consiste à exécuter le programme d’installation.
Après avoir exécuté le programme d’installation, appuyez sur Suivant
et acceptez l’accord ; après cela, appuyez trois fois sur Suivant
.
Cochez l’option installer automatiquement les outils nécessaires
, cliquez sur Suivant
puis cliquez sur Installer
.
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
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 :
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