使用 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 内容附加到正文中。见输出:
相关文章
Do you understand JavaScript closures?
发布时间:2025/02/21 浏览次数:108 分类:JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间:2025/02/21 浏览次数:178 分类:JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间:2025/02/21 浏览次数:150 分类:JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
用 jQuery 检查复选框是否被选中
发布时间:2024/03/24 浏览次数:102 分类:JavaScript
-
在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的
jQuery 中的 Window.onload 与 $(document).ready
发布时间:2024/03/24 浏览次数:180 分类:JavaScript
-
本教程演示了如何在 jQuery 中使用 Window.onload 和 $(document).ready 事件。