什么是 jQuery 以及如何使用它？

Pranay Kapgate2021-08-18 · 6 min read

介绍

如果你熟悉编程世界，你就会知道编程语言有多么重要。其中一些最关键且最常用的语言包括 HTML, CSS，以及 JavaScript。HTML 和 CSS 帮助你设计网站并构建其结构，而 JavaScript 则使你能够实现网站的交互。你可以使用许多 JavaScript 库来为你的 Web 项目添加独特的功能。其中就包括 jQuery 库。

jQuery 本身并不是一种编程语言。它是一个你可以用来简化 JavaScript Web 开发的工具。这有助于使任务变得更简单、更直接。它因基于“写得更少，做得更多”（Write Less, Do More）的概念而闻名。除了让 Web 开发变得更容易之外，jQuery 还为你带来了跨浏览器兼容性的额外好处。这意味着无论使用哪种浏览器进行输出，代码都可以正确渲染。

为了更好地直观展示 jQuery 如何让代码更简洁，我们来看一个例子。假设我们正在编写 “Hello, World!” 程序。以下是它分别在 JavaScript 和 jQuery 中的呈现方式：

JavaScript
document.getElementById("demo").innerHTML = "Hello, World!";

1 2	JavaScript document.getElementById("demo").innerHTML = "Hello, World!";

jQuery
$("#demo").html("Hello, World!");

1 2	jQuery $("#demo").html("Hello, World!");

这两行代码将产生相同的结果。然而，正如你所见，jQuery 让编写过程更加简洁且切中要害。

在本教程中，你将学习到关于 jQuery 基础知识的所有内容。 你可以自己从这个网站下载该工具。我们将假设你是一个对 jQuery 一无所知的完全初学者。本教程将教你如何安装 jQuery 以及与其相关的一些基本概念。我们将探索 jQuery 中一些常用的选择器、事件和效果。然后，你将通过实用的示例学习如何测试 API、DOM 和 CDN 等开发概念。继续阅读以熟悉 jQuery 的世界。

在开始之前

如果你事先了解某些事情，将会对你非常有利。例如，对 HTML 和 CSS 的工作原理有一些基本的了解将对你大有帮助。我们不会在本教程中涵盖这些内容。我们将在假设你至少知道如何搭建一个简单网站的前提下进行。你还应该对编程的一般工作原理有基本的了解。这并不一定意味着你必须是 JavaScript 专家才能继续。只要对编程中的逻辑、变量和数据类型等内容有一些了解就足够了。

如何在你的系统上设置 jQuery

首先，让我们看看如何在你的系统上设置 jQuery。由于 jQuery 是一个 JavaScript 库，因此它以 JavaScript 文件的形式提供。你必须在网站的 HTML 代码中链接此文件。有两种方法可以做到这一点。正如我之前提到的，一种方法是从这里下载。除了官方网站，你还可以在 Google 托管库中找到 jQuery，就在这里.

另一种方法是使用内容分发网络（CDN）来链接文件。CDN 由一组帮助在本地分发 Web 内容的服务器组成。通过 CDN 托管 jQuery 文件可以让内容更快地送达用户。这就是为什么我们在本教程接下来的部分中将使用内容分发网络的原因。

在我们的第一个示例中，我们将制作一个 Web 项目。这个小项目包含 style.css ，位于 css/ 目录中。 script.js 位于 js/ 目录中。最后，一个 index.html 存在于该 Web 项目的根目录下：

Project Structure

根据这个项目，我们将创建一个 HTML 骨架。随后，我们将把它保存为 index.html:

<!doctype html>

<html lang="en">

<head>
  <title>jQuery Demo</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
</body>

</html>

<!doctype html>

<head>

<title>jQuery Demo</title>

</head>

<body>

</body>

</html>

这就是我们将链接 jQuery 文件的地方。正如我之前所说，我们将通过 CDN 进行链接。您将在 </body> 标签之前输入 jQuery 链接。之后，您可以添加您的自定义 JavaScript 文件，在我们的示例中它是 script.js 。记住，始终将 JavaScript 文件放在 jQuery 库的下方，就像这样：

<!doctype html>

<html lang="en">

<head>
  <title>jQuery Demo</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="js/script.js"></script>
</body>

</html>

<!doctype html>

<head>

<title>jQuery Demo</title>

</head>

<body>

</body>

</html>

如果您下载了 jQuery 库的本地副本，您会怎么做？在这种情况下，您必须将 jQuery 文件保存在 js/ 文件夹中。然后您可以将其链接为 js/jquery.min.js.

jQuery：基础知识

在深入了解细节之前，让我们先复习一下 jQuery 的一些基础知识。jQuery 的主要工作是使用 DOM 来连接浏览器中的 HTML 元素。DOM 代表文档对象模型。它是使 JavaScript 能够与浏览器中的 HTML 进行交互的方法。您可以通过右键单击网页并选择“检查”来直观地查看 DOM。开发者工具中显示的 HTML 就是 DOM。

节点是 DOM 中的单个 HTML 元素。JavaScript 可以修改所有这些对象或元素。您可以将这些对象的排列想象成一个树状结构。 <html> 位于根部，而其他元素则进一步分支。

右键单击并选择“查看网页源代码”将向您显示网站的原始 HTML。请记住，这与 DOM 不同。DOM 是可以更改的，而 HTML 源代码是完全静态的。您在 JavaScript 中所做的任何更改都不会影响此 HTML 文件。整个 <html> 节点被包裹在一个名为文档对象（document object）的外层中。

接下来，我们将了解如何使用 jQuery 操作网页及其功能。但在那之前，您必须确保页面已准备就绪。

在创建 script.js 文件（位于 js/ 目录）后，输入以下内容：

$(document).ready(function() {

  // 所有自定义 jQuery 都将放在这里

});

$(document).ready(function() {

// 所有自定义 jQuery 都将放在这里

});

现在，您编写的任何代码都将被包裹在此代码中。jQuery 将检测代码的就绪状态。只有在 DOM 准备就绪时，此函数中的代码才会运行。

我们将重温我们在教程开始时讨论过的“Hello, World!”脚本。假设我们想要启动这个脚本。要使用 jQuery 将此文本打印到浏览器中，我们必须将 ID demo 应用到一个空的块级段落，如下所示：

...

<body>
<p id="demo"></p>

...

...

<body>

...

要调用 jQuery，我们必须使用 $ 符号。您可以应用 CSS 语法和方法来通过 jQuery 访问 DOM。一个简单的示例如下：

$("selector").method();

1	$("selector").method();

这就是您将与 jQuery 一起使用的格式。我们已经知道 # 符号在 CSS 中代表 ID。因此，您可以使用 #demo.html() 选择器。此方法将允许您更改元素中存在的 HTML。

以下代码向我们展示了将 “Hello, World” 程序放入 script.js 文件的 jQuery ready() 包装器中：

$(document).ready(function() {
  $("#demo").html("Hello, World!");
});

$(document).ready(function() {

$("#demo").html("Hello, World!");

});

您必须将这行代码添加到 script.js 文件中。保存该文件。之后，您可以在浏览器中打开 index.html 文件。您应该能够看到输出 Hello, World!。为了便于理解，此时也是检查 DOM 的好时机。右键单击 “Hello, World!” 文本。选择“检查元素”（Inspect Element）。DOM 将显示 <p id="demo">Hello, World!</p>。另一方面，点击“查看网页源代码”将只向您显示原始 HTML。在这种情况下，那将是 <p id="demo"></p>.

什么是选择器？

现在我们将继续学习 jQuery 中的一些关键特性。其中之一就是选择器。jQuery selectors 告诉程序您想要操作或“选择”哪些元素。它们与您在 CSS 中使用的选择器非常相似。以下是在 jQuery 中访问选择器的基本格式：

$("selector")

1	$("selector")

您可以使用单引号或双引号字符串，尽管 jQuery style guide 更倾向于后者。如果您愿意，可以在this official page上查看 jQuery 选择器的完整列表。供您参考，以下是一些最常用的选择器：

$("*")

这是通配符选择器。它将选择页面上的每一个元素。

$(this)

这是当前选择器。它选择您当前正在使用函数操作的元素。

$("p")

这是标签选择器。它选择 <p> 标签的每个实例。

$(".example")

这是类选择器。它将选择应用了 example 类的每一个元素。

$("#example")

这是 ID 选择器。它仅选择 example ID 的单个实例。

$("[type='text']")

这是属性选择器。它将选择任何将 text 应用于 type 属性的给定元素。

$("p:first-of-type")

这是伪元素选择器。它帮助您选择第一个 <p>.

什么是事件？

网页的一些功能在页面加载时就会立即加载。以 “Hello, World” 为例。在这种情况下，我们可以直接将代码添加到源 HTML 中。但是，当加载某个功能需要用户交互时会发生什么？这就是 jQuery 派上用场的地方。

假设我们希望在用户点击按钮后显示一些文本。要添加此功能，您必须将 <button> 元素添加到 index.html 文件中。该按钮将监听点击“事件”：

...

<body>

<button id="trigger">Click me</button>
<p id="demo"></p>

...

<body>

<button id="trigger">Click me</button>

用户与浏览器的任何交互都被视为一个事件。交互可以通过鼠标指针或键盘进行。在上面的例子中，点击按钮就是我们的事件。这就是为什么它被称为点击事件。

接下来， we 必须调用一个包含 “Hello, World” 代码的函数。为此，我们将使用 click() 方法：

$(document).ready(function() {
  $("#trigger").click();
});

$(document).ready(function() {

$("#trigger").click();

});

