jQuery 从入门到实战全解：前端高效开发核心

<!-- 引入百度 CDN 的 jQuery 1.12.4 版本 -->
<script src="https://apps.bdimg.com/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- 或引入微软 CDN -->
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>

1.3.3 引入验证

引入后可通过以下代码验证是否引入成功：

<script src="https://apps.bdimg.com/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
// 方式 1：打印 jQuery 对象
console.log($); // 输出 function (a,b){return new n.fn.init(a,b)} 表示成功
console.log(jQuery); // $是 jQuery 的别名，两者等价
// 方式 2：弹出提示框
$(function(){
  alert("jQuery 引入成功！");
});
</script>

二、jQuery 核心语法：基础入门必备

2.1 核心思想：选择器 + 方法

jQuery 的核心语法可以概括为：$(选择器).方法()。

• $：jQuery 的全局别名，等价于 jQuery，用于获取 DOM 元素并返回一个 jQuery 对象。
• 选择器：和 CSS 选择器语法一致，用于精准定位需要操作的 DOM 元素（如标签选择器、类选择器、ID 选择器等）。
• 方法：jQuery 封装的功能方法，用于对选中的 DOM 元素执行操作（如修改样式、绑定事件、修改内容等）。

示例：修改 ID 为 title 的元素内容和样式：

<h1 id="title">原始标题</h1>
<script src="https://apps.bdimg.com/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
// 1. 用 ID 选择器选中#title 元素，返回 jQuery 对象
// 2. 调用 text() 方法修改元素文本内容
// 3. 调用 css() 方法修改元素样式
$("#title").text("jQuery 核心语法").css({color:"red",fontSize:"24px"});
</script>

2.2 入口函数：DOM 加载完成后执行

原生 JS 中，若要在 DOM 加载完成后执行代码，需使用 DOMContentLoaded 事件；jQuery 提供了更简洁的入口函数，确保代码在 DOM 加载完成后执行（避免操作尚未加载的 DOM 元素）。

2.2.1 两种常用写法

<script src="https://apps.bdimg.com/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
// 写法 1：推荐，简洁直观
$(function(){
  // 此处编写需要在 DOM 加载完成后执行的代码
  console.log("DOM 加载完成，可执行 jQuery 代码");
  $("#title").text("入口函数示例");
});
// 写法 2：完整写法，等价于写法 1
$(document).ready(function(){
  // 代码逻辑
});
</script>

2.2.2 和 window.onload 的区别

原生 JS 的 window.onload 也会等待页面加载完成，但和 jQuery 入口函数有明显区别：

2.3 jQuery 对象与原生 DOM 对象的区别与转换

使用 jQuery 时必须区分'jQuery 对象'和'原生 DOM 对象'，两者不能混用方法（如 jQuery 对象不能调用原生 JS 的方法，反之亦然）。

2.3.1 核心区别

• 原生 DOM 对象：通过 document.getElementById()、document.querySelector() 等原生方法获取的对象，只能调用原生 JS 方法（如 innerHTML、style 等）。
• jQuery 对象：通过 $() 选择器获取的对象（本质是一个包含原生 DOM 元素的类数组），只能调用 jQuery 方法（如 text()、css() 等）。

<div id="box"></div>
<script src="https://apps.bdimg.com/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
// 1. 获取原生 DOM 对象
const boxDom = document.getElementById("box");
// 原生 DOM 对象调用原生方法
boxDom.innerHTML = "原生 DOM 对象";
boxDom.style.color = "blue";
// 2. 获取 jQuery 对象
const $box = $("#box");
// jQuery 对象调用 jQuery 方法
$box.text("jQuery 对象");
$box.css("fontSize","18px");
// 错误示范：两者方法不能混用
boxDom.text("错误"); // 报错：boxDom.text is not a function
$box.innerHTML = "错误"; // 报错：$box.innerHTML is undefined
</script>

2.3.2 相互转换

实际开发中可能需要相互转换（如使用 jQuery 选择器获取元素后，调用原生 JS 方法）：

• jQuery 对象 → 原生 DOM 对象：jQuery 对象是类数组，可通过索引（$obj[索引]）或 get(索引) 方法获取原生 DOM 对象。
• 原生 DOM 对象 → jQuery 对象：将原生 DOM 对象传入 $() 即可。

<div id="box"></div>
<script src="https://apps.bdimg.com/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
// 1. jQuery 对象 → 原生 DOM 对象
const $box = $("#box");
// 方式 1：通过索引
const boxDom1 = $box[0];
// 方式 2：通过 get(索引)
const boxDom2 = $box.get(0);
// 调用原生方法
boxDom1.innerHTML = "jQuery 转原生";
// 2. 原生 DOM 对象 → jQuery 对象
const boxDom = document.getElementById("box");
const $box2 = $(boxDom);
// 调用 jQuery 方法
$box2.css("color","red");
</script>

三、jQuery 核心功能：DOM 操作

DOM 操作是 jQuery 最核心的功能之一，包括'查找元素（选择器）''修改样式''修改内容''操作属性''增删 DOM 元素'等，比原生 JS 简洁得多。

3.1 选择器：精准查找 DOM 元素

jQuery 选择器完全兼容 CSS 选择器语法，同时扩展了部分专属选择器，可快速精准定位 DOM 元素。常用选择器分类如下：

3.1.1 基础选择器（最常用）

3.1.2 层级选择器

根据元素之间的层级关系选择元素，常用语法：

3.1.3 过滤选择器（jQuery 扩展）

在选中的元素集合中，根据特定条件过滤出需要的元素，语法以 : 开头：

3.1.4 表单选择器（jQuery 扩展）

专门用于选择表单元素，简化表单相关操作：

3.2 样式操作：修改元素样式

jQuery 提供了 css()、addClass()、removeClass() 等方法，用于修改元素样式，比原生 JS 的 style 属性更灵活。

3.2.1 单个样式操作：css(属性名，属性值)

修改单个 CSS 样式，属性名可使用驼峰命名（如 fontSize）或中划线命名（如 font-size，需加引号）：

<div id="box">样式操作示例</div>
<script src="https://apps.bdimg.com/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  const $box = $("#box");
  // 1. 设置单个样式（驼峰命名）
  $box.css("fontSize","20px");
  // 2. 设置单个样式（中划线命名，需加引号）
  $box.css("color","red");
  // 3. 获取样式值
  const fontSize = $box.css("fontSize");
  console.log("当前字体大小：", fontSize); // 输出：当前字体大小：20px
});
</script>

3.2.2 多个样式操作：css(对象)

通过对象传入多个样式，一次性修改：

<div id="box">多个样式操作</div>
<script src="https://apps.bdimg.com/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  $("#box").css({
    fontSize:"24px",
    color:"white",
    backgroundColor:"#333",
    padding:"10px 20px",
    borderRadius:"5px"
  });
});
</script>

3.2.3 类操作：addClass/removeClass/toggleClass

通过操作 CSS 类名修改样式（推荐，便于样式与逻辑分离）：

<style>
.box{width: 200px;height: 200px;background-color: #eee;padding: 20px;}
.active{background-color: blue;color: white;font-size: 18px;}
</style>
<div id="box" class="box">类操作示例</div>
<script src="https://apps.bdimg.com/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  const $box = $("#box");
  // 1. 添加类：addClass(类名)
  $box.addClass("active"); // 此时 box 拥有 box 和 active 两个类
  // 2. 移除类：removeClass(类名)
  // $box.removeClass("active"); // 移除 active 类
  // 3. 切换类：toggleClass(类名)（有则移除，无则添加）
  // $box.toggleClass("active"); // 点击时切换类
  $box.click(function(){
    $(this).toggleClass("active");
  });
  // 4. 判断是否有某个类：hasClass(类名)（返回布尔值）
  const hasActive = $box.hasClass("active");
  console.log("是否有 active 类：", hasActive); // 输出：true
});
</script>

3.3 内容操作：修改元素文本/HTML

jQuery 提供 text()、html()、val() 方法，分别用于操作元素的文本内容、HTML 内容、表单值。

3.3.1 text()：操作文本内容

用于设置或获取元素的纯文本内容（不解析 HTML 标签）：

<div id="box">原始文本</div>
<script src="https://apps.bdimg.com/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  const $box = $("#box");
  // 1. 获取文本内容
  const text = $box.text();
  console.log("原始文本：", text); // 输出：原始文本
  // 2. 设置文本内容（不解析 HTML 标签）
  $box.text("新的文本内容<strong>加粗</strong>"); // 页面显示：新的文本内容<strong>加粗</strong>（HTML 标签被当作文本）
});
</script>

3.3.2 html()：操作 HTML 内容

用于设置或获取元素的 HTML 内容（解析 HTML 标签）：

<div id="box"><p>原始 HTML</p></div>
<script src="https://apps.bdimg.com/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  const $box = $("#box");
  // 1. 获取 HTML 内容
  const html = $box.html();
  console.log("原始 HTML：", html); // 输出：<p>原始 HTML</p>
  // 2. 设置 HTML 内容（解析 HTML 标签）
  $box.html("新的<strong>HTML 内容</strong>"); // 页面显示：新的 HTML 内容（strong 标签生效，文本加粗）
});
</script>

3.3.3 val()：操作表单值

用于设置或获取表单元素（输入框、下拉框、单选/复选框等）的值：

<input type="text" id="username" value="默认值"><br>
<select id="city">
  <option value="beijing">北京</option>
  <option value="shanghai">上海</option>
  <option value="guangzhou">广州</option>
</select>
<script src="https://apps.bdimg.com/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  // 1. 操作文本框值
  const $username = $("#username");
  // 获取值
  console.log("原始值：", $username.val()); // 输出：默认值
  // 设置值
  $username.val("张三");
  // 2. 操作下拉框值
  const $city = $("#city");
  // 获取选中值
  console.log("原始城市：", $city.val()); // 输出：beijing
  // 设置选中值（通过 value）
  $city.val("shanghai"); // 此时选中'上海'选项
  // 3. 操作复选框（获取选中值，需结合:checked）
  $("input:checkbox").val(["apple","banana"]); // 选中 value 为 apple 和 banana 的复选框
});
</script>

3.4 属性操作：修改元素属性

jQuery 提供 attr()、prop()、removeAttr() 等方法，用于操作元素的属性（如 src、href、id、class 等）。

3.4.1 attr()：操作普通属性

用于设置或获取元素的普通属性（如 src、href、title 等）：

<img id="img" src="default.jpg" alt="默认图片" title="默认标题">
<a id="link" href="https://www.baidu.com">百度</a>
<script src="https://apps.bdimg.com/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  // 1. 操作图片属性
  const $img = $("#img");
  // 获取属性
  console.log("原始 src：", $img.attr("src")); // 输出：default.jpg
  console.log("原始 title：", $img.attr("title")); // 输出：默认标题
  // 设置属性
  $img.attr({src:"new.jpg",alt:"新图片",title:"新标题"});
  // 2. 操作链接属性
  const $link = $("#link");
  $link.attr("href","https://www.jQuery.com");
  $link.text("jQuery 官网");
});
</script>

3.4.2 prop()：操作布尔属性

对于'布尔类型'的属性（如 checked、selected、disabled 等），推荐使用 prop()（attr() 在某些浏览器下可能出现兼容性问题）：

<input type="checkbox" id="agree" checked> 同意协议 <button id="btn" disabled>禁用按钮</button>
<script src="https://apps.bdimg.com/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  // 1. 操作复选框
  const $agree = $("#agree");
  // 获取是否选中（返回布尔值）
  console.log("是否同意：", $agree.prop("checked")); // 输出：true
  // 设置选中/取消
  $agree.prop("checked",false); // 取消选中
  // 2. 操作按钮禁用状态
  const $btn = $("#btn");
  console.log("是否禁用：", $btn.prop("disabled")); // 输出：true
  // 取消禁用
  $btn.prop("disabled",false);
});
</script>

注意：attr() 和 prop() 的区别：attr() 获取的是'HTML 属性'（标签上写的属性），prop() 获取的是'DOM 元素的属性'（JS 对象的属性）。对于布尔类型属性，优先用 prop()；对于普通属性，用 attr()。

3.4.3 removeAttr()：移除属性

用于移除元素的指定属性：

<img id="img" src="default.jpg" alt="默认图片">
<script src="https://apps.bdimg.com/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  $("#img").removeAttr("alt"); // 移除 alt 属性
});
</script>

3.5 DOM 增删改：动态操作 DOM 元素

实际开发中常需要动态添加、删除、替换 DOM 元素（如动态渲染列表、添加评论等），jQuery 提供了便捷的方法。

3.5.1 动态添加元素

常用方法：append()（添加到元素内部末尾）、prepend()（添加到元素内部开头）、after()（添加到元素外部后面）、before()（添加到元素外部前面）。

<ul id="list"><li>原始列表项</li></ul>
<script src="https://apps.bdimg.com/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  const $list = $("#list");
  // 1. append()：添加到内部末尾
  $list.append("<li>append 添加的项（末尾）</li>");
  // 2. prepend()：添加到内部开头
  $list.prepend("<li>prepend 添加的项（开头）</li>");
  // 3. after()：添加到外部后面
  $list.after("<p>after 添加的内容（外部后面）</p>");
  // 4. before()：添加到外部前面
  $list.before("<p>before 添加的内容（外部前面）</p>");
  // 5. 添加已存在的元素（移动元素）
  const $newLi = $("<li>新创建的 li</li>");
  $list.append($newLi); // 将新创建的 li 添加到列表末尾
});
</script>

3.5.2 动态删除元素

常用方法：remove()（删除元素本身及所有子元素）、empty()（清空元素内部所有子元素，保留自身）。

<ul id="list"><li>列表项 1</li><li>列表项 2</li><li id="item3">列表项 3</li></ul>
<script src="https://apps.bdimg.com/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  // 1. remove()：删除指定元素（本身 + 子元素）
  $("#item3").remove(); // 删除 id 为 item3 的 li 元素
  // 2. empty()：清空元素内部（保留自身）
  // $("#list").empty(); // 清空 ul 内部所有 li，保留 ul 标签
  // 3. 带条件删除（删除包含指定文本的元素）
  $("li:contains('列表项 1')").remove(); // 删除文本为'列表项 1'的 li
});
</script>

3.5.3 动态替换元素

使用 replaceWith() 方法替换指定元素：

<div id="box">原始内容</div>
<script src="https://apps.bdimg.com/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  // 替换元素
  $("#box").replaceWith("<div>替换后的内容</div>");
});
</script>

四、jQuery 核心功能：事件处理

事件处理是前端交互的核心（如点击按钮、输入文本、鼠标移动等），jQuery 封装了原生 JS 的事件处理逻辑，提供了更简洁、兼容的事件绑定方法。

4.1 基础事件绑定：on() 方法（推荐）

jQuery 1.7+ 版本推荐使用 on() 方法绑定事件，支持绑定多个事件、事件委托，功能强大且统一。语法：$(选择器).on("事件类型", [事件委托目标], 事件处理函数)。

4.1.1 绑定单个事件

<button id="btn">点击按钮</button>
<script src="https://apps.bdimg.com/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  // 绑定点击事件
  $("#btn").on("click",function(){
    // this：原生 DOM 对象（当前触发事件的元素）
    // $(this)：转换为 jQuery 对象，可调用 jQuery 方法
    $(this).text("已点击");
    alert("按钮被点击了！");
  });
});
</script>

4.1.2 绑定多个事件（同一处理函数）

多个事件共享同一个处理函数，事件类型用空格分隔：

<div id="box" style="width: 200px;height: 200px;background: #eee;"></div>
<script src="https://apps.bdimg.com/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  // 绑定鼠标进入（mouseenter）和鼠标离开（mouseleave）事件
  $("#box").on("mouseenter mouseleave",function(){
    $(this).toggleClass("active"); // 切换 active 类（改变样式）
  });
});
</script>

4.1.3 绑定多个事件（不同处理函数）

通过对象形式为不同事件绑定不同处理函数：

<input type="text" id="input" placeholder="输入文本...">
<script src="https://apps.bdimg.com/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  $("#input").on({
    focus:function(){
      // 获得焦点事件
      $(this).css("borderColor","blue");
    },
    blur:function(){
      // 失去焦点事件
      $(this).css("borderColor","#ccc");
      console.log("输入的内容：",$(this).val());
    },
    input:function(){
      // 输入内容事件（实时监听）
      console.log("实时输入：",$(this).val());
    }
  });
});
</script>

4.2 事件解绑：off() 方法

使用 off() 方法解绑通过 on() 绑定的事件，语法灵活：

<button id="btn">点击按钮</button>
<button id="unbindBtn">解绑点击事件</button>
<script src="https://apps.bdimg.com/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  // 定义事件处理函数（便于解绑时指定）
  function clickHandler(){
    alert("按钮被点击了！");
  }
  // 绑定点击事件
  $("#btn").on("click", clickHandler);
  // 解绑事件
  $("#unbindBtn").on("click",function(){
    // 1. 解绑指定事件（推荐）
    $("#btn").off("click", clickHandler);
    // 2. 解绑所有事件（不指定事件类型）
    // $("#btn").off();
    // 3. 解绑指定类型的所有事件（不指定处理函数）
    // $("#btn").off("click");
  });
});
</script>

4.3 事件委托：解决动态元素事件绑定问题

动态添加的元素（如通过 append() 添加的 li），直接绑定事件会失效（因为绑定事件时元素还未存在）。此时需要使用'事件委托'：将事件绑定到静态的父元素上，由父元素委托处理子元素的事件。

事件委托核心原理：事件冒泡（子元素触发的事件会向上冒泡到父元素），父元素通过事件对象判断触发事件的目标子元素是否匹配指定规则，若匹配则执行对应的事件处理函数。简单来说，就是'父元素帮子元素代收事件并处理'。

4.3.1 事件委托语法

使用 on() 方法实现事件委托的完整语法：
$(父选择器).on("事件类型", "子选择器", 事件处理函数)
参数说明：

1. 父选择器：必须是静态存在的父元素（页面加载时就已存在，不是动态添加的）；
2. 子选择器：需要委托事件的目标子元素（可以是动态添加的）；
3. 事件处理函数：事件触发时执行的逻辑。

4.3.2 事件委托示例（动态元素事件绑定）

以下示例演示动态添加 li 元素后，通过事件委托实现点击 li 弹窗的效果：

<ul id="list"><li>原始列表项 1</li><li>原始列表项 2</li></ul>
<button id="addLi">添加新列表项</button>
<script src="https://apps.bdimg.com/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  // 1. 事件委托：将 li 的点击事件委托给静态父元素 ul
  $("#list").on("click","li",function(){
    // $(this) 指向触发事件的子元素 li（而非父元素 ul）
    alert("点击了："+$(this).text());
  });
  // 2. 动态添加 li 元素
  $("#addLi").on("click",function(){
    const newLi = "<li>动态添加的列表项"+($("li").length +1)+"</li>";
    $("#list").append(newLi);
  });
});
</script>

示例说明：动态添加的 li 元素无需单独绑定点击事件，因为父元素 ul 已经通过事件委托接管了所有 li 的点击事件，即使后续新增 li，点击时事件仍会冒泡到 ul 并被处理。

4.3.3 事件委托的优势

• 支持动态元素：解决了动态添加元素无法绑定事件的问题，无需在元素添加后重复绑定事件；
• 提升性能：减少事件绑定的数量（只需给父元素绑定一次，而非给每个子元素单独绑定），尤其适合子元素数量较多的场景（如长列表）；
• 简化代码：统一管理子元素的事件逻辑，无需编写重复的事件绑定代码。

4.3.4 注意事项

• 父元素必须是'静态元素'：即页面加载时就已存在的元素，不能是动态添加的（否则父元素本身都不存在，无法委托事件）；
• 子选择器要精准：确保只匹配需要委托事件的子元素，避免无关元素触发事件；
• 事件类型支持冒泡：大部分事件（如 click、mouseenter、input 等）支持冒泡，但少数不支持冒泡的事件（如 focus、blur）无法直接使用事件委托，需改用事件捕获或其他替代方案（如 focusin、focusout）。

4.4 事件对象：获取事件相关信息

当事件触发时，jQuery 会自动将一个'事件对象'（Event Object）传入事件处理函数。该对象包含了事件触发时的详细信息（如触发事件的元素、事件类型、鼠标位置等），并提供了控制事件行为的方法（如阻止默认行为、停止事件冒泡等）。

4.4.1 事件对象的获取

直接在事件处理函数中接收参数即可获取事件对象，常用命名为 e 或 event：

<button>点击按钮</button>
<script src="https://apps.bdimg.com/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  $("#btn").on("click", function(e){
    // e 即为事件对象
    console.log("事件对象：", e);
  });
});
</script>

4.4.2 事件对象的常用属性

通过事件对象的属性可获取事件相关信息，常用属性如下：

4.4.3 事件对象的常用方法

事件对象提供了控制事件行为的方法，常用方法如下：

4.4.4 实际应用示例

示例 1：阻止链接跳转（preventDefault()）

<a href="https://www.baidu.com">百度（点击不跳转）</a>
<script src="https://apps.bdimg.com/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  $("#link").on("click", function(e){
    e.preventDefault(); // 阻止链接的默认跳转行为
    alert("链接被点击，但已阻止跳转");
  });
});
</script>

示例 2：阻止事件冒泡（stopPropagation()）

<div id="parent">
  <div id="child"></div>
</div>
<script src="https://apps.bdimg.com/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  // 父元素绑定 click 事件
  $("#parent").on("click", function(){
    alert("父元素被点击");
  });
  // 子元素绑定 click 事件
  $("#child").on("click", function(e){
    e.stopPropagation(); // 阻止事件冒泡
    alert("子元素被点击");
  });
});
</script>

示例说明：点击子元素时，仅触发子元素的事件（弹出'子元素被点击'）；若注释掉 e.stopPropagation()，点击子元素会先触发子元素事件，再触发父元素事件（事件冒泡）。

4.5 常用简化事件绑定方法

除了通用的 on() 方法，jQuery 还提供了一系列简化的事件绑定方法（语法糖），本质是对 on() 方法的封装，更简洁直观。常用简化方法如下：

示例：使用简化方法绑定点击事件

<button>点击按钮</button>
<script src="https://apps.bdimg.com/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  // 简化写法
  $("#btn").click(function(){
    alert("点击事件（简化方法）");
  });
  // 等价于 on() 写法
  // $("#btn").on("click", function(){
  //   alert("点击事件（on 方法）");
  // });
});
</script>

注意：简化事件方法仅适用于简单的事件绑定场景，若需要事件委托、绑定多个事件或后续解绑事件，仍推荐使用 on() 和 off() 方法。

五、jQuery 核心功能：动画效果

jQuery 内置了丰富的动画效果方法，无需编写复杂的 CSS 动画或原生 JS 定时器，就能快速实现元素的显示隐藏、滑动、淡入淡出、自定义运动等交互效果，极大提升了前端页面的生动性。核心动画方法分为'基础预设动画''自定义动画'和'动画控制'三类。

5.1 基础预设动画：快速实现常用效果

jQuery 提供了一系列预设动画方法，语法简洁，可直接调用，适用于大部分简单交互场景（如弹窗显示/隐藏、菜单展开/收起等）。

5.1.1 显示与隐藏：show() / hide() / toggle()

用于控制元素的显示和隐藏，默认通过改变元素的 width、height、opacity 属性实现渐变动画效果。

• show([speed], [easing], [callback])：显示隐藏的元素
• hide([speed], [easing], [callback])：隐藏显示的元素
• toggle([speed], [easing], [callback])：切换元素的显示/隐藏状态（显示变隐藏，隐藏变显示）

参数说明：

• speed（可选）：动画持续时间，可选值为'slow'（600ms）、'fast'（200ms）、具体毫秒数（如 500）
• easing（可选）：动画运动曲线，默认'swing'（先慢后快再慢）、'linear'（匀速）
• callback（可选）：动画完成后执行的回调函数

<div id="box" style="width: 100px;height: 100px;background: red;display: none;"></div>
<button id="showBtn">显示</button>
<button id="hideBtn">隐藏</button>
<button id="toggleBtn">切换</button>
<script src="https://apps.bdimg.com/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  const $box = $("#box");
  // 显示动画
  $("#showBtn").click(function(){
    $box.show(500,"linear",function(){
      alert("显示动画完成！");
    });
  });
  // 隐藏动画
  $("#hideBtn").click(function(){
    $box.hide("slow");
  });
  // 切换动画
  $("#toggleBtn").click(function(){
    $box.toggle("fast");
  });
});
</script>

5.1.2 滑动动画：slideDown() / slideUp() / slideToggle()

通过改变元素的 height 属性实现'向下滑动展开''向上滑动收起'的效果，适合用于菜单、下拉列表等场景。

• slideDown([speed], [easing], [callback])：向下滑动展开元素
• slideUp([speed], [easing], [callback])：向上滑动收起元素
• slideToggle([speed], [easing], [callback])：切换滑动状态

<ul id="menu" style="width: 200px;border: 1px solid #ccc;padding: 0;">
  <li style="padding: 10px;background: #eee;cursor: pointer;" id="menuTitle">菜单列表</li>
  <li style="padding: 10px;display: none;border-top: 1px solid #ccc;">选项 1</li>
  <li style="padding: 10px;display: none;border-top: 1px solid #ccc;">选项 2</li>
  <li style="padding: 10px;display: none;border-top: 1px solid #ccc;">选项 3</li>
</ul>
<script src="https://apps.bdimg.com/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  $("#menuTitle").click(function(){
    // 切换子菜单滑动状态
    $("#menu li:gt(0)").slideToggle(300);
  });
});
</script>

5.1.3 淡入淡出动画：fadeIn() / fadeOut() / fadeToggle() / fadeTo()

通过改变元素的 opacity 属性实现'淡入''淡出'效果，适合用于图片轮播、提示框渐变等场景。

• fadeIn([speed], [easing], [callback])：淡入显示元素（从透明到不透明）
• fadeOut([speed], [easing], [callback])：淡出隐藏元素（从不透明到透明）
• fadeToggle([speed], [easing], [callback])：切换淡入淡出状态
• fadeTo([speed], opacity, [easing], [callback])：将元素淡入/淡出到指定透明度（opacity 为 0-1 的数值，元素不会隐藏）

<img src="https://picsum.photos/200/150" id="img" style="display: none;">
<button id="fadeInBtn">淡入</button>
<button id="fadeOutBtn">淡出</button>
<button id="fadeToBtn">淡到 50% 透明</button>
<script src="https://apps.bdimg.com/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  const $img = $("#img");
  $("#fadeInBtn").click(function(){
    $img.fadeIn(600);
  });
  $("#fadeOutBtn").click(function(){
    $img.fadeOut(600);
  });
  $("#fadeToBtn").click(function(){
    $img.fadeTo(300,0.5); // 300ms 内淡到 50% 透明
  });
});
</script>

5.2 自定义动画：animate() 方法

基础预设动画无法满足复杂需求时，可使用 animate() 方法实现自定义动画，支持任意 CSS 属性的渐变过渡（需是可计算的数值类型属性，如 width、left、fontSize 等，color 等属性需额外引入 jQuery Color 插件）。

5.2.1 基本语法

$(选择器).animate(styles,[speed],[easing],[callback]);

参数说明：

• styles（必选）：对象类型，包含要动画的 CSS 属性和目标值（如{left: '300px', top: '200px'}）
• speed（可选）：动画持续时间，同基础动画
• easing（可选）：动画运动曲线，同基础动画
• callback（可选）：动画完成后的回调函数

5.2.2 自定义动画示例

实现元素移动、缩放、改变背景色的组合动画（背景色动画需引入 jQuery Color 插件）：

<div id="box" style="width: 100px;height: 100px;background: red;position: absolute;left: 0;top: 100px;"></div>
<button id="animateBtn">执行自定义动画</button>
<!-- 引入 jQuery 和 Color 插件（用于颜色动画） -->
<script src="https://apps.bdimg.com/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://apps.bdimg.com/libs/jquerycolor/2.1.2/jquery.color.min.js"></script>
<script>
$(function(){
  $("#animateBtn").click(function(){
    $("#box").animate({
      left:"500px", // 向右移动到 500px 位置
      top:"200px", // 向下移动到 200px 位置
      width:"200px", // 宽度放大到 200px
      height:"200px", // 高度放大到 200px
      backgroundColor:"#00f" // 背景色变为蓝色（需 Color 插件）
    },1000,"swing",function(){
      // 第一个动画完成后，执行第二个动画（链式调用）
      $(this).animate({
        borderRadius:"50%" // 变为圆形
      },500);
    });
  });
});
</script>

5.3 动画控制：stop() 与 delay()

实际开发中可能需要暂停动画、延迟执行动画，jQuery 提供了 stop()（停止动画）和 delay()（延迟动画）方法，解决动画排队、执行时机控制问题。

5.3.1 停止动画：stop()

用于停止当前正在执行的动画，语法：$(选择器).stop([clearQueue], [jumpToEnd])

参数说明：

• clearQueue（可选，布尔值）：是否清除未执行的动画队列，默认 false（不清除，后续动画继续执行）
• jumpToEnd（可选，布尔值）：是否让当前动画直接跳转到目标状态，默认 false（停在当前位置）

<div id="box" style="width: 100px;height: 100px;background: red;display: none;"></div>
<button id="startBtn">开始动画</button>
<button id="stopBtn">停止动画</button>
<script src="https://apps.bdimg.com/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  const $box = $("#box");
  $("#startBtn").click(function(){
    // 连续触发时，会形成动画队列
    $box.slideDown(1000).slideUp(1000);
  });
  $("#stopBtn").click(function(){
    // 停止当前动画，清除未执行的队列，跳转到最终状态
    $box.stop(true,true);
  });
});
</script>

5.3.2 延迟动画：delay()

用于延迟执行后续动画，语法：$(选择器).delay(duration, [queueName])

参数说明：

• duration（必选）：延迟时间，单位毫秒
• queueName（可选）：动画队列名称，默认"fx"（jQuery 默认动画队列）

<div id="box" style="width: 100px;height: 100px;background: red;"></div>
<button id="delayBtn">延迟动画</button>
<script src="https://apps.bdimg.com/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  $("#delayBtn").click(function(){
    $("#box").fadeOut(500).delay(1000) // 延迟 1 秒.
      .fadeIn(500); // 1 秒后淡入
  });
});
</script>

动画注意事项：1. 动画属性需是数值类型（如 width、opacity），非数值属性（如 display、backgroundColor）需特殊处理（如 backgroundColor 需 Color 插件）；2. 连续触发动画可能导致队列堆积，建议使用 stop(true, true) 清除队列；3. 动画执行时会影响元素性能，避免同时执行大量复杂动画。

六、jQuery 核心功能：AJAX 数据交互

AJAX（Asynchronous JavaScript and XML，异步 JavaScript 和 XML）是前端与后端进行数据交互的核心技术，能实现页面无刷新更新数据，提升用户体验。jQuery 封装了原生 AJAX 的复杂逻辑，提供了简洁的 API，支持 GET、POST 等请求方式，同时解决了浏览器兼容性问题。

jQuery 的 AJAX 相关方法分为两类：「简化方法」（如 load()、$.get()、$.post()）和「通用方法」（$.ajax()）。简化方法适用于简单场景，通用方法功能更强大，支持自定义请求头、超时设置等复杂需求。

6.1 简化 AJAX 方法：快速实现数据交互

6.1.1 load()：加载远程 HTML 内容到指定元素

load() 方法是最简洁的 AJAX 方法，直接将远程服务器返回的 HTML 内容插入到指定元素中，语法：$(选择器).load(url, [data], [callback])

参数说明：

• url（必选）：请求的服务器接口地址
• data（可选）：发送给服务器的参数，可传入对象（{key: value}）或字符串（'key1=value1&key2=value2'）；传入对象时为 POST 请求，传入字符串或不传入时为 GET 请求
• callback（可选）：请求完成后的回调函数，接收三个参数：responseText（服务器返回内容）、statusText（请求状态）、xhr（XMLHttpRequest 对象）

<div id="content">加载中...</div>
<button id="loadBtn">加载远程内容</button>
<script src="https://apps.bdimg.com/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  $("#loadBtn").click(function(){
    // 加载远程 HTML 内容到#content 元素
    $("#content").load("test.html", {
      id: 1,
      name: "jQuery"
    }, function(response, status, xhr){
      if(status === "success"){
        console.log("加载成功，返回内容：", response);
      } else {
        console.log("加载失败：", xhr.status);
      }
    });
  });
});
</script>

6.1.2 $.get()：发送 GET 请求获取数据

专门用于发送 GET 请求，获取服务器返回的数据（通常为 JSON、XML 或文本），语法：$.get(url, [data], [callback], [dataType])

参数说明：

• url（必选）：请求接口地址
• data（可选）：发送的请求参数，对象或字符串形式
• callback（可选）：请求成功后的回调函数，参数为：data（服务器返回数据，已根据 dataType 解析）、statusText（请求状态）、xhr（XMLHttpRequest 对象）
• dataType（可选）：预期的服务器返回数据类型，可选值：'json'、'xml'、'text'、'html'，默认自动判断

<button id="getBtn">发送 GET 请求</button>
<div id="result"></div>
<script src="https://apps.bdimg.com/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  $("#getBtn").click(function(){
    // 发送 GET 请求获取用户列表
    $.get("/api/users", {page: 1, size: 10}, function(data, status, xhr){
      if(status === "success"){
        // 假设返回 JSON 数据：{code:0, data:[{id:1,name:"张三"},...]}
        if(data.code === 0){
          let html = "<ul>";
          data.data.forEach(user => {
            html += `<li>${user.id} - ${user.name}</li>`;
          });
          html += "</ul>";
          $("#result").html(html);
        }
      }
    }, "json"); // 指定返回数据类型为 JSON
  });
});
</script>

6.1.3 $.post()：发送 POST 请求提交数据

专门用于发送 POST 请求，向服务器提交数据（如表单提交、新增数据等），语法与 $.get() 完全一致：$.post(url, [data], [callback], [dataType])

核心区别：$.get() 将参数拼接在 URL 后（可见，不安全），适合获取数据；$.post() 将参数放在请求体中（不可见，相对安全），适合提交敏感数据（如密码）。

<form id="userForm">
  用户名：<input type="text" name="username"><br>
  密码：<input type="password" name="password"><br>
  <button type="submit">提交表单</button>
</form>
<div id="msg"></div>
<script src="https://apps.bdimg.com/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  $("#userForm").submit(function(e){
    e.preventDefault(); // 阻止表单默认提交
    // 获取表单数据（对象形式）
    const formData = $(this).serializeObject(); // 发送 POST 请求提交表单
    $.post("/api/login", formData, function(data, status){
      if(data.code === 0){
        $("#msg").css("color", "green").text("登录成功！");
      } else {
        $("#msg").css("color", "red").text(data.msg);
      }
    }, "json");
  });
  // 扩展：将表单数据转为对象（jQuery 未内置，需自定义）
  $.fn.serializeObject = function(){
    const obj = {};
    const arr = this.serializeArray(); // 序列化表单为数组
    arr.forEach(item => {
      obj[item.name] = item.value;
    });
    return obj;
  };
});
</script>

6.2 通用 AJAX 方法：$.ajax()（推荐）

$.ajax() 是 jQuery 最核心的 AJAX 方法，功能全面，支持自定义请求方式、请求头、超时时间、错误处理等所有 AJAX 特性，适用于复杂的数据交互场景。语法：$.ajax(options)，其中 options 是配置对象，包含所有请求参数。

6.2.1 核心配置参数

6.2.2 $.ajax() 示例：提交 JSON 数据并处理异常

