jQuery起点教程如何快速入门？-建站教程-锦华智联科技

jQuery 起点教程：从零开始，轻松入门

什么是 jQuery？

jQuery 就是一个 JavaScript 库。

（图片来源网络，侵删）

库：它不是一门新的语言，而是将大量复杂的 JavaScript 操作封装成了一系列简单、易用的函数和方法，你可以把它想象成一个“工具箱”，里面装满了各种已经帮你造好的工具，你只需要直接拿来用,而不用自己去从零打造。
核心优势：它极大地简化了 JavaScript 的代码编写，让你用更少的代码实现更强大的功能，尤其是在处理 HTML 文档（DOM 操作）、事件处理、动画和 Ajax 交互方面。

为什么学习 jQuery？

简洁高效：用 jQuery 写 10 行的 JavaScript 代码，可能用 1 行 jQuery 就能搞定。
跨浏览器兼容：不同浏览器（如 Chrome, Firefox, IE, Edge）对 JavaScript 的支持可能存在差异，jQuery 已经帮你处理了这些兼容性问题，你只需要写一套代码,就能在所有主流浏览器上正常运行。
丰富的插件生态：有海量的第三方插件可供使用，如轮播图、日历、弹窗等,可以快速集成到你的项目中。
巨大的社区和学习资源：遇到任何问题,几乎都能在网上找到答案和教程。

如何开始？你的第一个 jQuery 程序

第 1 步：准备工作

HTML 文件：创建一个 index.html 文件。
引入 jQuery：你需要将 jQuery 库引入到你的 HTML 文件中，最简单的方式是通过 CDN（内容分发网络），打开你的 index.html 文件，在 <head> 标签内添加以下代码：
```

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
```
- 注意：我们建议将 <script> 标签放在 <body> 标签的末尾，这样可以确保在脚本执行前，所有的 HTML 元素都已经加载完毕。

第 2 步：编写你的第一行 jQuery 代码

打开你的 index.html 文件，在 </body> 标签前添加一个 <script> 标签来写你的 jQuery 代码。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">jQuery 起点教程</title>
    <!-- 引入 jQuery 核心库 -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <h1>欢迎来到 jQuery 世界！</h1>
    <p id="my-paragraph">这是一个普通的段落。</p>
    <button id="my-button">点击我</button>
    <script>
        // 等待整个 HTML 文档加载完毕后，再执行 jQuery 代码
        // 这是 jQuery 最标准、最安全的写法
        $(document).ready(function() {
            // 在这里写你的 jQuery 代码
            alert("Hello, jQuery! 文档已加载完毕。");
        });
        // 上面这行代码也可以简写成下面这种形式，更常用
        $(function() {
            // 在这里写你的 jQuery 代码
        });
    </script>
</body>
</html>

代码解释：

（图片来源网络，侵删）

$(document).ready(function() { ... });：这是 jQuery 的一个核心方法，它的作用是确保你的代码在网页的所有内容（图片、样式等）都加载完成后才执行,这可以避免在元素还未加载时就尝试操作它而导致的错误。
这是 jQuery 的核心函数，也是它的“别名”，你可以把它理解为“查找”或“准备”一个元素。
function() { ... }：这是一个匿名函数,也就是当文档准备就绪后要执行的代码块。

第 3 步：运行你的代码

将 index.html 文件用浏览器打开，你应该会看到一个弹窗，显示 "Hello, jQuery! 文档已加载完毕。"，点击确定后，页面内容才会显示，恭喜你，你已经成功运行了你的第一段 jQuery 代码！

jQuery 核心概念与常用操作

jQuery 的语法非常优雅，可以概括为：$(选择器).action()

：jQuery 的入口函数。
选择器：用来找到你想要操作的 HTML 元素，和 CSS 选择器语法几乎一样。
action()：对找到的元素执行的操作（如显示、隐藏、修改内容等）。

选择器

jQuery 拥有强大的选择器,可以精确地找到你想要的元素。

选择器示例	描述
`$("p")`	选择所有的 `<p>`
`$("#my-id")`	选择 `id="my-id"` 的元素（唯一）
`$(".my-class")`	选择所有 `class="my-class"` 的元素（可多个）
`$("div p")`	选择所有在 `<div>` 内部的 `<p>`
`$("ul li:first")`	选择每个 `<ul>` 列表的第一个 `<li>`
`$(":button")`	选择所有 `<button>` 元素和 `type="button"` 的 `<input>`

事件处理

事件就是用户的交互行为，比如点击、鼠标悬停、键盘输入等。

示例：点击按钮，改变段落内容

修改 index.html 中的 <script> 部分：

<script>
    // 使用更简洁的 ready 写法
    $(function() {
        // 找到 id 为 "my-button" 的按钮，并监听它的 "click" (点击) 事件
        $("#my-button").on("click", function() {
            // 当按钮被点击后，执行这里的代码
            // 找到 id 为 "my-paragraph" 的段落
            // 并修改它的文本内容
            $("#my-paragraph").text("段落内容已经被 jQuery 改变了！");
            // 给段落添加一个红色字体样式
            $("#my-paragraph").css("color", "red");
        });
    });