如您所见，我们 <button> 元素的 ID 命名为 trigger。我们可以使用 $(“#trigger")。添加 click() 方法的目的是让程序监听点击事件。接下来，我们将把带有文本代码的函数放入该方法中：

function() {
  $("#demo").html("Hello, World!");
}

function() {

$("#demo").html("Hello, World!");

}

最后，我们的代码看起来会像这样：

$(document).ready(function() {
  $("#trigger").click(function() {
  $("#demo").html("Hello, World!");
  });
});

$(document).ready(function() {

$("#trigger").click(function() {

$("#demo").html("Hello, World!");

});

现在您可以保存 script.js 文件。刷新 index.html 在浏览器中以应用更改。点击按钮后，将出现测试输出“Hello, World!”。

除了点击（click）之外，还有其他类型的 jQuery 事件。您可以从以下位置查看这些事件方法的完整列表：这份官方文档。以下是您偶尔可能会遇到的一些最常用的事件：

click()

click 事件在鼠标单击时执行代码。

hover()

hover 事件在鼠标指针悬停在元素上时执行代码。您还可以指定代码是否由鼠标进入或离开触发，使用 mouseenter() 和 mouseleave() 分别。

submit()

提交表单会触发代码。

scroll()

向下滚动屏幕将是执行代码的事件。

keydown()

按下键盘上的向下键将执行代码。

什么是效果（Effects）？

jQuery 效果与 jQuery 事件协同工作。顾名思义，效果的主要目的是为页面添加动画。它允许您操作元素以应用各种效果。这些效果可以由某些事件触发。

为了更好地理解，我们来看一个例子。假设我们想打开和关闭一个弹出遮罩层。一种方法是使用两个不同的 ID。一个用于打开遮罩层，另一个用于关闭它。另一种方法是使用类（class）来实现。使用类的好处是同一个函数就能够打开和关闭遮罩层。

打开您的 index.html文件。然后，删除 <button> 和 <p> 标签。现在将以下代码行添加到 HTML 中：

...

<body>
<button class="trigger">Open</button>

<section class="overlay">
  <button class="trigger">Close</button>
</section>

...

...

<body>

<button class="trigger">Close</button>

</section>

...

接下来让我们看看我们的 style.css 文件。在这里，我们的目标是使用最少的 CSS 来隐藏遮罩层。为此，我们将使用 display: none 并像这样将其居中：

.overlay {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 200px;
  width: 200px;
  background: gray;
}

.overlay {

display: none;

position: fixed;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

height: 200px;

width: 200px;

background: gray;

}

接下来，我们将使用 toggle() 方法。此方法将允许我们切换 display 属性，在 none 和 block 之间。因此，每当我们点击时，遮罩层就会隐藏和显示。将此代码添加到 script.js 文件中：

$(document).ready(function() {
  $(".trigger").click(function() {
    $(".overlay").toggle();
  });
});

$(document).ready(function() {

$(".trigger").click(function() {

$(".overlay").toggle();

});

最后，刷新 index.html 以应用更改。现在您将能够切换模态框的可见性。您只需点击按钮即可。还有其他 jQuery 效果可以与此结合使用。例如，您可以将简单的 toggle() 更改为 slideToggle() 或 fadeToggle().

以下是 jQuery 中一些常用的效果方法：

toggle()

此方法允许您更改元素的可见性。与其关联的单向效果是 show() 和 hide().

fadeToggle()

此方法允许您通过动画切换元素的可见性和不透明度。在这种情况下，单向效果是 fadeIn() 和 fadeOut().

slideToggle()

此方法允许您使用滑动效果来切换元素的可见性。在这种情况下，单向效果是 slideUp() 和 slideDown().

animate()

此效果方法允许您执行自定义动画效果。它使用给定元素的 CSS 属性。

结论

希望本教程能对你全面了解 jQuery 有所帮助。它是一个非常实用的工具，在促进网页开发和代码编写方面大有裨益。如果你是编程世界的新手，情况尤其如此。

我们探索了构成 jQuery 基础的各种元素。我们还学习了如何选择和修改这些元素，以及如何很好地利用事件和效果。掌握像 jQuery 这样的工具可以帮助你创建充满交互功能的网站，从而提供引人入胜的用户体验。

查看一些来自我们博客的资源，它们将在你使用 JavaScript 时提供帮助：

祝你编程愉快！

Pranay Kapgate

作者 · CloudSigma

Preslav Dobrev 是 CloudSigma 的创意设计师，专注于通过传统和创新营销渠道打造一致的企业形象。他擅长将艺术愿景与战略营销相融合，创造具有影响力的品牌叙事。

什么是 jQuery 以及如何使用它？

介绍

在开始之前

如何在你的系统上设置 jQuery

jQuery：基础知识

什么是选择器？

什么是事件？

什么是效果（Effects）？

结论

Pranay Kapgate

评论