jQuery 概述

jQuery 是由 John Resig 在2006年创建的快速而简洁的 JavaScript 库，有一个很好的座右铭： 写的少，做的多 。jQuery 简化了HTML文档的遍历，事件处理，动画和Ajax交互，用于快速的 web 开发。

jQuery 功能

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

DOM 操作 − jQuery 使得选择 DOM 元素、操作它们以及修改它们的内容变得简单，使用了跨浏览器的开源选择器引擎称为 Sizzle 。
事件处理 − 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 – 本地安装

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

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

示例

现在，您可以按照以下方式将jquery库包含在您的HTML文件中。

<!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库来重写上面的示例。

<!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>

在本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>

如何调用jQuery库函数

正如我们在使用jQuery时几乎所有的操作都是读取或操作文档对象模型（DOM）一样，我们需要确保在DOM准备好后开始添加事件等操作。

如果你想让一个事件在你的页面上生效，你应该在$(document).ready()函数内调用它。在DOM加载完成且页面内容加载之前，函数内的所有内容都会被加载。

为了实现这一点，我们使用以下语法为文档注册一个ready事件：

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

要调用任何jQuery库函数，请使用如下的HTML脚本标签。

<!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 目录中，然后我们可以在我们的HTML文件中包含 custom.js 文件，如下所示。

<!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>