JavaScript大前端
jQuery 从入门到实战：前端高效开发指南
系统讲解 jQuery 的核心知识点，涵盖基础语法、DOM 操作、事件处理、动画效果及 AJAX 数据交互。通过对比原生 JS 与 jQuery 的差异，演示选择器、链式调用、事件委托等关键用法，并提供插件开发与适用场景分析，适合前端初学者快速掌握这一经典库。
系统讲解 jQuery 的核心知识点，涵盖基础语法、DOM 操作、事件处理、动画效果及 AJAX 数据交互。通过对比原生 JS 与 jQuery 的差异，演示选择器、链式调用、事件委托等关键用法，并提供插件开发与适用场景分析，适合前端初学者快速掌握这一经典库。
在前端开发的发展历程中，jQuery 曾是当之无愧的'明星工具库'。它以'write less, do more'为核心理念，极大简化了原生 JavaScript 的 DOM 操作、事件处理、AJAX 请求等繁琐流程，同时完美解决了不同浏览器之间的兼容性问题。即便如今 Vue、React 等框架盛行，jQuery 在后端模板渲染、简单交互开发、老项目维护等场景中仍有着广泛应用。对于前端初学者而言，掌握 jQuery 不仅能快速上手实际开发，更能加深对 DOM、事件流等前端核心概念的理解。本文将从入门到实战，全面拆解 jQuery 的核心知识点，搭配可直接运行的示例代码与实用拓展，助你彻底掌握这一高效开发利器。
jQuery 是一个基于原生 JavaScript 封装的轻量级、高效的 JavaScript 库，它封装了原生 JS 中常用的 DOM 操作、事件处理、动画效果、AJAX 请求等功能，提供了简洁、直观的 API，让开发者能用更少的代码完成更多的功能。
简单理解：jQuery 就像是原生 JS 的'升级版工具包'。原生 JS 操作 DOM 时需要写大量重复代码，还需处理浏览器兼容，而 jQuery 把这些复杂逻辑封装成了简单的方法，我们直接调用即可。
使用 jQuery 前必须先引入，主要有两种引入方式：
先从 jQuery 官网下载 jQuery 文件（推荐 1.x 版本，兼容 IE8 及以上；3.x 版本不兼容低版本 IE），然后通过 script 标签引入本地文件：
<!-- 引入本地 jQuery 文件，放在 head 或 body 结束前均可，建议放 body 结束前 -->
<body>
<!-- 页面内容 -->
<script src="jquery.min.js"></script>
<script>
// 此处可编写 jQuery 代码
</script>
</body>
无需下载文件，直接引入第三方 CDN（内容分发网络）提供的 jQuery 文件，加载速度快，适合线上项目：
<!-- 引入 CDN 的 jQuery 1.12.4 版本 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
引入后可通过以下代码验证是否引入成功：
// 方式 1：打印 jQuery 对象
console.log($); // 输出 function (a,b){return new n.fn.init(a,b)} 表示成功
console.log(jQuery); // $是 jQuery 的别名，两者等价
// 方式 2：弹出提示框
$(function(){
alert("jQuery 引入成功！");
});
jQuery 的核心语法可以概括为：$(选择器).方法()。
$：jQuery 的全局别名，等价于 jQuery，用于获取 DOM 元素并返回一个 jQuery 对象。示例：修改 ID 为 title 的元素内容和样式：
<h1 id="title">原始标题</h1>
<script src="jquery.min.js"></script>
<script>
// 1. 用 ID 选择器选中#title 元素，返回 jQuery 对象
// 2. 调用 text() 方法修改元素文本内容
// 3. 调用 css() 方法修改元素样式
$("#title").text("jQuery 核心语法").css({color:"red",fontSize:"24px"});
</script>
原生 JS 中，若要在 DOM 加载完成后执行代码，需使用 DOMContentLoaded 事件；jQuery 提供了更简洁的入口函数，确保代码在 DOM 加载完成后执行（避免操作尚未加载的 DOM 元素）。
// 写法 1：推荐，简洁直观
$(function(){
// 此处编写需要在 DOM 加载完成后执行的代码
console.log("DOM 加载完成，可执行 jQuery 代码");
$("#title").text("入口函数示例");
});
// 写法 2：完整写法，等价于写法 1
$(document).ready(function(){
// 代码逻辑
});
原生 JS 的 window.onload 也会等待页面加载完成，但和 jQuery 入口函数有明显区别：
| 对比项 | jQuery 入口函数（$(function())） | window.onload |
|---|---|---|
| 触发时机 | DOM 结构加载完成后立即触发（无需等待图片、视频等资源加载） | 页面所有资源（DOM、图片、视频等）加载完成后才触发 |
| 执行次数 | 可多次定义，依次执行 | 只能定义一次，多次定义会覆盖前面的 |
| 简洁度 | 简洁，代码量少 | 相对繁琐 |
| 开发建议 | 优先使用 jQuery 入口函数，确保代码在 DOM 加载完成后执行，避免出现'无法找到 DOM 元素'的错误。 | - |
使用 jQuery 时必须区分'jQuery 对象'和'原生 DOM 对象'，两者不能混用方法（如 jQuery 对象不能调用原生 JS 的方法，反之亦然）。
document.getElementById()、document.querySelector() 等原生方法获取的对象，只能调用原生 JS 方法（如 innerHTML、style 等）。$() 选择器获取的对象（本质是一个包含原生 DOM 元素的类数组），只能调用 jQuery 方法（如 text()、css() 等）。<div id="box"></div>
<script src="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>
实际开发中可能需要相互转换（如使用 jQuery 选择器获取元素后，调用原生 JS 方法）：
$obj[索引]）或 get(索引) 方法获取原生 DOM 对象。$() 即可。<div id="box"></div>
<script src="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>
DOM 操作是 jQuery 最核心的功能之一，包括'查找元素（选择器）''修改样式''修改内容''操作属性''增删 DOM 元素'等，比原生 JS 简洁得多。
jQuery 选择器完全兼容 CSS 选择器语法，同时扩展了部分专属选择器，可快速精准定位 DOM 元素。常用选择器分类如下：
| 选择器语法 | 功能描述 | 示例代码 |
|---|---|---|
| 标签选择器：$('标签名') | 选中所有指定标签的元素 | $('div') → 选中所有 div 元素 |
| 类选择器：$('.类名') | 选中所有带指定类名的元素 | $('.box') → 选中所有 class="box"的元素 |
| ID 选择器：$('#ID 名') | 选中指定 ID 的元素（唯一） | $('#title') → 选中 id="title"的元素 |
| 通配符选择器：$('*') | 选中页面所有元素 | $('*') → 选中所有元素（慎用，性能差） |
| 组合选择器：$('选择器 1，选择器 2') | 选中多个选择器匹配的元素 | $('div,.box,#title') → 选中所有 div、.box、#title 元素 |
根据元素之间的层级关系选择元素，常用语法：
| 选择器语法 | 功能描述 | 示例代码 |
|---|---|---|
| 后代选择器：$('父选择器 子选择器') | 选中父元素下所有后代子元素（包括子、孙、曾孙等） | $('ul li') → 选中 ul 下所有 li 元素 |
| 子选择器：$('父选择器 > 子选择器') | 选中父元素下直接子元素（仅一级） | $('ul > li') → 选中 ul 下直接子元素 li（不包含孙级 li） |
| 相邻兄弟选择器：$('元素 + 兄弟元素') | 选中指定元素的下一个相邻兄弟元素 | $('div + p') → 选中 div 后面紧邻的 p 元素 |
| 通用兄弟选择器：$('元素 ~ 兄弟元素') | 选中指定元素后面所有同级兄弟元素 | $('div ~ p') → 选中 div 后面所有同级 p 元素 |
在选中的元素集合中，根据特定条件过滤出需要的元素，语法以 : 开头：
| 选择器语法 | 功能描述 | 示例代码 |
|---|---|---|
| :first | 选中元素集合中的第一个元素 | $('li:first') → 选中所有 li 中的第一个 |
| :last | 选中元素集合中的最后一个元素 | $('li:last') → 选中所有 li 中的最后一个 |
| :eq(index) | 选中元素集合中索引为 index 的元素（索引从 0 开始） | $('li:eq(2)') → 选中所有 li 中索引为 2 的元素（第三个） |
| :gt(index) | 选中元素集合中索引大于 index 的元素 | $('li:gt(1)') → 选中所有 li 中索引大于 1 的元素（第三个及以后） |
| :lt(index) | 选中元素集合中索引小于 index 的元素 | $('li:lt(2)') → 选中所有 li 中索引小于 2 的元素（前两个） |
| :odd | 选中元素集合中索引为奇数的元素（0 为偶数） | $('li:odd') → 选中索引 1、3、5…的 li 元素 |
| :even | 选中元素集合中索引为偶数的元素 | $('li:even') → 选中索引 0、2、4…的 li 元素 |
| :not(选择器) | 选中不匹配指定选择器的元素 | $('li:not(.active)') → 选中所有 li 中不包含.active 类的元素 |
专门用于选择表单元素，简化表单相关操作：
| 选择器语法 | 功能描述 | 示例代码 |
|---|---|---|
| :input | 选中所有表单元素（input、textarea、select、button） | $(':input') → 选中所有表单元素 |
| :text | 选中所有单行文本框（type='text'） | $(':text') → 选中所有单行文本框 |
| :password | 选中所有密码框（type='password'） | $(':password') → 选中所有密码框 |
| :radio | 选中所有单选按钮（type='radio'） | $(':radio') → 选中所有单选按钮 |
| :checkbox | 选中所有复选框（type='checkbox'） | $(':checkbox') → 选中所有复选框 |
| :checked | 选中所有被选中的单选按钮/复选框 | $(':checked') → 选中所有选中的单选/复选框 |
| :selected | 选中所有被选中的下拉列表项 | $('select option:selected') → 选中下拉列表中被选中的项 |
jQuery 提供了 css()、addClass()、removeClass() 等方法，用于修改元素样式，比原生 JS 的 style 属性更灵活。
修改单个 CSS 样式，属性名可使用驼峰命名（如 fontSize）或中划线命名（如 font-size，需加引号）：
$(function(){
const $box = $("#box");
// 1. 设置单个样式（驼峰命名）
$box.css("fontSize","20px");
// 2. 设置单个样式（中划线命名，需加引号）
$box.css("color","red");
// 3. 获取样式值
const fontSize = $box.css("fontSize");
console.log("当前字体大小：", fontSize);
});
通过对象传入多个样式，一次性修改：
$(function(){
$("#box").css({
fontSize:"24px",
color:"white",
backgroundColor:"#333",
padding:"10px 20px",
borderRadius:"5px"
});
});
通过操作 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="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);
});
</script>
jQuery 提供 text()、html()、val() 方法，分别用于操作元素的文本内容、HTML 内容、表单值。
用于设置或获取元素的纯文本内容（不解析 HTML 标签）：
$(function(){
const $box = $("#box");
// 1. 获取文本内容
const text = $box.text();
console.log("原始文本：", text);
// 2. 设置文本内容（不解析 HTML 标签）
$box.text("新的文本内容<strong>加粗</strong>");
// 页面显示：新的文本内容<strong>加粗</strong>（HTML 标签被当作文本）
});
用于设置或获取元素的 HTML 内容（解析 HTML 标签）：
$(function(){
const $box = $("#box");
// 1. 获取 HTML 内容
const html = $box.html();
console.log("原始 HTML：", html);
// 2. 设置 HTML 内容（解析 HTML 标签）
$box.html("新的<strong>HTML 内容</strong>");
// 页面显示：新的 HTML 内容（strong 标签生效，文本加粗）
});
用于设置或获取表单元素（输入框、下拉框、单选/复选框等）的值：
<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="jquery.min.js"></script>
<script>
$(function(){
// 1. 操作文本框值
const $username = $("#username");
// 获取值
console.log("原始值：", $username.val());
// 设置值
$username.val("张三");
// 2. 操作下拉框值
const $city = $("#city");
// 获取选中值
console.log("原始城市：", $city.val());
// 设置选中值（通过 value）
$city.val("shanghai");
// 此时选中'上海'选项
// 3. 操作复选框（获取选中值，需结合:checked）
$("input:checkbox").val(["apple","banana"]);
// 选中 value 为 apple 和 banana 的复选框
});
</script>
jQuery 提供 attr()、prop()、removeAttr() 等方法，用于操作元素的属性（如 src、href、id、class 等）。
用于设置或获取元素的普通属性（如 src、href、title 等）：
$(function(){
// 1. 操作图片属性
const $img = $("#img");
// 获取属性
console.log("原始 src：", $img.attr("src"));
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 官网");
});
对于'布尔类型'的属性（如 checked、selected、disabled 等），推荐使用 prop()（attr() 在某些浏览器下可能出现兼容性问题）：
<input type="checkbox" id="agree" checked> 同意协议 <button id="btn" disabled>禁用按钮</button>
<script src="jquery.min.js"></script>
<script>
$(function(){
// 1. 操作复选框
const $agree = $("#agree");
// 获取是否选中（返回布尔值）
console.log("是否同意：", $agree.prop("checked"));
// 设置选中/取消
$agree.prop("checked",false);
// 2. 操作按钮禁用状态
const $btn = $("#btn");
console.log("是否禁用：", $btn.prop("disabled"));
// 取消禁用
$btn.prop("disabled",false);
});
</script>
注意：attr() 和 prop() 的区别：attr() 获取的是'HTML 属性'（标签上写的属性），prop() 获取的是'DOM 元素的属性'（JS 对象的属性）。对于布尔类型属性，优先用 prop()；对于普通属性，用 attr()。
用于移除元素的指定属性：
$(function(){
$("#img").removeAttr("alt");
});
实际开发中常需要动态添加、删除、替换 DOM 元素（如动态渲染列表、添加评论等），jQuery 提供了便捷的方法。
常用方法：append()（添加到元素内部末尾）、prepend()（添加到元素内部开头）、after()（添加到元素外部后面）、before()（添加到元素外部前面）。
$(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);
});
常用方法：remove()（删除元素本身及所有子元素）、empty()（清空元素内部所有子元素，保留自身）。
$(function(){
// 1. remove()：删除指定元素（本身 + 子元素）
$("#item3").remove();
// 2. empty()：清空元素内部（保留自身）
// $("#list").empty();
// 3. 带条件删除（删除包含指定文本的元素）
$("li:contains('列表项 1')").remove();
});
使用 replaceWith() 方法替换指定元素：
$(function(){
$("#box").replaceWith("<div>替换后的内容</div>");
});
事件处理是前端交互的核心（如点击按钮、输入文本、鼠标移动等），jQuery 封装了原生 JS 的事件处理逻辑，提供了更简洁、兼容的事件绑定方法。
jQuery 1.7+ 版本推荐使用 on() 方法绑定事件，支持绑定多个事件、事件委托，功能强大且统一。语法：$(选择器).on("事件类型", [事件委托目标], 事件处理函数)。
$(function(){
$("#btn").on("click",function(){
// this：原生 DOM 对象（当前触发事件的元素）
// $(this)：转换为 jQuery 对象，可调用 jQuery 方法
$(this).text("已点击");
alert("按钮被点击了！");
});
});
多个事件共享同一个处理函数，事件类型用空格分隔：
$(function(){
$("#box").on("mouseenter mouseleave",function(){
$(this).toggleClass("active");
});
});
通过对象形式为不同事件绑定不同处理函数：
$(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());
}
});
});
使用 off() 方法解绑通过 on() 绑定的事件，语法灵活：
$(function(){
function clickHandler(){
alert("按钮被点击了！");
}
// 绑定点击事件
$("#btn").on("click", clickHandler);
// 解绑事件
$("#unbindBtn").on("click",function(){
// 1. 解绑指定事件（推荐）
$("#btn").off("click", clickHandler);
// 2. 解绑所有事件（不指定事件类型）
// $("#btn").off();
// 3. 解绑指定类型的所有事件（不指定处理函数）
// $("#btn").off("click");
});
});
动态添加的元素（如通过 append() 添加的 li），直接绑定事件会失效（因为绑定事件时元素还未存在）。此时需要使用'事件委托'：将事件绑定到静态的父元素上，由父元素委托处理子元素的事件。
事件委托核心原理：事件冒泡（子元素触发的事件会向上冒泡到父元素），父元素通过事件对象判断触发事件的目标子元素是否匹配指定规则，若匹配则执行对应的事件处理函数。简单来说，就是'父元素帮子元素代收事件并处理'。
使用 on() 方法实现事件委托的完整语法：
$(父选择器).on("事件类型", "子选择器", 事件处理函数)
参数说明：
以下示例演示动态添加 li 元素后，通过事件委托实现点击 li 弹窗的效果：
$(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);
});
});
示例说明：动态添加的 li 元素无需单独绑定点击事件，因为父元素 ul 已经通过事件委托接管了所有 li 的点击事件，即使后续新增 li，点击时事件仍会冒泡到 ul 并被处理。
当事件触发时，jQuery 会自动将一个'事件对象'（Event Object）传入事件处理函数。该对象包含了事件触发时的详细信息（如触发事件的元素、事件类型、鼠标位置等），并提供了控制事件行为的方法（如阻止默认行为、停止事件冒泡等）。
直接在事件处理函数中接收参数即可获取事件对象，常用命名为 e 或 event：
$(function(){
$("#btn").on("click", function(e){
// e 即为事件对象
console.log("事件对象：", e);
});
});
通过事件对象的属性可获取事件相关信息，常用属性如下：
| 属性名 | 功能描述 | 示例代码 |
|---|---|---|
| e.target | 触发事件的'原始目标元素'（原生 DOM 对象），可能是子元素（事件冒泡场景下） | console.log(e.target); |
| e.currentTarget | 绑定事件的'当前元素'（原生 DOM 对象），等价于 this | console.log(e.currentTarget === this); |
| e.type | 获取当前触发的事件类型（如"click"、'mouseenter'） | console.log(e.type); |
| e.pageX / e.pageY | 获取鼠标触发事件时相对于文档左上角的坐标（包含滚动距离） | console.log('X 坐标：', e.pageX, 'Y 坐标：', e.pageY); |
| e.clientX / e.clientY | 获取鼠标触发事件时相对于浏览器可视区左上角的坐标（不包含滚动距离） | console.log('可视区 X：', e.clientX); |
事件对象提供了控制事件行为的方法，常用方法如下：
| 方法名 | 功能描述 | 适用场景 |
|---|---|---|
| e.preventDefault() | 阻止事件的'默认行为'（如链接跳转、表单提交、鼠标右键菜单等） | 禁止链接跳转、禁止表单默认提交 |
| e.stopPropagation() | 阻止事件'冒泡'（避免事件向上传递给父元素） | 子元素和父元素都绑定了 click 事件，避免父元素事件触发 |
| e.stopImmediatePropagation() | 阻止事件冒泡 + 阻止当前元素后续绑定的同类型事件执行 | 同一元素绑定了多个 click 事件，需终止后续事件 |
示例 1：阻止链接跳转（preventDefault()）
$(function(){
$("#link").on("click", function(e){
e.preventDefault(); // 阻止链接的默认跳转行为
alert("链接被点击，但已阻止跳转");
});
});
示例 2：阻止事件冒泡（stopPropagation()）
$(function(){
// 父元素绑定 click 事件
$("#parent").on("click", function(){
alert("父元素被点击");
});
// 子元素绑定 click 事件
$("#child").on("click", function(e){
e.stopPropagation(); // 阻止事件冒泡
alert("子元素被点击");
});
});
示例说明：点击子元素时，仅触发子元素的事件（弹出'子元素被点击'）；若注释掉 e.stopPropagation()，点击子元素会先触发子元素事件，再触发父元素事件（事件冒泡）。
除了通用的 on() 方法，jQuery 还提供了一系列简化的事件绑定方法（语法糖），本质是对 on() 方法的封装，更简洁直观。常用简化方法如下：
| 简化方法 | 等价于 on() 写法 | 功能描述 |
|---|---|---|
| click(function(){}) | on('click', function(){}) | 绑定点击事件 |
| dblclick(function(){}) | on('dblclick', function(){}) | 绑定双击事件 |
| mouseenter(function(){}) | on('mouseenter', function(){}) | 绑定鼠标进入事件（不冒泡） |
| mouseleave(function(){}) | on('mouseleave', function(){}) | 绑定鼠标离开事件（不冒泡） |
| focus(function(){}) | on('focus', function(){}) | 绑定元素获得焦点事件 |
| blur(function(){}) | on('blur', function(){}) | 绑定元素失去焦点事件 |
| input(function(){}) | on('input', function(){}) | 绑定输入框内容变化事件 |
$(function(){
// 简化写法
$("#btn").click(function(){
alert("点击事件（简化方法）");
});
// 等价于 on() 写法
// $("#btn").on("click", function(){
// alert("点击事件（on 方法）");
// });
});
注意：简化事件方法仅适用于简单的事件绑定场景，若需要事件委托、绑定多个事件或后续解绑事件，仍推荐使用 on() 和 off() 方法。
jQuery 内置了丰富的动画效果方法，无需编写复杂的 CSS 动画或原生 JS 定时器，就能快速实现元素的显示隐藏、滑动、淡入淡出、自定义运动等交互效果，极大提升了前端页面的生动性。核心动画方法分为'基础预设动画''自定义动画'和'动画控制'三类。
jQuery 提供了一系列预设动画方法，语法简洁，可直接调用，适用于大部分简单交互场景（如弹窗显示/隐藏、菜单展开/收起等）。
用于控制元素的显示和隐藏，默认通过改变元素的 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（可选）：动画完成后执行的回调函数$(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");
});
});
通过改变元素的 height 属性实现'向下滑动展开''向上滑动收起'的效果，适合用于菜单、下拉列表等场景。
slideDown([speed], [easing], [callback])：向下滑动展开元素slideUp([speed], [easing], [callback])：向上滑动收起元素slideToggle([speed], [easing], [callback])：切换滑动状态$(function(){
$("#menuTitle").click(function(){
// 切换子菜单滑动状态
$("#menu li:gt(0)").slideToggle(300);
});
});
通过改变元素的 opacity 属性实现'淡入''淡出'效果，适合用于图片轮播、提示框渐变等场景。
fadeIn([speed], [easing], [callback])：淡入显示元素（从透明到不透明）fadeOut([speed], [easing], [callback])：淡出隐藏元素（从不透明到透明）fadeToggle([speed], [easing], [callback])：切换淡入淡出状态fadeTo([speed], opacity, [easing], [callback])：将元素淡入/淡出到指定透明度（opacity 为 0-1 的数值，元素不会隐藏）$(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% 透明
});
});
基础预设动画无法满足复杂需求时，可使用 animate() 方法实现自定义动画，支持任意 CSS 属性的渐变过渡（需是可计算的数值类型属性，如 width、left、fontSize 等，color 等属性需额外引入 jQuery Color 插件）。
$(选择器).animate(styles,[speed],[easing],[callback]);
参数说明：
styles（必选）：对象类型，包含要动画的 CSS 属性和目标值（如{left: '300px', top: '200px'}）speed（可选）：动画持续时间，同基础动画easing（可选）：动画运动曲线，同基础动画callback（可选）：动画完成后的回调函数实现元素移动、缩放、改变背景色的组合动画（背景色动画需引入 jQuery Color 插件）：
$(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);
});
});
});
实际开发中可能需要暂停动画、延迟执行动画，jQuery 提供了 stop()（停止动画）和 delay()（延迟动画）方法，解决动画排队、执行时机控制问题。
用于停止当前正在执行的动画，语法：$(选择器).stop([clearQueue], [jumpToEnd])
参数说明：
clearQueue（可选，布尔值）：是否清除未执行的动画队列，默认 false（不清除，后续动画继续执行）jumpToEnd（可选，布尔值）：是否让当前动画直接跳转到目标状态，默认 false（停在当前位置）$(function(){
const $box = $("#box");
$("#startBtn").click(function(){
// 连续触发时，会形成动画队列
$box.slideDown(1000).slideUp(1000);
});
$("#stopBtn").click(function(){
// 停止当前动画，清除未执行的队列，跳转到最终状态
$box.stop(true,true);
});
});
用于延迟执行后续动画，语法：$(选择器).delay(duration, [queueName])
参数说明：
duration（必选）：延迟时间，单位毫秒queueName（可选）：动画队列名称，默认"fx"（jQuery 默认动画队列）$(function(){
$("#delayBtn").click(function(){
$("#box").fadeOut(500).delay(1000).fadeIn(500); // 1 秒后淡入
});
});
动画注意事项：1. 动画属性需是数值类型（如 width、opacity），非数值属性（如 display、backgroundColor）需特殊处理（如 backgroundColor 需 Color 插件）；2. 连续触发动画可能导致队列堆积，建议使用 stop(true, true) 清除队列；3. 动画执行时会影响元素性能，避免同时执行大量复杂动画。
AJAX（Asynchronous JavaScript and XML，异步 JavaScript 和 XML）是前端与后端进行数据交互的核心技术，能实现页面无刷新更新数据，提升用户体验。jQuery 封装了原生 AJAX 的复杂逻辑，提供了简洁的 API，支持 GET、POST 等请求方式，同时解决了浏览器兼容性问题。
jQuery 的 AJAX 相关方法分为两类：「简化方法」（如 load()、$.get()、$.post()）和「通用方法」（$.ajax()）。简化方法适用于简单场景，通用方法功能更强大，支持自定义请求头、超时设置等复杂需求。
load() 方法是最简洁的 AJAX 方法，直接将远程服务器返回的 HTML 内容插入到指定元素中，语法：$(选择器).load(url, [data], [callback])
参数说明：
url（必选）：请求的服务器接口地址data（可选）：发送给服务器的参数，可传入对象（{key: value}）或字符串（'key1=value1&key2=value2'）；传入对象时为 POST 请求，传入字符串或不传入时为 GET 请求callback（可选）：请求完成后的回调函数，接收三个参数：responseText（服务器返回内容）、statusText（请求状态）、xhr（XMLHttpRequest 对象）$(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);
}
});
});
});
专门用于发送 GET 请求，获取服务器返回的数据（通常为 JSON、XML 或文本），语法：$.get(url, [data], [callback], [dataType])
参数说明：
url（必选）：请求接口地址data（可选）：发送的请求参数，对象或字符串形式callback（可选）：请求成功后的回调函数，参数为：data（服务器返回数据，已根据 dataType 解析）、statusText（请求状态）、xhr（XMLHttpRequest 对象）dataType（可选）：预期的服务器返回数据类型，可选值：'json'、'xml'、'text'、'html'，默认自动判断$(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
});
});
专门用于发送 POST 请求，向服务器提交数据（如表单提交、新增数据等），语法与 $.get() 完全一致：.post(url, [data], [callback], [dataType])
核心区别：$.get() 将参数拼接在 URL 后（可见，不安全），适合获取数据；$.post() 将参数放在请求体中（不可见，相对安全），适合提交敏感数据（如密码）。
$(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;
};
});
$.ajax() 是 jQuery 最核心的 AJAX 方法，功能全面，支持自定义请求方式、请求头、超时时间、错误处理等所有 AJAX 特性，适用于复杂的数据交互场景。语法：.ajax(options)，其中 options 是配置对象，包含所有请求参数。
| 配置参数 | 功能描述 | 可选值/示例 |
|---|---|---|
| url | 请求接口地址（必选） | '/api/users'、'https://api.example.com/data' |
| type/method | 请求方式（可选，默认 GET） | 'GET'、'POST'、'PUT'、'DELETE' |
| data | 发送给服务器的参数（可选） | 对象：{id:1, name:"test"}；字符串：'id=1&name=test' |
| dataType | 预期返回数据类型（可选） | 'json'、'xml'、'text'、'html' |
| contentType | 请求体内容类型（可选，默认 application/x-www-form-urlencoded） | 提交 JSON 时：'application/json' |
| timeout | 请求超时时间（可选，单位毫秒） | 3000（3 秒超时） |
| headers | 自定义请求头（可选） | {'Authorization': 'Bearer token'} |
| success | 请求成功后的回调函数（可选） | function(data, status, xhr){}（data 为解析后的数据） |
| error | 请求失败后的回调函数（可选） | function(xhr, status, error){}（error 为错误信息） |
| complete | 请求完成后的回调函数（无论成功/失败，可选） | function(xhr, status){}（常用于关闭加载动画） |
$(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("请求完成");
}
}
});
});
});
提交表单时，需将表单元素的值转为请求参数，jQuery 提供了两个序列化方法：
serialize()：将表单数据转为字符串形式（key1=value1&key2=value2），适合直接作为 data 参数传递serializeArray()：将表单数据转为数组形式（[{name:"key1", value:"value1"}, …]），适合进一步处理为对象$(function(){
$("#serializeBtn").click(function(){
const $form = $("#form");
// 1. serialize()：转为字符串
const strData = $form.serialize();
console.log("serialize 字符串：", strData);
// 2. serializeArray()：转为数组
const arrData = $form.serializeArray();
console.log("serializeArray 数组：", arrData);
// 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);
});
});
AJAX 注意事项：1. 跨域问题：默认情况下，AJAX 不允许跨域请求（不同域名、端口、协议），需后端配置 CORS（跨域资源共享）或使用 JSONP 方案；2. 数据格式：提交 JSON 数据时，需将数据转为字符串（JSON.stringify()）并指定 contentType: 'application/json'；3. 错误处理：必须添加 error 回调，处理超时、网络异常、服务器错误等场景；4. 安全性：避免在 GET 请求中传递敏感数据（如密码），建议使用 POST 请求并配合 HTTPS 协议。
jQuery 除了操作 DOM 和事件的实例方法外，还提供了一系列静态工具方法（无需获取 DOM 元素，直接通过 $. 调用），用于处理数据、数组、对象等，简化通用业务逻辑。常用工具方法如下：
用于遍历数组或对象，替代原生的 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}`);
});
// 2. 遍历对象
const obj = { name: "张三", age: 20, gender: "男" };
$.each(obj, function(key, value) {
console.log(`对象属性${key}：${value}`);
});
// 3. 遍历 DOM 元素集合（也可使用实例方法 each()）
$("li").each(function(index, domEle) {
$(domEle).text(`列表项${index + 1}`);
});
用于对数组元素进行处理并返回新数组，语法：$.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);
// 过滤掉小于 3 的元素（返回 null/undefined 则不加入新数组）
const filterArr = $.map(arr, function(value) {
return value > 3 ? value : null;
});
console.log(filterArr);
用于精准判断数据类型，比原生 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
用于去除字符串首尾的空白字符（空格、制表符、换行符等），语法：$.trim(字符串)
const str = " Hello jQuery ";
const trimStr = $.trim(str);
console.log(trimStr);
console.log(trimStr.length);
用于合并多个对象的属性，将后续对象的属性合并到第一个对象中，语法：$.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);
// 2. 深拷贝（处理嵌套对象）
const target2 = { a: 1, b: { b1: 10 } };
const source3 = { b: { b2: 20 }, c: 3 };
$.extend(true, target2, source3);
console.log(target2);
jQuery 的强大之处在于其丰富的插件生态，同时也支持自定义插件扩展功能。插件开发核心是通过扩展 $.fn（实例方法插件）或 $（静态工具插件）实现，以下介绍最常用的实例方法插件开发。
jQuery 实例对象（如 $("div")）的方法都挂载在 $.fn 对象上，自定义插件本质是向 $.fn 添加新方法，让所有 jQuery 实例都能调用。开发时需注意：
this 获取当前 jQuery 实例，支持链式调用（最后返回 this）；开发一个 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");
});
自定义插件开发完成后，可像 jQuery 内置方法一样调用，支持多元素批量处理和链式调用。若需扩展插件功能，可在原有插件基础上添加子方法，或通过 $.extend() 扩展配置。
插件开发注意事项：1. 插件命名规范：避免与 jQuery 内置方法或其他常用插件重名，建议添加前缀（如 myHighlight）；2. 兼容性：若需兼容低版本 jQuery，需注意 API 差异（如 jQuery 3.x 移除的方法）；3. 调试：开发时可通过 console.log(this) 查看当前 jQuery 实例，确保方法作用域正确。
jQuery 是前端发展史上的重要里程碑，其核心价值在于'简化 DOM 操作、解决浏览器兼容、提供便捷的交互能力'。本教程从基础语法、DOM 操作、事件处理、动画效果、AJAX 数据交互、工具方法、插件开发等方面，系统讲解了 jQuery 的核心知识点，适合前端初学者入门学习。
学习 jQuery 时，需重点掌握'选择器''链式调用''事件委托''AJAX'等核心概念，同时理解其与原生 JS 的区别与联系。在实际开发中，应根据项目规模和需求选择合适的技术：小型项目可高效使用 jQuery；大型复杂项目则推荐现代前端框架，必要时可引入 jQuery 辅助处理少量 DOM 交互。
最后，建议在掌握 jQuery 的基础上，进一步学习原生 JS 的高级特性（如闭包、原型、异步编程）和现代前端框架，提升自身技术广度和深度。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online