JIYIK CN >

jQuery is a popular JavaScript library that is widely used to build web applications. It provides a rich set of APIs for interacting with the DOM, making HTTP requests, handling events, etc.

Node.js is a JavaScript runtime that allows developers to execute JavaScript code outside of a web browser. It provides a rich set of APIs for building server-side applications and is commonly used to build web servers, APIs, and other backend systems.

One interesting aspect of Node.js is that it allows developers to use the same language (JavaScript) for both front-end and back-end development. This means that you can also use libraries such as jQuery that are typically used for the front-end in a Node.js environment.

In this article, we'll explore how to use jQuery with Node.js. We'll cover the following topics:

1. Install jQuery in your Node.js project.
2. The jQuery module is required in Node.js projects.
3. Use jQuery's $.ajax function to make HTTP requests.
4. Use jQuery's DOM manipulation functions in your Node.js project.
5. Use jQuery to handle events in Node.js projects.

Installing jQuery and jsdom in a Node.js project

The first step in using jQuery in a Node.js project is to install the jQuery and jsdom packages from npm. To do this, open a terminal window and change to your project directory.

Then, run the following command.

$ npm install jquery
$ npm install jsdom

This will install the jQuery and jsdom packages in our project and add them to our package.json file.

Require the jQuery module in your Node.js script

After installing the jQuery package, we can import it in our Node.js script using the require function.

const $ = require("jquery");

This will create a constant $that we can use to access jQuery's functions.

请注意When using jQuery in a Node.js environment, $the object represents the jQuery module, not the global object available in the browser $.

Therefore, you need to use require('jquery')to access jQuery's functions instead of relying on the global $ object.

Use jQuery's $.ajax function to make HTTP requests

One of the most useful features of jQuery is its $.ajaxGET function, which allows you to make HTTP requests to the server. You can use GET , POST , PUT , DELETE,$.ajax etc. to send requests, and you can also specify the data to be sent in the request.

The following is an example of how to use $.ajaxSend a GET request to an API endpoint.

const { JSDOM } = require("jsdom");
const { window } = new JSDOM();
const { document } = new JSDOM("").window;
global.document = document;

const $ = require("jquery")(window);

$.ajax({
  url: "https://jsonplaceholder.typicode.com/todos/1",
  type: "GET",
  success: function (data) {
    console.log(data);
  },
});

The output is as follows:

In this example, we send a GET request to the https://api.example.com/endpoint URL. If the request is successful, the success callback function will be called with the response data as a parameter.

$.ajaxMany other options are also supported, which we can use to customize the behavior of the request. For example, we can specify a timeout to abort the request if it takes too long to send, or a callback beforeSendto execute some code before sending the request.

Using jQuery's DOM manipulation functions in Node.js

We can use jQuery to select elements in the virtual DOM and manipulate their properties. For example, we can text()change the text of an element using the method.

const { JSDOM } = require("jsdom");
const { window } = new JSDOM();
const { document } = new JSDOM("").window;
global.document = document;

const $ = require("jquery")(window);

$("body").append('<div id="example">Hello, World!</div>');
console.log($("#example").text());
$("#example").text("Hello, Node.js!");
console.log($("#example").text());

The output is as follows:

Handling events with jQuery and Node.js

We can use jQuery to bind event handlers to elements in the virtual DOM. For example, we can attach a click event handler to a button element.

const { JSDOM } = require("jsdom");
const { window } = new JSDOM();
const { document } = new JSDOM("").window;
global.document = document;

const $ = require("jquery")(window);

$("body").append('<div id="example">Hover over me!</div>');
$("#example").mouseenter(function () {
  $(this).css("background-color", "yellow");
});
$("#example").mouseleave(function () {
  $(this).css("background-color", "white");
});

console.log("button pressed");

The output is as follows: