jquery 3 教程-杰瑞科技汇

jQuery 3 完整教程

第一部分：jQuery 简介
- 1 什么是 jQuery？
- 2 为什么选择 jQuery？（尤其是在现代前端开发中）
- 3 jQuery 3 的主要特性和改进
第二部分：环境搭建与第一个程序
- 1 如何引入 jQuery？
- 2 "Hello, World!" - 你的第一个 jQuery 代码
第三部分：jQuery 核心概念
- 1 $(document).ready() - 确保代码在页面加载完毕后执行
- 2 jQuery 选择器 - 定位 HTML 元素的利器
- 3 jQuery 事件处理 - 让网页动起来
- 4 jQuery 动画与效果
第四部分：jQuery DOM 操作
- 1 内容操作 - text(), html(), val()
- 2 属性操作 - attr(), prop(), addClass(), removeClass()
- 3 CSS 样式操作 - css()
- 4 元素遍历与创建 - each(), append(), prepend(), after(), before(), remove()
第五部分：AJAX 与实用工具
- 1 $.ajax() - 强大的异步请求方法
- 2 $.get() 和 $.post() - 简化的 AJAX 请求
- 3 jQuery 实用工具函数 - $.trim(), $.each(), $.map() 等
第六部分：jQuery 3 的现代化与最佳实践
- 1 使用 deferred 对象处理异步
- 2 避免全局命名空间污染
- 3 性能优化建议
第七部分：完整示例 - 一个简单的待办事项列表
- 1 需求分析
- 2 HTML 结构
- 3 jQuery 逻辑实现

第一部分：jQuery 简介

1 什么是 jQuery？

jQuery 是一个快速、小型且功能丰富的 JavaScript 库，它通过“写更少的代码，做更多的事情”（Write Less, Do More）的理念，极大地简化了 HTML 文档遍历、事件处理、动画和 AJAX 交互等操作。

你可以把它想象成给 JavaScript 装上了一个强大的“外挂”，让你能更轻松、更高效地操作网页。

2 为什么选择 jQuery？（尤其是在现代前端开发中）

尽管现在原生 JavaScript (Vanilla JS) 已经非常强大，但 jQuery 依然有其价值：

跨浏览器兼容性：jQuery 处理了不同浏览器（尤其是旧版 IE）之间的差异，让你无需为兼容性问题头疼。
简洁的 API：选择器和操作方法非常直观，学习曲线平缓。
庞大的生态系统：有海量的插件和社区支持，可以快速实现复杂功能。
现代 jQuery 3：jQuery 3 版本已经完全支持现代浏览器，移除了对旧版 IE 的支持，使其更轻量、更快，并且与 ES6+ 语法和模块化（如 Webpack）结合得很好。

注意：对于纯新项目，如果只面向现代浏览器，使用原生 JavaScript 或 Vue/React/Angular 等现代框架是更主流的选择，但如果你需要维护旧项目，或者需要一个轻量级的解决方案来处理 DOM 和 AJAX，jQuery 3 依然是绝佳的选择。

3 jQuery 3 的主要特性和改进

不再支持 IE 8 及以下版本：这使得 jQuery 3 可以使用现代 JavaScript 特性，代码更高效。
模块化支持：可以通过 import 语句在 ES6 模块或 Webpack 等构建工具中按需引入，减小最终文件体积。
性能提升：在 DOM 操作和事件处理方面有显著的性能优化。
Promises 支持：$.ajax() 现在返回一个 Promise 对象，可以更优雅地处理异步操作。

第二部分：环境搭建与第一个程序

1 如何引入 jQuery？

最简单的方式是通过 CDN（内容分发网络）引入，将以下代码放在你 HTML 文件的 <head> 或 <body> 标签的末尾（推荐放在末尾，以加快页面渲染速度）。

<!-- 从 Google CDN 引入 jQuery 3.x -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

你也可以从 jQuery 官网下载文件，然后本地引入。

2 "Hello, World!" - 你的第一个 jQuery 代码

创建一个 index.html 文件，并输入以下代码。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">jQuery 第一个程序</title>
</head>
<body>
    <h1>你好，世界！</h1>
    <p id="message">这段文字将被 jQuery 改变。</p>
    <!-- 引入 jQuery 库 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!-- 编写你的 jQuery 代码 -->
    <script>
        // 等待整个 HTML 文档加载完毕后再执行代码
        $(document).ready(function() {
            // 找到 id 为 "message" 的 <p> 元素，并改变其文本内容
            $("#message").text("这段文字已经被 jQuery 成功改变了！");
        });
    </script>
</body>
</html>

代码解释：

<script src="..."></script>：引入 jQuery 库，没有这个，后面的和 jQuery 就无法使用。
$(document).ready(function() { ... });：这是 jQuery 的标准写法，确保你的代码在页面所有元素都加载完毕后执行，避免操作不存在的元素。
$("#message")：这是 jQuery 选择器，它会找到 id="message" 的 HTML 元素。
.text("...")：这是 jQuery 方法，用于设置匹配元素的文本内容。

第三部分：jQuery 核心概念

1 `$(document).ready()`

这是 jQuery 最基础也是最重要的概念，它的作用是绑定一个函数，该函数将在 DOM（文档对象模型）完全加载并解析后执行。

简写形式：为了方便，jQuery 提供了更短的写法：

// 标准写法
$(document).ready(function() {
    // 代码
});
// 简写方式 1
$(function() {
    // 代码
});
// 简写方式 2 (推荐，与原生 JS 的 DOMContentLoaded 事件类似)
jQuery(function($) {
    // 代码
});

注意：在一个页面中，可以有多个 $(document).ready()，它们会按顺序执行。

2 jQuery 选择器

jQuery 选择器基于 CSS 选择器，非常强大和灵活。

选择器	示例	描述
基本	`$("p")`	选择所有 `<p>` 元素
	`$(".intro")`	选择所有 `class="intro"` 的元素
	`$("#id01")`	选择 `id="id01"` 的元素
	`$("p, span, .intro")`	选择所有 `<p>`, `<span>` 和 `class="intro"` 的元素
层级	`$("div > p")`	选择所有 `<div>` 的直接子元素 `<p>`
	`$("div p")`	选择所有 `<div>` 后代中的 `<p>` 元素
	`$("div + p")`	选择紧接在 `<div>` 元素后的第一个 `<p>` 元素
过滤	`$("p:first")`	选择第一个 `<p>` 元素
	`$("p:last")`	选择最后一个 `<p>` 元素
	`$("p:even")`	选择所有偶数位置的 `<p>` 元素 (索引从 0 开始)
	`$("p:odd")`	选择所有奇数位置的 `<p>` 元素
	`$("p:eq(2)")`	选择索引值为 2 的 `<p>` 元素
	`$(":input")`	选择所有表单输入元素
	`$(":checked")`	选择所有被选中的表单元素

3 jQuery 事件处理

jQuery 提供了简洁的事件绑定方法。

<button id="myButton">点击我</button>
<p id="eventLog"></p>
<script>
$(document).ready(function() {
    // click 事件
    $("#myButton").on("click", function() {
        // $(this) 指向触发事件的当前元素
        $(this).text("你点击了我！");
        $("#eventLog").text("按钮被点击了。");
    });
    // hover 事件 (鼠标进入和离开)
    $("#myButton").hover(
        function() {
            $(this).css("background-color", "lightblue");
        },
        function() {
            $(this).css("background-color", "lightgray");
        }
    );
    // 其他常用事件: .on("submit"), .on("change"), .on("keydown"), .on("keyup")
});
</script>

.on() 方法：这是绑定事件的首选方法，它可以将一个或多个事件处理程序绑定到选定的元素上。

4 jQuery 动画与效果

jQuery 内置了一些简单的动画效果。

<button id="hideBtn">隐藏</button>
<button id="showBtn">显示</button>
<button id="toggleBtn">切换</button>
<button id="animateBtn">动画</button>
<p id="animatable" style="width:100px; height:100px; background-color:red;">方块</p>
<script>
$(document).ready(function() {
    // 隐藏和显示
    $("#hideBtn").click(function() {
        $("#animatable").hide("slow"); // "slow", "fast", 或毫秒数 (如 1000)
    });
    $("#showBtn").click(function() {
        $("#animatable").show("fast");
    });
    $("#toggleBtn").click(function() {
        $("#animatable").toggle(1000);
    });
    // 滑动
    // $("#animatable").slideUp(1000);
    // $("#animatable").slideDown(1000);
    // $("#animatable").slideToggle(1000);
    // 淡入淡出
    // $("#animatable").fadeOut(1000);
    // $("#animatable").fadeIn(1000);
    // $("#animatable").fadeToggle(1000);
    // $("#animatable").fadeTo(1000, 0.5); // 淡入到 50% 透明度
    // 自定义动画
    $("#animateBtn").click(function() {
        $("#animatable").animate({
            width: "200px",
            height: "200px",
            opacity: 0.5
        }, 1000);
    });
});
</script>

第四部分：jQuery DOM 操作

1 内容操作

方法	描述	示例
`text()`	设置或返回所选元素的文本内容	`$("p").text("新文本");`
`html()`	设置或返回所选元素的内容（包括 HTML 标签）	`$("p").html("<b>加粗文本</b>");`
`val()`	设置或返回表单字段的值	`$("input").val("默认值");`

2 属性与类操作

方法	描述	示例
`attr()`	设置或获取属性值	`$("img").attr("src", "new_image.jpg");`
`prop()`	设置或获取属性（主要用于 checked, selected, disabled 等布尔属性）	`$("input[type='checkbox']").prop("checked", true);`
`addClass()`	添加一个或多个类名	`$("p").addClass("highlight big");`
`removeClass()`	移除一个或多个类名	`$("p").removeClass("highlight");`
`toggleClass()`	对类名进行切换（有则移除，无则添加）	`$("p").toggleClass("highlight");`
`hasClass()`	检查是否包含某个类	`if ($("p").hasClass("highlight")) { ... }`

3 CSS 样式操作

方法	描述	示例
`css()`	设置或获取样式	`$("p").css("color", "blue");` `$("p").css({"color": "red", "font-size": "20px"});`

4 元素遍历与创建

方法	描述	示例
`after()`	在元素之后插入内容	`$("p").after("<b>新内容</b>");`
`before()`	在元素之前插入内容	`$("p").before("<i>前置内容</i>");`
`append()`	在元素内部末尾插入内容	`$("p").append("这是追加的文本。");`
`prepend()`	在元素内部开头插入内容	`$("p").prepend("这是前置的文本。");`
`remove()`	删除被选元素（及其子元素）	`$("#div1").remove();`
`empty()`	从被选元素中删除子元素	`$("#div1").empty();`
`clone()`	克隆被选元素	`$("p").clone().appendTo("#div2");`
`each()`	遍历一个对象或数组	`$("li").each(function(index) { console.log($(this).text()); });`

第五部分：AJAX 与实用工具

1 `$.ajax()` - 强大的异步请求方法

$.ajax() 是 jQuery 中最底层的 AJAX 方法，功能最强大。

$(document).ready(function() {
    $.ajax({
        url: "https://jsonplaceholder.typicode.com/posts/1", // 请求的 URL
        type: "GET", // 请求方法 (GET, POST, PUT, DELETE)
        dataType: "json", // 预期服务器返回的数据类型
        success: function(response) {
            // 请求成功时执行的回调函数
            console.log("获取数据成功:", response);
            $("#result").html("<h3>" + response.title + "</h3><p>" + response.body + "</p>");
        },
        error: function(xhr, status, error) {
            // 请求失败时执行的回调函数
            console.error("请求失败:", status, error);
            $("#result").text("加载数据失败。");
        },
        complete: function(xhr, status) {
            // 请求完成时执行的回调函数（无论成功或失败）
            console.log("请求完成。");
        }
    });
});

2 `$.get()` 和 `$.post()` - 简化的 AJAX 请求

这两个是 $.ajax() 的简化版本，用于最常见的 GET 和 POST 请求。

// $.get() 示例
$(document).ready(function() {
    $.get("https://jsonplaceholder.typicode.com/posts/1", function(data) {
        console.log("GET 请求成功:", data);
    }).fail(function() {
        console.error("GET 请求失败");
    });
});
// $.post() 示例
$(document).ready(function() {
    $.post("https://jsonplaceholder.typicode.com/posts", {
        title: "foo",
        body: "bar",
        userId: 1
    }, function(data) {
        console.log("POST 请求成功，返回 ID:", data.id);
    }).fail(function() {
        console.error("POST 请求失败");
    });
});

3 jQuery 实用工具函数

这些是静态方法,通过直接调用。

$.trim(str): 去除字符串两端的空白字符。
$.each(array, function(index, value) {}): 遍历数组或对象。
$.map(array, function(value, index) {}): 遍历数组，并将返回值组成新数组。
$.inArray(value, array): 检查值是否在数组中，返回索引，否则返回 -1。
$.extend(target, object1, object2 ...): 合并一个或多个对象到第一个对象。

第六部分：jQuery 3 的现代化与最佳实践

1 使用 `deferred` 对象处理异步

$.ajax() 返回一个 Promise-like 的 Deferred 对象，可以使用 .done(), .fail(), .always() 来链式处理异步结果，这比传统的 success/error 回调更现代。

$.ajax("...")
    .done(function(data) {
        console.log("成功:", data);
    })
    .fail(function(xhr, status, error) {
        console.error("失败:", error);
    })
    .always(function() {
        console.log("请求结束");
    });

2 避免全局命名空间污染

将你的代码包裹在一个立即执行函数表达式（IIFE）中，避免污染全局 window 对象。

(function($) {
    // 在这里写你的 jQuery 代码
    // 使用 $ 是安全的，即使其他库也使用了 $
    $(document).ready(function() {
        // ...
    });
})(jQuery);

3 性能优化建议

缓存选择器结果：如果多次操作同一个元素，先把它存起来。

// 不推荐
$("#myDiv").css("color", "red");
$("#myDiv").css("background", "blue");
// 推荐
var myDiv = $("#myDiv");
myDiv.css("color", "red");
myDiv.css("background", "blue");

使用事件委托：对于动态添加的元素，使用 on() 的事件委托模式更高效。

// 不推荐：动态添加的按钮没有点击事件
// $(".dynamic-button").on("click", ...);
// 推荐：将事件绑定到父元素
$("#parent-container").on("click", ".dynamic-button", function() {
    // ...
});

第七部分：完整示例 - 一个简单的待办事项列表

让我们把学到的知识整合起来,创建一个功能完整的待办事项列表。

1 需求分析

在输入框中输入任务,点击“添加”按钮，任务出现在列表中。
每个任务旁边有一个“删除”按钮，点击后删除该任务。
任务可以标记为已完成（划掉文本）。

2 HTML 结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">jQuery 待办事项列表</title>
    <style>
        body { font-family: sans-serif; }
        #todo-list { list-style: none; padding: 0; }
        #todo-list li { background: #f4f4f4; margin: 5px 0; padding: 10px; display: flex; justify-content: space-between; align-items: center; }
        #todo-list li.completed { text-decoration: line-through; color: #ccc; }
        #todo-list li button { background: #ff4136; color: white; border: none; padding: 5px 10px; cursor: pointer; }
        input[type="text"] { padding: 8px; width: 70%; }
        button#add-btn { padding: 8px; width: 25%; }
    </style>
</head>
<body>
    <h1>我的待办事项</h1>
    <div>
        <input type="text" id="new-todo" placeholder="输入新任务...">
        <button id="add-btn">添加</button>
    </div>
    <ul id="todo-list">
        <!-- 任务项将动态添加到这里 -->
    </ul>
    <!-- 引入 jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!-- 引入我们的 JS 文件 -->
    <script src="app.js"></script>
</body>
</html>

3 jQuery 逻辑实现 (`app.js`)

// 使用 IIFE 避免全局污染
(function($) {
    $(document).ready(function() {
        // 缓存 DOM 元素
        var $newTodoInput = $("#new-todo");
        var $addButton = $("#add-btn");
        var $todoList = $("#todo-list");
        // 添加任务
        $addButton.on("click", addTodo);
        $newTodoInput.on("keypress", function(e) {
            // 如果按下的是回车键 (keyCode 13)
            if (e.which === 13) {
                addTodo();
            }
        });
        // 使用事件委托处理删除和完成事件
        $todoList.on("click", ".delete-btn", function() {
            $(this).parent("li").fadeOut(300, function() {
                // 动画结束后移除元素
                $(this).remove();
            });
        });
        $todoList.on("click", ".complete-btn", function() {
            $(this).parent("li").toggleClass("completed");
        });
        function addTodo() {
            var todoText = $newTodoInput.val().trim();
            if (todoText !== "") {
                // 创建新的列表项
                var $newLi = $("<li></li>").text(todoText);
                // 创建删除按钮
                var $deleteBtn = $("<button class='delete-btn'>删除</button>");
                $newLi.append($deleteBtn);
                // 创建完成按钮
                var $completeBtn = $("<button class='complete-btn'>完成</button>");
                $newLi.append($completeBtn);
                // 添加到列表
                $todoList.append($newLi);
                // 清空输入框
                $newTodoInput.val("");
            }
        }
    });
})(jQuery);