How to Use jQuery with Node.js ?
jQuery is a popular JavaScript library primarily used for client-side scripting to simplify HTML document traversal, event handling, animation, and AJAX interactions. Although jQuery is designed for the browser, you might find scenarios where you want to use it on the server side with Node.js, such as for web scraping or manipulating HTML documents. In this article, we’ll explore how to use jQuery with Node.js.
Note: Use the ‘jquery’ module, not the ‘jQuery’ module as the latter is deprecated.
Getting jQuery to work in NodeJS
Step 1 :
Making the package.json file. Use the following command to create the package.json file, which keeps track of the modules and dependencies.
npm init -y
The ‘-y’ tag makes yes the default answer for all the questions asked while creating the package.json file.
Step 2:
Installing the jquery module. Use the following command to install the jquery module.
npm install jquery
Step 3 :
Installing the jsdom module. Since jQuery is a frontend JavaScript Library, it needs to have a window with a document to work in the backend. ‘jsdom’ is a library that is used to parse and interact with the HTML. It is not exactly a web browser but mimics one. Use the following command to install the jsdom module.
npm install jsdom
Step 4 :
Importing the jsdom module. Use the require method to import the jsdom module.
const jsdom = require('jsdom')
Step 5:
Creating a new window. We create a window with a document by creating a JSDOM object, with the HTML code as the parameter. Following code is used to create a window with a document :-
const dom = new jsdom.JSDOM("")
Step 6:
Importing jQuery and providing it with a window. Once the window with a document is created, we can use the jquery module by providing it with the window we created. The following code is used to import the jquery module.
const jquery = require('jquery')(dom.window)
That’s it we have successfully loaded jquery into our Node.js application.
Example: To get a better understanding of how it works, please go through the below example :-
// Importing the jsdom module
const jsdom = require("jsdom");
// Creating a window with a document
const dom = new jsdom.JSDOM(`<!DOCTYPE html>
<body>
<h1 class="heading">
w3wiki
</h1>
</body>
`);
// Importing the jquery and providing it
// with the window
const jquery = require("jquery")(dom.window);
// Appending a paragraph tag to the body
jquery("body").append("<p>Is a cool Website</p>");
// Getting the content of the body
const content = dom.window.document.querySelector("body");
// Printing the content of the heading and paragraph
console.log(content.textContent);
Output:
w3wiki
Is a cool website
Conclusion
By using jsdom, you can leverage the power of jQuery in a Node.js environment. This setup is particularly useful for tasks such as web scraping, where you need to interact with HTML content on the server side. With this knowledge, you can now integrate jQuery into your Node.js projects and take advantage of its powerful features for DOM manipulation and traversal.
Contact Us