Verwenden Sie jQuery mit Node.js

1. Installieren Sie jQuery und jsdom in einem Node.js-Projekt
2. Erfordern Sie das jQuery-Modul in einem Node.js-Skript
3. Machen Sie HTTP-Anfragen mit der $.ajax-Funktion von jQuery
4. Verwenden Sie die DOM-Manipulationsfunktionen von jQuery in Node.js
5. Behandeln Sie Ereignisse mit jQuery und Node.js

jQuery ist eine beliebte JavaScript-Bibliothek, die häufig zum Erstellen von Webanwendungen verwendet wird. Es bietet eine Vielzahl von APIs, um unter anderem mit dem DOM zu interagieren, HTTP-Anforderungen zu stellen und Ereignisse zu verarbeiten.

Node.js ist eine JavaScript-Laufzeitumgebung, mit der Entwickler JavaScript-Code außerhalb eines Webbrowsers ausführen können. Es bietet eine Vielzahl von APIs zum Erstellen serverseitiger Anwendungen und wird häufig zum Erstellen von Webservern, APIs und anderen Backend-Systemen verwendet.

Ein interessanter Aspekt von Node.js ist, dass Entwickler dieselbe Sprache (JavaScript) sowohl für die Frontend- als auch für die Backend-Entwicklung verwenden können. Das bedeutet, dass Sie Bibliotheken wie jQuery, die normalerweise im Frontend verwendet werden, auch in einer Node.js-Umgebung verwenden können.

In diesem Artikel werden wir untersuchen, wie Sie jQuery mit Node.js verwenden. Folgende Themen werden wir behandeln:

1. Installieren von jQuery in einem Node.js-Projekt.
2. Erfordern des jQuery-Moduls in einem Node.js-Projekt.
3. HTTP-Anfragen mit der Funktion $.ajax von jQuery stellen.
4. Verwenden der DOM-Manipulationsfunktionen von jQuery in einem Node.js-Projekt.
5. Behandlung von Ereignissen mit jQuery in einem Node.js-Projekt.

Installieren Sie jQuery und jsdom in einem Node.js-Projekt

Der erste Schritt bei der Verwendung von jQuery in einem Node.js-Projekt ist die Installation von jQuery- und jsdom-Paketen von npm. Öffnen Sie dazu ein Terminalfenster und wechseln Sie in Ihr Projektverzeichnis.

Führen Sie dann den folgenden Befehl aus.

npm install jquery
npm install jsdom

Dadurch werden jQuery- und jsdom-Pakete in Ihrem Projekt installiert und zu Ihrer package.json-Datei hinzugefügt.

Erfordern Sie das jQuery-Modul in einem Node.js-Skript

Nachdem Sie das jQuery-Paket installiert haben, können Sie es in Ihrem Node.js-Skript mit der Funktion require anfordern.

const $ = require('jquery');

Dadurch wird eine Konstante $ erstellt, mit der Sie auf die Funktionen von jQuery zugreifen können. Beachten Sie, dass bei Verwendung von jQuery in einer Node.js-Umgebung das Objekt $ das jQuery-Modul und nicht das im Browser verfügbare globale Objekt $ darstellt.

Daher müssen Sie require('jquery') verwenden, um auf die Funktionen von jQuery zuzugreifen, anstatt sich auf das globale $-Objekt zu verlassen.

Machen Sie HTTP-Anfragen mit der $.ajax-Funktion von jQuery

Eine der nützlichsten Funktionen von jQuery ist die Funktion $.ajax, mit der Sie HTTP-Anfragen an einen Server stellen können. Sie können $.ajax verwenden, um GET, POST, PUT, DELETE und andere Anfragen zu senden, und Sie können auch die Daten angeben, die Sie mit der Anfrage senden möchten.

Hier ist ein Beispiel dafür, wie Sie $.ajax verwenden können, um eine GET-Anfrage an einen API-Endpunkt zu senden.

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);
  },
});

Ausgang:

In diesem Beispiel senden wir eine GET-Anforderung an die URL https://api.example.com/endpoint. Wenn die Anfrage erfolgreich ist, wird die Erfolgs-Callback-Funktion mit den Antwortdaten als Argument aufgerufen.

$.ajax unterstützt auch viele andere Optionen, mit denen Sie das Verhalten der Anfrage anpassen können. Beispielsweise können Sie eine Zeitüberschreitung angeben, um die Anfrage abzubrechen, wenn sie zu lange dauert, oder einen beforeSend-Callback, um Code auszuführen, bevor die Anfrage gesendet wird.

Verwenden Sie die DOM-Manipulationsfunktionen von jQuery in Node.js

Sie können jQuery verwenden, um Elemente im virtuellen DOM auszuwählen und ihre Eigenschaften zu manipulieren. Beispielsweise können Sie den Text eines Elements mit der Methode text() ändern.

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());

Ausgang:

Behandeln Sie Ereignisse mit jQuery und Node.js

Sie können jQuery verwenden, um Ereignishandler an Elemente im virtuellen DOM zu binden. Beispielsweise können Sie einem Schaltflächenelement einen Click-Ereignishandler zuordnen.

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');

Ausgang: