jQuery 入门：一份献给初学者的完全指南
在前端开发的浪潮中，尽管现代框架（如 React, Vue）层出不穷，但 jQuery 凭借其简洁的语法和强大的兼容性，至今仍在许多项目中扮演着不可或缺的角色。对于初学者而言，掌握 jQuery 是理解 DOM 操作、事件处理和前端交互逻辑的绝佳途径。本篇文章将带你从零开始，一步步揭开 jQuery 的神秘面纱。
第一章：初识 jQuery - “写得更少，做得更多”
1.1 什么是 jQuery？
jQuery 是一个快速、小巧且功能丰富的 JavaScript 库。它的核心理念是 “Write Less, Do More”（写得更少，做得更多）。
-
定义：它是一个兼容多浏览器的 JavaScript 脚本库，极大地简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。
-
核心作用：jQuery 将原生 JavaScript 中繁琐、复杂的 DOM 操作进行了优雅的封装，提供了一套简洁、链式的 API，让开发者能用更少的代码完成同样的功能。
-
诞生背景：在 jQuery 出现之前，开发者需要为不同浏览器（尤其是早期的 IE）编写大量兼容性代码，开发体验非常痛苦。jQuery 的出现，完美解决了这一痛点。
1.2 为什么选择 jQuery？
-
轻量级：核心文件仅几十 KB，对页面加载速度影响极小。
-
跨浏览器兼容：你无需担心 Chrome, Firefox, Edge 甚至老版本 IE 的兼容问题，jQuery 帮你搞定一切。
-
强大的链式编程：可以通过
.连续调用多个方法，代码如行云流水，清晰易读。 -
简化的 DOM 操作：无论是查找元素、修改样式还是添加动画，都变得异常简单。
-
丰富的插件生态：拥有海量的第三方插件，无论是日期选择器、轮播图还是数据表格，几乎总能找到现成的解决方案。
-
免费开源：完全免费，可用于任何个人或商业项目。
1.3 准备工作：下载与引入
在开始之前，我们需要将 jQuery 库引入到我们的 HTML 页面中。
-
下载文件：
访问 jQuery 官网，选择一个版本（推荐未压缩的开发版，便于调试），在新页面右键“另存为”或使用Ctrl + S保存到你的项目文件夹中。 -
在 HTML 中引入：
使用<script>标签引入。强烈推荐将其放置在<body>标签的最底部，这能确保在执行 jQuery 代码前，所有 HTML 元素都已加载完毕，避免操作不存在的元素而出错。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>My First jQuery Page</title>
</head>
<body><h1>Hello, jQuery!</h1><p id="intro">This is a paragraph.</p><!-- 推荐将 jQuery 文件放在 body 底部 --><script src="path/to/your/jquery-3.7.1.js"></script><script>// 你未来的 jQuery 代码将写在这里</script>
</body>
</html>
第二章：核心概念 - jQuery 对象与 DOM 对象
2.1 理解顶级对象 $
美元符号 $ 是 jQuery 的代名词和核心入口。所有 jQuery 的功能都通过这个顶级对象来调用。当你看到 $(...) 时，就意味着你正在使用 jQuery。
2.2 jQuery 对象 vs. 原生 DOM 对象
这是初学者最容易混淆的概念，但至关重要。
-
原生 DOM 对象：通过原生 JavaScript 方法（如
document.getElementById('intro')）获取的对象。它拥有原生 DOM API 的属性和方法，如.innerHTML。 -
jQuery 对象：通过 jQuery 选择器（如
$('#intro')）获取的对象。它是一个特殊的包装集对象 (jQuery Object)，拥有 jQuery 提供的强大方法，如.html(),.css()。
关键区别：它们是两种完全不同的对象，拥有的方法和属性互不通用。你不能在一个原生 DOM 对象上调用 jQuery 方法，反之亦然。
2.3 自由转换：DOM 与 jQuery 的桥梁
幸运的是，我们可以在两者之间轻松转换。
-
原生 DOM 转 jQuery 对象：将原生 DOM 对象用
$( )包裹起来。
// 1. 获取原生 DOM 对象
const domElement = document.getElementById('intro');// 2. 转换为 jQuery 对象
const jQueryElement = $(domElement);// 现在可以调用 jQuery 方法了
jQueryElement.css('color', 'blue');
-
jQuery 对象转原生 DOM 对象：jQuery 对象本质上是一个类数组结构，可以通过索引或
.get()方法获取其中的原生 DOM 对象。
// 1. 获取 jQuery 对象
const jQueryElement = $('#intro');// 2. 转换为原生 DOM 对象（两种方法）
const domElement1 = jQueryElement[0];
const domElement2 = jQueryElement.get(0);// 现在可以调用原生 DOM API 了
console.log(domElement1.innerHTML);
第三章：强大的选择器 - 精准定位你的目标
jQuery 的选择器引擎是其最强大的功能之一。它几乎完全兼容 CSS 选择器语法，让你能够像写 CSS 一样轻松地定位页面元素。
3.1 基础选择器
<div id="container"><p class="content">First paragraph.</p><p class="content featured">Second paragraph.</p><span>A span element.</span>
</div>
// 1. ID 选择器 (#): 选取唯一的元素
$('#container').css('border', '1px solid black');// 2. 类选择器 (.): 选取所有拥有该 class 的元素
$('.content').css('font-style', 'italic');// 3. 标签选择器: 选取所有同类标签
$('p').css('margin', '10px');// 4. 通用选择器 (*): 选取所有元素 (慎用，性能开销大)
// $('*').css('box-sizing', 'border-box'); // 5. 组合选择器 (并集 ,): 同时选取多个选择器匹配的元素
$('p, span').css('font-family', 'Arial, sans-serif');// 6. 组合选择器 (交集): 选取同时满足多个条件的元素
$('p.featured').css('font-weight', 'bold'); // 选取既是 p 标签，又有 featured 类的元素
3.2 层次选择器 - 探索元素间的关系
<ul id="menu"><li>Item 1</li><li class="active">Item 2<ul><li>Subitem 2.1</li></ul></li><li>Item 3</li><li>Item 4</li>
</ul>
// 1. 后代选择器 (空格): 选取内部所有后代
$('#menu li').css('list-style-type', 'square'); // 所有 li 都会变成方块// 2. 子代选择器 (>): 只选取直接子元素
$('#menu > li').css('color', 'green'); // 只有 Item 1,2,3,4 会变绿// 3. 相邻兄弟选择器 (+): 选取紧跟在后面的那一个同级元素
$('.active + li').css('color', 'red'); // Item 3 会变红// 4. 同辈兄弟选择器 (~): 选取后面的所有同级元素
$('.active ~ li').css('text-decoration', 'underline'); // Item 3 和 Item 4 会有下划线
3.3 表单选择器 - 专为表单而生
jQuery 提供了一系列以冒号 : 开头的伪类选择器，用于方便地定位表单元素。
<form><input type="text" name="username"><input type="password" name="password"><input type="checkbox" checked> Agreement<button type="submit">Submit</button>
</form>
// 选取所有 input, textarea, select, button 元素
$(':input').css('margin-bottom', '10px');// 只选取文本输入框
$(':text').val('Default Username');// 只选取密码框
$(':password').attr('placeholder', 'Enter your password');// 选取被选中的复选框或单选按钮
if ($(':checkbox:checked').length > 0) {console.log('Agreement checked!');
}// 选取提交按钮
$(':submit').addClass('btn-primary');
应用场景：表单选择器在进行客户端数据校验时非常有用，可以轻松获取用户输入并进行验证。
第四章：操作 DOM - 成为页面的魔术师
定位到元素后，我们就可以对其进行各种操作了。
4.1 操作属性：.attr() vs. .prop()
-
.attr()：获取或设置 HTML 属性 (attribute)。它关注的是写在 HTML 标签上的字面值。 -
.prop()：获取或设置 DOM 元素的 特性 (property)。它关注的是元素在 JavaScript 中的状态。
核心区别与最佳实践：
对于像 checked, selected, disabled 这种只有 true/false 状态的属性，永远使用 .prop()。因为它返回的是符合逻辑的布尔值。对于其他自定义属性或标准属性，使用 .attr()。
const checkbox = $(':checkbox');// 使用 .prop() 获取状态 (返回 true/false)
console.log('Is checked?', checkbox.prop('checked')); // 使用 .attr() 获取属性值 (可能返回 "checked" 或 undefined)
console.log('Checked attribute:', checkbox.attr('checked'));// 设置属性
$('#username').attr('data-user-id', '123');
checkbox.prop('checked', false); // 取消选中
4.2 操作样式 (CSS)
jQuery 提供了多种方式来动态修改样式。
-
方式一：管理 Class (推荐)
这是最常用且最优雅的方式。通过添加或移除预定义的 CSS 类来改变样式，实现样式与逻辑的分离。
// 添加类
$('#intro').addClass('highlight important');// 移除类
$('#intro').removeClass('important');// 切换类 (有则移除，无则添加)
$('button').on('click', function() {$('#intro').toggleClass('highlight');
});// 判断是否有某个类
if ($('#intro').hasClass('highlight')) {console.log('It is highlighted!');
}
-
方式二：直接操作
style
使用.css()方法可以直接修改内联样式，适合进行微调或设置动态值。
// 设置单个样式
$('#intro').css('font-size', '18px');// 设置多个样式 (传入对象)
$('#intro').css({'background-color': '#f0f0f0','padding': '15px','border-radius': '5px'
});
4.3 操作内容
-
.html()：获取或设置元素的内部 HTML。会解析 HTML 标签。
// 获取内容
const content = $('#container').html();
console.log(content); // 输出包含 p, span 标签的字符串// 设置内容 (会覆盖原有内容)
$('#container').html('<h2>New Title</h2><p>New content.</p>');
-
.text()：获取或设置元素的纯文本。会忽略所有 HTML 标签。
// 获取文本
const text = $('#container').text();
console.log(text); // 输出 "First paragraph.Second paragraph.A span element."// 设置文本 (会覆盖原有内容，并转义 HTML)
$('#container').text('This is just plain text. <h1>This is not a title.</h1>');
-
.val()：专门用于获取或设置表单元素的value值。
// 获取输入框的值
const username = $(':text').val();// 设置输入框的值
$(':text').val('New Username');
结语
恭喜你！通过这篇指南，你已经掌握了 jQuery 的核心基础。从选择元素到操作属性、样式和内容，你现在已经具备了使用 jQuery 为网页添加动态交互的能力。