目录
- jQuery 是什么？
- 为什么选择 jQuery？
- jQuery 的核心优势
- 开发环境搭建
- 核心概念与语法
- 选择器
- 事件处理
- DOM 操作
- AJAX
- 一个完整的 jQuery 网站开发示例
- 最佳实践与性能优化
- jQuery vs. 现代框架 (React, Vue, Angular)
- 总结与学习资源
jQuery 是什么？
jQuery 是一个快速、小型且功能丰富的 JavaScript 库，它通过封装复杂的原生 JavaScript 代码，提供了一套简洁、统一的 API（应用程序编程接口），让开发者能更轻松地实现网页的交互效果、动态内容和异步通信。
（图片来源网络，侵删）
它的核心理念是 “Write Less, Do More” (写得更少，做得更多)。
为什么选择 jQuery？
- 跨浏览器兼容性：这是 jQuery 最大的历史功绩，在早期，不同浏览器（尤其是 IE 和 Firefox）对 JavaScript 的实现存在巨大差异，jQuery 帮你处理了这些兼容性问题，你只需写一套代码，就能在所有主流浏览器上运行。
- 简洁的语法：相比于原生 JS，jQuery 的语法更直观、更易读，用一行代码就能选中所有段落并改变颜色：
$("p").css("color", "red");。 - 强大的选择器：jQuery 提供了类似 CSS 的强大选择器，可以轻松、精确地找到页面上的任何元素。
- 丰富的插件生态：全球有大量成熟的 jQuery 插件，你可以轻松实现轮播图、弹窗、表单验证等复杂功能，而无需从零开始编写。
- 链式操作：jQuery 对象的方法可以连续调用，使得代码更加紧凑和优雅。
jQuery 的核心优势
| 特性 | 描述 |
|---|---|
| 选择器 (Selectors) | 使用 CSS 语法或 XPath 语法来查找/选取 HTML 元素。$("#myId"), $(".myClass"), $("div p")。 |
| 事件处理 (Events) | 轻松地为元素绑定事件，如点击 (click)、鼠标悬停 (hover)、表单提交 (submit) 等。 |
| DOM 操作 (Manipulation) | 方便地创建、删除、修改、移动或复制页面上的 HTML 元素和内容。 |
| AJAX (Asynchronous JavaScript) | 简化与服务器进行异步数据交换的过程，实现无刷新更新页面内容。 |
| 动画 (Animations) | 提供了如淡入淡出 (fadeIn/fadeOut)、滑动 (slideUp/slideDown) 等简单易用的动画效果。 |
| 工具方法 (Utilities) | 包含一些通用的辅助方法，如遍历数组 ($.each)、测试数据类型 ($.isArray) 等。 |
开发环境搭建
这是最基础的一步,非常简单。
直接引入 (最简单，适合学习和测试)
在 HTML 文件的 <head> 标签内，通过 CDN (内容分发网络) 引入 jQuery，推荐使用 jQuery 官方或 Google、Microsoft 的 CDN，它们速度快且稳定。
（图片来源网络，侵删）
<!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>这是一个段落。</p>
<!-- 你的 jQuery 代码可以放在这里，或者放在单独的 .js 文件中 -->
<script>
// 在这里写你的 jQuery 代码
$(document).ready(function() {
alert("jQuery 已成功加载！");
});
</script>
</body>
</html>
使用构建工具 (适合专业开发)
在现代前端开发中,通常会使用 Webpack, Vite, Gulp 等构建工具，你可以通过 npm 或 yarn 来管理 jQuery 依赖。
# 在你的项目中安装 jQuery npm install jquery # 然后在你的 JavaScript 文件中引入 import $ from 'jquery';
核心概念与语法
a. 入口函数：$(document).ready()
为了确保在 DOM 文档完全加载并解析后才执行你的 jQuery 代码，需要将代码包裹在 $(document).ready() 函数中，这是最安全的做法。
// 写法一 (推荐)
$(document).ready(function() {
console.log("DOM 已加载完毕，可以开始操作了！");
});
// 写法二 (更简洁的写法)
$(function() {
console.log("DOM 已加载完毕，可以开始操作了！");
});
b. 选择器
这是 jQuery 的基石。
（图片来源网络，侵删）
// ID 选择器
$("#myButton")
// 类选择器
$(".active-item")
// 元素选择器
$("p")
// 组合选择器
$("div.content ul li a")
// 属性选择器
$("input[type='text']")
c. 事件处理
// 为 id 为 "myButton" 的按钮绑定点击事件
$("#myButton").on("click", function() {
alert("按钮被点击了！");
});
// 或者使用简化的 click 方法
$("#myButton").click(function() {
alert("按钮被点击了！");
});
// hover 事件（鼠标悬停和离开）
$("p").hover(
function() { $(this).css("background-color", "yellow"); }, // 鼠标进入
function() { $(this).css("background-color", "white"); } // 鼠标离开
);
d. DOM 操作
// 1. 获取和修改内容
// .html() 获取或设置 HTML 内容
$("#myDiv").html("<strong>新的 HTML 内容</strong>");
// .text() 获取或设置纯文本内容
$("#myDiv").text("这是纯文本");
// 2. 获取和修改属性
// .attr() 获取或设置属性
$("a").attr("href", "https://www.example.com");
// .val() 获取或设置表单元素的值
$("#username").val("默认用户名");
// 3. 添加、删除和复制元素
// 添加元素
$("ul").append("<li>新项目</li>"); // 在内部末尾添加
$("ul").prepend("<li>新项目</li>"); // 在内部开头添加
// 删除元素
$(".remove-me").remove(); // 完全移除元素
$(".empty-me").empty(); // 清空元素内容
// 4. CSS 操作
// .addClass() / .removeClass() / .toggleClass()
$("p").toggleClass("highlight");
e. AJAX
jQuery 的 AJAX 功能极大地简化了与后端的数据交互。
// $.get() 方法 - 发送 GET 请求
$.get("https://api.example.com/data", { id: 123 }, function(response) {
console.log("GET 请求成功:", response);
// 将返回的数据显示在页面上
$("#result").html(response.name);
});
// $.post() 方法 - 发送 POST 请求
$.post("https://api.example.com/submit", { username: "john", password: "secret" }, function(response) {
console.log("POST 请求成功:", response);
});
// $.ajax() 方法 - 更灵活、更强大的 AJAX
$.ajax({
url: "https://api.example.com/data",
method: "GET", // 或 "POST"
data: { id: 123 },
dataType: "json", // 预期服务器返回的数据类型
success: function(response) {
console.log("请求成功:", response);
},
error: function(xhr, status, error) {
console.error("请求失败:", error);
},
complete: function() {
console.log("请求已完成（无论成功或失败）");
}
});
一个完整的 jQuery 网站开发示例
我们来创建一个简单的待办事项列表应用。
HTML (index.html)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">jQuery 待办事项</title>
<style>
body { font-family: sans-serif; max-width: 600px; margin: 20px auto; }
#todo-list { list-style: none; padding: 0; }
#todo-list li { padding: 10px; border-bottom: 1px solid #ccc; }
.completed { text-decoration: line-through; color: #888; }
#new-todo { width: 70%; padding: 8px; }
#add-btn { padding: 8px 15px; }
</style>
<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- 引入我们自己的 JS 文件 -->
<script src="app.js"></script>
</head>
<body>
<h1>我的待办事项</h1>
<div>
<input type="text" id="new-todo" placeholder="添加一个新任务...">
<button id="add-btn">添加</button>
</div>
<ul id="todo-list">
<li>学习 jQuery <span class="delete">[删除]</span></li>
<li>构建网站 <span class="delete">[删除]</span></li>
</ul>
</body>
</html>
JavaScript (app.js)
$(document).ready(function() {
// 添加新任务
$("#add-btn").on("click", addTodo);
$("#new-todo").on("keypress", function(e) {
// 如果按下的是回车键 (keyCode 13)
if (e.which === 13) {
addTodo();
}
});
// 为所有现有的和未来的 .delete 元素绑定点击事件 (使用事件委托)
$("#todo-list").on("click", ".delete", function() {
// $(this) 指向被点击的 .delete 元素
// .parent() 指向它的父元素 <li>
$(this).parent().fadeOut(300, function() {
// 在动画结束后移除元素
$(this).remove();
});
});
// 为所有现有的和未来的 <li> 元素绑定点击事件 (切换完成状态)
$("#todo-list").on("click", "li", function() {
$(this).toggleClass("completed");
});
function addTodo() {
const todoText = $("#new-todo").val().trim();
if (todoText !== "") {
// 创建一个新的 li 元素
const newTodo = `<li>${todoText} <span class="delete">[删除]</span></li>`;
// 添加到列表顶部
$("#todo-list").prepend(newTodo);
// 清空输入框
$("#new-todo").val("");
}
}
});
代码解析:
- 我们将所有逻辑放在
$(document).ready()中。 - 为“添加”按钮和输入框绑定事件。
- 事件委托：
$("#todo-list").on("click", ".delete", ...)是一个非常重要的技巧，即使我们动态添加了新的待办事项（它们没有.delete元素），这个事件处理程序依然能工作，因为它将事件监听器绑定在父容器#todo-list上，然后根据选择器.delete来判断哪个子元素被点击了。 - 使用
toggleClass来优雅地切换元素的类名，从而改变样式。 - 使用
prepend将新任务添加到列表顶部，而不是append（底部）。
最佳实践与性能优化
-
缓存 jQuery 对象：避免重复选择同一个元素。
// 不推荐 (每次都要查找) $("#myDiv").css("color", "red"); $("#myDiv").css("background", "blue"); // 推荐 (缓存对象) var $myDiv = $("#myDiv"); $myDiv.css("color", "red"); $myDiv.css("background", "blue"); -
使用事件委托：对于动态添加的元素或大量元素的相同事件，使用事件委托（如上例所示）可以显著提高性能。
-
链式调用：利用 jQuery 的链式特性，减少代码量。
$("#myDiv").css("color", "red").slideUp(200).slideDown(200); -
使用
id选择器：$("#myId")是最快的选择器，因为它直接映射到原生的document.getElementById()。 -
避免全局变量：将你的代码封装在一个立即执行函数表达式 中，避免污染全局命名空间。
(function($) { // 在这里使用 $，即使在其他库中 $ 被占用了 $(document).ready(function() { ... }); })(jQuery);
jQuery vs. 现代框架
| 特性 | jQuery | React / Vue / Angular |
|---|---|---|
| 定位 | 库：专注于 DOM 操作和事件处理。 | 框架：提供构建整个应用程序的完整解决方案。 |
| 数据绑定 | 手动操作 DOM，需要开发者明确告诉代码“如何”更新视图。 | 数据驱动：开发者只需关注数据状态的变化，框架会自动更新视图。 |
| 组件化 | 需要自己手动实现或通过插件/约定来管理组件。 | 原生支持：组件是核心概念，代码复用性强。 |
| 学习曲线 | 非常平缓，容易上手。 | 较陡峭，需要理解虚拟 DOM、状态管理等概念。 |
| 适用场景 | - 旧项目维护 - 简单的交互效果 - 快速原型开发 - 需要兼容 IE6/7/8 的项目 |
- 大型单页应用 - 复杂的用户界面 - 团队协作开发 - 长期维护的项目 |
对于新的大型项目,现代框架通常是更好的选择，但对于小型项目、维护旧系统或添加一些简单的交互效果，jQuery 依然是快速、有效的工具。
总结与学习资源
jQuery 是前端开发历史上一个里程碑式的工具，它极大地降低了 JavaScript 的使用门槛，推动了 Web 交互的普及，虽然现在的主流是现代框架，但理解 jQuery 的工作原理和思想对于成为一名全面的前端开发者依然非常有价值。
学习资源：
- 官方文档：https://api.jquery.com/ (最权威、最全面)
- jQuery 教程：https://www.w3school.com.cn/jquery/ (适合初学者)
- 菜鸟教程 jQuery：https://www.runoob.com/jquery/jquery-tutorial.html
希望这份指南能帮助你顺利开始 jQuery 网站开发之旅！
