jQuery - 概述

jQuery 是一个快速而简洁的 JavaScript 库，由 John Resig 在 2006 年创建，其座右铭是：Write less，do more。jQuery 简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互，以实现快速 Web 开发。

jQuery 特性

jQuery 通过编写更少的代码来简化程序员的各种任务。以下是 jQuery 支持的重要核心功能列表 -

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

设置 jQuery

有两种使用 jQuery 的方法。

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

jQuery - 本地安装

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

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

例子

现在您可以在 HTML 文件中包含jquery库，如下所示。尝试单击该图标来运行以下 jQuery 代码 -

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.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.com/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://www.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 加载并且页面内容加载之前，其中的所有内容都会加载。

为此，我们为文档注册一个就绪事件，如下所示 -

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

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

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.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目录中，然后我们可以将custom.js文件包含在 HTML 文件中，如下所示。尝试单击该图标来运行以下 jQuery 代码 -

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script src="https://www.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 Method 了解更多详细信息。

下一步是什么？

如果您不理解上面的示例，请不要太担心。在接下来的章节中你很快就会掌握它们。

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