<button id="ajaxBtn">发送 AJAX 请求</button>
<div id="ajaxResult"></div>
<script src="https://apps.bdimg.com/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  $("#ajaxBtn").click(function(){
    // 显示加载动画
    $("#ajaxResult").text("加载中...");
    $.ajax({
      url: "/api/addUser",
      method: "POST",
      data: JSON.stringify({ // 提交 JSON 数据，需转为字符串
        username: "李四",
        age: 25,
        email: "[email protected]"
      }),
      contentType: "application/json", // 必须指定 contentType 为 application/json
      dataType: "json",
      timeout: 3000,
      headers: {
        "X-Request-Id": "123456" // 自定义请求头
      },
      success: function(data){
        if(data.code === 0){
          $("#ajaxResult").css("color", "green").text("新增用户成功！用户 ID：" + data.data.id);
        } else {
          $("#ajaxResult").css("color", "orange").text("新增失败：" + data.msg);
        }
      },
      error: function(xhr, status, error){
        let errMsg = "请求失败：";
        if(status === "timeout"){
          errMsg += "请求超时（3 秒）";
        } else if(status === "error"){
          errMsg += `状态码：${xhr.status}，错误信息：${error}`;
        } else if(status === "parsererror"){
          errMsg += "数据解析失败";
        }
        $("#ajaxResult").css("color", "red").text(errMsg);
      },
      complete: function(){
        // 无论成功失败，都关闭加载动画（此处简化为清空加载文本）
        const text = $("#ajaxResult").text();
        if(text === "加载中..."){
          $("#ajaxResult").text("请求完成");
        }
      }
    });
  });
});
</script>

6.3 AJAX 辅助方法：序列化表单数据

提交表单时，需将表单元素的值转为请求参数，jQuery 提供了两个序列化方法：

• serialize()：将表单数据转为字符串形式（key1=value1&key2=value2），适合直接作为 data 参数传递
• serializeArray()：将表单数据转为数组形式（[{name:"key1", value:"value1"}, …]），适合进一步处理为对象

<form id="form">
  用户名：<input type="text" name="username" value="张三"><br>
  密码：<input type="password" name="password" value="123456"><br>
  爱好：<input type="checkbox" name="hobby" value="game" checked>游戏 <input type="checkbox" name="hobby" value="read" checked>阅读<br>
</form>
<button id="serializeBtn">序列化表单</button>
<script src="https://apps.bdimg.com/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  $("#serializeBtn").click(function(){
    const $form = $("#form");
    // 1. serialize()：转为字符串
    const strData = $form.serialize();
    console.log("serialize 字符串：", strData); // 输出：username=张三&password=123456&hobby=game&hobby=read
    // 2. serializeArray()：转为数组
    const arrData = $form.serializeArray();
    console.log("serializeArray 数组：", arrData); // 输出：[{name:"username",value:"张三"}, ...]
    // 3. 转为对象（自定义扩展）
    const objData = {};
    arrData.forEach(item => {
      // 处理多选框（同名参数）
      if(objData[item.name]){
        objData[item.name] = [].concat(objData[item.name], item.value);
      } else {
        objData[item.name] = item.value;
      }
    });
    console.log("转为对象：", objData); // 输出：{username:"张三", password:"123456", hobby:["game","read"]}
  });
});
</script>

AJAX 注意事项：1. 跨域问题：默认情况下，AJAX 不允许跨域请求（不同域名、端口、协议），需后端配置 CORS（跨域资源共享）或使用 JSONP 方案；2. 数据格式：提交 JSON 数据时，需将数据转为字符串（JSON.stringify()）并指定 contentType: 'application/json'；3. 错误处理：必须添加 error 回调，处理超时、网络异常、服务器错误等场景；4. 安全性：避免在 GET 请求中传递敏感数据（如密码），建议使用 POST 请求并配合 HTTPS 协议。

七、jQuery 工具方法

jQuery 除了操作 DOM 和事件的实例方法外，还提供了一系列静态工具方法（无需获取 DOM 元素，直接通过 $. 调用），用于处理数据、数组、对象等，简化通用业务逻辑。常用工具方法如下：

7.1 数组/对象遍历：$.each()

用于遍历数组或对象，替代原生的 for/for-in 循环，语法：$.each(待遍历对象，function(index/key, value){})

// 1. 遍历数组
const arr = [1, 2, 3, 4, 5];
$.each(arr, function(index, value) {
  console.log(`数组索引${index}：${value}`); // 输出：数组索引 0：1 等
});
// 2. 遍历对象
const obj = { name: "张三", age: 20, gender: "男" };
$.each(obj, function(key, value) {
  console.log(`对象属性${key}：${value}`); // 输出：对象属性 name：张三 等
});
// 3. 遍历 DOM 元素集合（也可使用实例方法 each()）
$("li").each(function(index, domEle) {
  $(domEle).text(`列表项${index + 1}`); // 给每个 li 设置文本
});

7.2 数组转换：$.map()

用于对数组元素进行处理并返回新数组，语法：$.map(数组，function(value, index){ return 处理后的值; })

const arr = [1, 2, 3, 4, 5];
// 将数组中每个元素乘 2，返回新数组
const newArr = $.map(arr, function(value, index) {
  return value * 2;
});
console.log(newArr); // 输出：[2,4,6,8,10]
// 过滤掉小于 3 的元素（返回 null/undefined 则不加入新数组）
const filterArr = $.map(arr, function(value) {
  return value > 3 ? value : null;
});
console.log(filterArr); // 输出：[4,5]

7.3 数据类型判断：$.type()

用于精准判断数据类型，比原生 typeof 更准确（如区分数组、null、日期等），语法：$.type(数据)

console.log($.type(123)); // 输出：number
console.log($.type("abc")); // 输出：string
console.log($.type(true)); // 输出：boolean
console.log($.type([1,2,3])); // 输出：array
console.log($.type({})); // 输出：object
console.log($.type(null)); // 输出：null
console.log($.type(new Date())); // 输出：date
console.log($.type(function(){})); // 输出：function

7.4 字符串处理：$.trim()

用于去除字符串首尾的空白字符（空格、制表符、换行符等），语法：$.trim(字符串)

const str = " Hello jQuery ";
const trimStr = $.trim(str);
console.log(trimStr); // 输出：Hello jQuery
console.log(trimStr.length); // 输出：11（原字符串长度 15）

7.5 对象扩展：$.extend()

用于合并多个对象的属性，将后续对象的属性合并到第一个对象中，语法：$.extend(目标对象，源对象 1，源对象 2, ...),支持深拷贝（第一个参数传 true）。

// 1. 浅拷贝（默认）
const target = { a: 1, b: 2 };
const source1 = { b: 3, c: 4 };
const source2 = { d: 5 };
$.extend(target, source1, source2);
console.log(target); // 输出：{a:1, b:3, c:4, d:5}（source1 的 b 覆盖 target 的 b）
// 2. 深拷贝（处理嵌套对象）
const target2 = { a: 1, b: { b1: 10 } };
const source3 = { b: { b2: 20 }, c: 3 };
$.extend(true, target2, source3);
console.log(target2); // 输出：{a:1, b:{b1:10, b2:20}, c:3}（嵌套对象合并，不覆盖原有属性）

