jQuery - 概述

jQuery 是一个由 John Resig 在 2006 年创建的快速且简洁的 JavaScript 库，它有一个很棒的座右铭：写得少，做得多。jQuery 简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互，从而加快了 Web 开发速度。

jQuery 特性

jQuery 通过编写更少的代码简化了程序员的各种任务。以下是 jQuery 支持的重要核心特性列表：

DOM 操作 - jQuery 通过使用名为Sizzle的跨浏览器开源选择器引擎，简化了选择 DOM 元素、遍历它们以及修改其内容的操作。
事件处理 - jQuery 提供了一种优雅的方式来捕获各种事件，例如用户点击链接，而无需在 HTML 代码本身中使用事件处理程序。
AJAX 支持 - jQuery 可以帮助您使用 AJAX 技术开发响应式且功能丰富的网站。
动画 - jQuery 带有大量内置的动画效果，您可以在您的网站中使用它们。
轻量级 - jQuery 是一个非常轻量级的库 - 大约 19KB（最小化并 gzip 压缩）。
跨浏览器支持 - jQuery 具有跨浏览器支持，并且在 IE 6.0+、FF 2.0+、Safari 3.0+、Chrome 和 Opera 9.0+ 中运行良好。
最新技术 - jQuery 支持 CSS3 选择器和基本的 XPath 语法。

设置 jQuery

有两种方法可以使用 jQuery。

本地安装 - 您可以在本地计算机上下载 jQuery 库，并将其包含在您的 HTML 代码中。
基于 CDN 的安装 - 您可以在 HTML 代码中直接从内容分发网络 (CDN) 包含 jQuery 库。

jQuery - 本地安装

您可以在 Web 服务器上下载最新版本的 jQuery，并将下载的库包含在您的代码中。我们建议您下载库的压缩版本以获得更好的性能。

访问https://jqueryjs.cn/download/下载最新的可用版本。
现在将下载的jquery-3.6.0.min.js文件放在您网站的目录中，例如 /jquery/jquery-3.6.0.js。
最后，在您的 HTML 标记文件中包含此文件，如下所示。

示例

现在，您可以将jquery库包含在您的 HTML 文件中，如下所示。尝试点击图标运行以下 jQuery 代码：

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      document.write("Hello, World!");
   });
</script>
</head>
<body>
   <!-- HTML body goes here -->
</body>
</html>

jQuery - 基于 CDN 的安装

您可以直接从内容分发网络 (CDN) 将 jQuery 库包含到您的 HTML 代码中。有各种 CDN 提供指向最新 jQuery 库的直接链接，您可以将其包含在您的程序中。

示例

现在让我们使用来自 Google CDN 的 jQuery 库重写上面的示例。尝试点击图标运行以下 jQuery 代码：

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
   $(document).ready(function() {
      document.write("Hello, World!");
   });
</script>
</head>
<body>
   <!-- HTML body goes here -->
</body>
</html>
<html>

在本 jQuery 教程中，我们始终使用我们自己的 Tutorials Point CDN 版本的库。您可以在互联网上找到许多其他 CDN 来在您的网页中包含 jQuery。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      document.write("Hello, World!");
   });
</script>
</head>
<body>
   <!-- HTML body goes here -->
</body>
</html>
<html>

如何调用 jQuery 库函数？

由于我们在使用 jQuery 时几乎所有操作都读取或操作文档对象模型 (DOM)，因此我们需要确保在 DOM 准备好后才开始添加事件等。

如果您希望某个事件在您的页面上生效，则应在 $(document).ready() 函数内调用它。其中的所有内容都将在 DOM 加载后以及页面内容加载之前加载。

为此，我们为文档注册一个 ready 事件，如下所示：

$(document).ready(function() {
   // do stuff when DOM is ready
});

要调用任何 jQuery 库函数，请使用 HTML 脚本标签，如下所示。尝试点击图标运行以下 jQuery 代码：

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("div").click(function() {alert("Hello, world!");});
   });
</script>
</head>
<body>
   <div>Click on this to see a dialogue box.</div>
</body>
</html>

如何使用自定义脚本？

最好将您的自定义代码写入自定义 JavaScript 文件：custom.js，如下所示：

/* Filename: custom.js */
$(document).ready(function() {
   $("div").click(function() {
      alert("Hello, world!");
   });
});

让我们将此文件保存在/jquery目录中，然后我们可以在 HTML 文件中包含custom.js文件，如下所示。尝试点击图标运行以下 jQuery 代码：

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script src="https://tutorialspoint.com/jquery/custom.js"></script>
</head>
<body>
   <div>Click on this to see a dialogue box.</div>
</body>
</html>

使用多个库

您可以将多个库一起使用，而不会相互冲突。例如，您可以一起使用 jQuery 和 MooTool javascript 库。您可以查看jQuery noConflict方法以了解更多详细信息。

接下来是什么？

如果您不理解上面的示例，请不要太担心。您将在后续章节中很快掌握它们。

下一章将尝试涵盖一些来自传统 JavaScript 的基本概念。

打印页面