jQuery 入门

Created: October-14, 2018

在本教程中，你将学习如何创建一个支持 jQuery 的网页。

下载 jQuery

首先，首先下载 jQuery 的副本并将其包含在你的文档中。有两个版本的 jQuery 可供下载 - 压缩和 未压缩。未压缩的文件最适合开发或调试; 同时，建议将缩小和压缩文件用于生产，因为它可以节省宝贵的带宽，并且由于文件较小而提高了性能。

你可以从这里下载 jQuery： https://jquery.com/download/

下载 jQuery 文件后，你可以看到它具有 .js 扩展名，因为 jQuery 只是一个 JavaScript 库，因此你可以在 HTML 文档中用 <script> 包含 jQuery 文件，就像包含普通的 JavaScript 文件一样。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Simple HTML Document</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="js/jquery-1.11.3.min.js"></script>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

始终在自定义脚本之前包含 jQuery 文件; 否则，当你的 jQuery 代码尝试访问它时，jQuery API 将不可用。

提示： 如你所见，我们已跳过标记 <script> 内的 type="text/javascript" 属性。因为 HTML5 中不需要这样做。JavaScript 是 HTML5 和所有现代浏览器中的默认脚本语言。但是，你仍然可以使用它来使代码更易于为用户解释。

在 CDN 内的 jQuery

或者，如果你不想自己下载和托管 jQuery，可以通过免费提供的 CDN（内容交付网络）链接在文档中包含 jQuery。

CDN 可以通过减少加载时间来提供性能优势，因为它们在遍布全球的多个服务器上托管 jQuery，当用户请求文件时，它将从距离它们最近的服务器提供。

这也提供了一个优势，如果你的网页访问者在访问其他网站时已经从同一 CDN 下载了 jQuery 副本，则不必重新下载，因为它已经存在于浏览器的缓存中。

jQuery 的 CDN 由 MaxCDN 提供

<script src =" https://code.jquery.com/jquery-1.12.4.min.js "> </script>

你还可以通过 Google 和 Microsoft CDN 包含 jQuery。

创建你的第一个 jQuery 支持的网页

到目前为止，你已经了解了 jQuery 库的用途以及如何将其包含在你的文档中，现在是时候将 jQuery 实际应用了。

在本节中，我们将通过将标题文本的颜色从默认的黑色更改为红色来执行简单的 jQuery 操作。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>My First jQuery Powered Web Page</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("h1").css("color", "#0088ff");
        });
    </script>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

在上面的例子中，我们通过在文档准备就绪时使用 jQuery 元素选择器和 css() 方法更改标题的颜色（比如 <h1>）来执行简单的 jQuery 操作，这称为文档就绪事件。我们将在后面的章节中学习 jQuery 选择器，事件和方法。