HOWTO · jQuery
使用 NPM jQuery 模組
本教程演示瞭如何安裝和使用 npm jQuery 模組。
NPM 是 node.js 包的一部分。本教程演示了安裝和使用 npm jQuery 模組。
使用 NPM jQuery 模組
使用 NPM 安裝 Node.js
要首先使用 npm jQuery 模組，我們需要安裝 node.js 包中包含的 npm 模組。轉到此連結並下載你的安裝程式。
下載安裝程式後，下一步是執行安裝程式。
執行安裝程式後，按下一步並接受協議；之後，按下一步三次。
檢查選項自動安裝必要的工具，單擊下一步，然後單擊安裝。
安裝完成後，單擊 Finish，然後安裝帶有 npm 的 Node.js。
通過命令提示符或 PowerShell 驗證安裝。執行以下命令。
npm -v
一旦安裝了帶有 npm 的 Node.js，下一步就是使用 npm 安裝 jquery 模組。
使用 NPM 安裝 jquery
確保安裝模組 jquery，而不是 jQuery。請按照以下步驟操作。
第 1 步：在命令提示符下使用以下命令建立 package.json 檔案，以跟蹤依賴項和模組。
npm init -y
上述命令的輸出將是這樣的：
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"
}
第 2 步：安裝 jquery 模組；使用以下命令。
npm install jquery
第三步：安裝好 jquery 模組後，下一步就是安裝 jsdom，因為 jQuery 是一個前端庫；這就是為什麼它需要一個用於後端操作的視窗。使用以下命令安裝 jsdom。
npm install jsdom
第 4 步：在 JavaScript 中匯入 jsdom 模組。
const dom = new jsdom.JSDOM("")
第 5 步：使用 HTML 程式碼作為引數建立由 JSDOM 物件建立的新 jsdom 視窗。請參見下面的示例。
const dom = new jsdom.JSDOM("")
第 6 步：現在匯入 jquery 併為其提供一個視窗。使用以下程式碼。
const jquery = require('jquery')(dom.window)
現在讓我們嘗試一個將 jquery 與 npm 一起使用的示例。參見示例：
// 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);
上面的程式碼將使用 npm jquery 將一些 HTML 內容附加到正文中。見輸出：
