什么是 NPM 包？
NPM 是 Node.js 包管理器，用于管理 Node.js 应用程序中使用的库和模块。在前端开发中，我们经常会使用 NPM 包管理器来安装、升级和删除 JavaScript 库。
为什么要使用 jQuery？
jQuery 是一款流行的 JavaScript 库，它简化了 DOM 操作和事件处理等常见任务，让前端开发更加高效和便捷。使用 jQuery 可以减少代码量，提高可维护性和可读性。
如何安装 jQuery？
要使用 jQuery，首先需要安装它。在命令行中输入以下命令即可：
npm install jquery
该命令会从 NPM 仓库下载 jQuery，并将其添加到您的项目中。
如何在 HTML 中使用 jQuery？
安装完成后，您可以在 HTML 文件中引入 jQuery，例如：
<script src="node_modules/jquery/dist/jquery.min.js"></script>
这将在您的 HTML 页面中加载 jQuery 库。接下来，您可以使用 $ 符号来调用 jQuery 函数。
jQuery 基础用法
选择器
选择器是 jQuery 最常用的功能之一。使用选择器，您可以轻松地找到文档中的特定元素。例如，要选择所有段落元素，可以使用以下代码：
$('p')这将返回一个包含所有段落元素的 jQuery 对象。使用其他选择器，您可以选择文档中的其他元素，例如：
$('#my-element') // 通过 ID 选择元素
$('.my-class') // 通过类名选择元素
$('input[type="text"]') // 通过属性选择元素DOM 操作
jQuery 还提供了许多函数来操作 DOM。例如，要更改元素的文本内容，可以使用以下代码：
$('#my-element').text('Hello, world!');这将把 #my-element 元素的文本内容更改为“Hello, world!”。您还可以使用其他函数来添加、删除和移动元素。
事件处理
使用 jQuery，您可以轻松地添加和处理事件。例如，要在按钮单击时运行函数，可以使用以下代码：
$('#my-button').click(function() {
alert('Button clicked!');
});这将在 #my-button 元素上添加一个单击事件处理程序，当用户单击按钮时，将显示一个警告框。
示例代码
下面是一个使用 jQuery 的示例应用程序，该应用程序获取用户输入并在页面上显示结果：
-- -------------------- ---- -------
--------- -----
------
------
------- ------------------------------------------------------
------------- ---------------
-------
------
------ ----------- ----------------
------- ----------------------------------
---- ------------------
--------
------------------------------------ -
--- ---- - -----------------------
------------------------- - - ---- - -----
---
---------
-------
-------在这个应用程序中，用户可以在文本框中输入他们的名字，然后单击“提交”按钮。当用户单击按钮时，jQuery 将获取文本框的值，并将其添加到页面上的结果中。
总结
在本教程中，我们学习了如何使用 NPM 包管理器来安装和使用 jQuery 库。我们还介绍了 jQuery 的基本用法，包括选择器、DOM 操作和事件处理。希望这篇文章对您学习前端开发有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/32194