</script>

代码解释：

.on("click", function() { ... })：这是绑定事件的标准方法。"click" 指的是点击事件，后面的 function 是事件发生时要执行的回调函数。
.text("新的文本")：用来设置或获取元素的文本内容。
.css("color", "red")：用来设置元素的 CSS 样式。

现在刷新你的页面，点击 "点击我" 按钮,你会看到段落的文字变成了红色。

效果与动画

jQuery 提供了一系列简单的方法来创建动画效果。

示例：点击按钮，隐藏/显示段落

<script>
    $(function() {
        // 点击按钮，隐藏段落
        $("#my-button").on("click", function() {
            $("#my-paragraph").hide(1000); // 1000 毫秒 = 1 秒内完成隐藏
        });
        // 你可以再加一个按钮来显示它
        // <button id="show-button">显示我</button>
        $("#show-button").on("click", function() {
            $("#my-paragraph").show(1000); // 1 秒内完成显示
        });
        // 还有一个非常方便的 toggle 方法
        // <button id="toggle-button">切换我</button>
        $("#toggle-button").on("click", function() {
            $("#my-paragraph").toggle(1000); // 如果隐藏则显示，如果显示则隐藏
        });
    });
</script>

常用效果方法：

.hide(speed, callback)
.show(speed, callback)
.toggle(speed, callback)
.fadeIn(speed, callback) (淡入)
.fadeOut(speed, callback) (淡出)
.slideUp(speed, callback) (向上收起)
.slideDown(speed, callback) (向下展开)

DOM 操作

除了修改文本和样式，你还可以轻松地添加、删除和修改 HTML 元素。

示例：点击按钮，在段落后面添加一个新链接

<script>
    $(function() {
        $("#my-button").on("click", function() {
            // 在 id 为 "my-paragraph" 的元素后面，追加一个新的 <a> 标签
            $("#my-paragraph").after('<a href="https://jquery.com">访问 jQuery 官网</a>');
        });
    });
</script>

常用 DOM 操作方法：

.append(content) - 在元素内部末尾添加内容
.prepend(content) - 在元素内部开头添加内容
.after(content) - 在元素后面添加内容
.before(content) - 在元素前面添加内容
.remove() - 删除元素
.empty() - 清空元素内容

进阶：Ajax - 异步数据交互

Ajax 的核心作用是在不重新加载整个网页的情况下，与服务器交换数据并更新部分网页内容，jQuery 大大简化了 Ajax 的操作。

示例：点击按钮，从服务器获取一段文本并显示

准备一个后端接口：为了演示，我们可以使用一个公共的测试 API https://jsonplaceholder.typicode.com/posts/1，它会返回一段 JSON 数据。
编写 jQuery 代码：

<script>
    $(function() {
        $("#my-button").on("click", function() {
            // 使用 $.get 方法进行 GET 请求
            $.get("https://jsonplaceholder.typicode.com/posts/1", function(data) {
                // 请求成功后，data 就是服务器返回的数据
                // 我们将数据的 title 和 body 显示在段落里
                $("#my-paragraph").html("<h3>" + data.title + "</h3><p>" + data.body + "</p>");
            }).fail(function() {
                // 如果请求失败，显示错误信息
                $("#my-paragraph").text("获取数据失败，请检查网络连接。");
            });
        });
    });
</script>

代码解释：

$.get(url, successCallback)：这是 jQuery 提供的一个简单的 Ajax GET 请求方法。
url：你请求的地址。
function(data)：这是一个回调函数，当服务器成功返回数据时自动执行。data 参数包含了服务器返回的数据。
.fail(function() { ... })：如果请求失败（比如网络错误）,会执行这个回调函数。

总结与下一步

回顾一下我们学到的核心点：

引入：通过 CDN 在 HTML 中引入 jQuery 库。
入口：使用 $(function() { ... }); 来包裹你的代码。
语法：$(选择器).action() 是核心模式。
选择器：灵活运用各种选择器找到目标元素。
事件：使用 .on() 方法响应用户交互。
效果：使用 .hide(), .show(), .fadeIn() 等方法创建动画。
操作：使用 .text(), .css(), .append() 等方法修改页面内容。
Ajax：使用 $.get(), $.post() 等方法与后端进行数据交互。

下一步学习建议：

多加练习：尝试将不同的方法组合起来,创建一些有趣的小效果。
阅读官方文档：jQuery API Documentation 是最权威的学习资料，当你需要查找某个具体方法时,这里是最好的去处。
学习现代替代方案：虽然 jQuery 依然强大，但现代 JavaScript (ES6+) 和 Vue/React/Angular 等前端框架已经成为了主流，了解它们可以帮助你更好地理解前端开发的演进，jQuery 在维护旧项目或进行简单快速开发时,依然是利器。

希望这份教程能帮助你顺利开启 jQuery 的学习之旅！祝你编码愉快！