八、jQuery 插件开发基础

jQuery 的强大之处在于其丰富的插件生态，同时也支持自定义插件扩展功能。插件开发核心是通过扩展 $.fn（实例方法插件）或 $（静态工具插件）实现，以下介绍最常用的实例方法插件开发。

8.1 插件开发核心原理

jQuery 实例对象（如 $("div")）的方法都挂载在 $.fn 对象上，自定义插件本质是向 $.fn 添加新方法，让所有 jQuery 实例都能调用。开发时需注意：

• 插件方法内部通过 this 获取当前 jQuery 实例，支持链式调用（最后返回 this）；
• 避免污染全局作用域，使用自执行函数包裹代码；
• 支持传入配置参数，提高插件灵活性。

8.2 简单插件开发示例：自定义高亮插件

开发一个 highlight() 插件，实现元素文本高亮效果，支持自定义颜色参数：

// 自执行函数包裹，避免全局污染（传入 jQuery，使用$别名）
(function($) {
  // 向$.fn 添加 highlight 方法（插件核心）
  $.fn.highlight = function(options) {
    // 默认配置
    const defaults = {
      color: "red", // 默认高亮颜色
      backgroundColor: "yellow" // 默认背景色
    };
    // 合并用户配置和默认配置（浅拷贝）
    const settings = $.extend({}, defaults, options);
    // 遍历当前 jQuery 实例（支持多元素）
    this.each(function() {
      // this 指向单个原生 DOM 元素，转为 jQuery 对象
      $(this).css({
        color: settings.color,
        backgroundColor: settings.backgroundColor,
        fontWeight: "bold"
      });
    });
    // 返回 this，支持链式调用
    return this;
  };
})(jQuery);

// 插件使用示例
$(function() {
  // 调用插件，使用默认配置
  $("h3").highlight();
  // 调用插件，传入自定义配置
  $("#box").highlight({ color: "white", backgroundColor: "blue" });
  // 链式调用（插件返回 this，可继续调用其他 jQuery 方法）
  $("p").highlight({ color: "green" }).css("fontSize", "16px");
});

8.3 插件调用与扩展

自定义插件开发完成后，可像 jQuery 内置方法一样调用，支持多元素批量处理和链式调用。若需扩展插件功能，可在原有插件基础上添加子方法，或通过 $.extend() 扩展配置。

插件开发注意事项：1. 插件命名规范：避免与 jQuery 内置方法或其他常用插件重名，建议添加前缀（如 myHighlight）；2. 兼容性：若需兼容低版本 jQuery，需注意 API 差异（如 jQuery 3.x 移除的方法）；3. 调试：开发时可通过 console.log(this) 查看当前 jQuery 实例，确保方法作用域正确。

九、jQuery 的优缺点与适用场景

9.1 优点

• 简洁易用：语法简洁直观，封装了原生 JS 的复杂逻辑（如 DOM 操作、AJAX），上手成本低；
• 浏览器兼容：自动处理不同浏览器的兼容性问题（如 IE6-8 与现代浏览器的 API 差异），无需手动编写兼容代码；
• 丰富的生态：拥有大量成熟的插件（如轮播图、表单验证、日期选择器等），可直接复用，提高开发效率；
• 链式调用：支持方法链式调用，代码简洁高效，减少变量声明；
• 轻量级：核心文件体积小（压缩后约 30KB），加载速度快，对项目性能影响小。

9.2 缺点

• 依赖 DOM 操作：核心功能围绕 DOM 操作，在现代前端框架（Vue、React）的组件化开发模式中，DOM 操作优先级降低，jQuery 的优势减弱；
• 性能局限：批量 DOM 操作时，若未使用优化手段（如 detach()、文档片段），性能不如原生 JS；
• 功能冗余：现代浏览器已原生支持很多 jQuery 功能（如 querySelector、fetch 替代 AJAX、classList 替代 addClass/removeClass），无需额外引入 jQuery；
• 不支持双向数据绑定：在复杂数据驱动的项目中，需手动维护数据与 DOM 的同步，开发效率低于 Vue、React 等框架。

9.3 适用场景

• 小型项目/静态页面：如企业官网、个人博客等，需求以简单 DOM 交互、动画效果为主，jQuery 足以满足需求，开发效率高；
• 遗留项目维护：大量旧项目使用 jQuery 开发，维护时需熟悉 jQuery 语法；
• 快速原型开发：需快速实现交互效果，无需搭建复杂框架，jQuery 可快速完成需求验证；
• 与后端模板结合：如 JSP、PHP 等后端渲染页面，需前端少量交互代码，jQuery 轻量且易用，适合此类场景。

9.4 不适用场景

• 大型单页应用（SPA）：需组件化、数据驱动开发，推荐使用 Vue、React、Angular 等现代前端框架；
• 高性能要求的场景：如数据可视化、大型游戏等，需原生 JS 或专门的框架优化性能；
• 移动端跨平台应用：推荐使用 React Native、Uni-app 等跨平台框架，jQuery 的移动端适配能力较弱。

十、总结

jQuery 是前端发展史上的重要里程碑，其核心价值在于'简化 DOM 操作、解决浏览器兼容、提供便捷的交互能力'。本教程从基础语法、DOM 操作、事件处理、动画效果、AJAX 数据交互、工具方法、插件开发等方面，系统讲解了 jQuery 的核心知识点，适合前端初学者入门学习。

学习 jQuery 时，需重点掌握'选择器''链式调用''事件委托''AJAX'等核心概念，同时理解其与原生 JS 的区别与联系。在实际开发中，应根据项目规模和需求选择合适的技术：小型项目可高效使用 jQuery；大型复杂项目则推荐现代前端框架，必要时可引入 jQuery 辅助处理少量 DOM 交互。

最后，建议在掌握 jQuery 的基础上，进一步学习原生 JS 的高级特性（如闭包、原型、异步编程）和现代前端框架，提升自身技术广度和深度。