Appearance
第1章：jQuery 入门认知
1.1 什么是jQuery？（通俗定义：简化原生JavaScript的前端库，写得少、做得多）
jQuery是一个快速、简洁的JavaScript库，它的设计宗旨是"写得少，做得多"（Write Less, Do More）。它封装了复杂的原生JavaScript代码，提供了简洁的API，使开发者能够更轻松地操作DOM、处理事件、执行动画和发起AJAX请求。
核心特点：
- 简化DOM操作：使用简洁的选择器语法快速定位和操作DOM元素
- 跨浏览器兼容：自动处理不同浏览器的兼容性问题
- 链式调用：支持方法链式调用，使代码更简洁
- 丰富的插件生态：拥有大量第三方插件，扩展功能
1.2 为什么要学jQuery？（核心优势：简化DOM操作、兼容多浏览器、代码简洁高效）
核心优势：
- 简化开发：相比原生JavaScript，jQuery代码更简洁易读
- 跨浏览器兼容：解决了不同浏览器的兼容性问题，无需编写浏览器特定代码
- 丰富的API：提供了大量实用的方法，涵盖DOM操作、事件处理、动画效果等
- 强大的选择器：基于CSS选择器，快速定位DOM元素
- 链式调用：支持方法链式调用，减少代码量
- 丰富的插件：拥有大量第三方插件，扩展功能
适用场景：
- 快速开发小型项目或原型
- 处理简单的前端交互
- 维护 legacy 项目
- 后端开发者快速实现前端功能
1.3 jQuery 与原生JavaScript的区别（语法差异、开发效率、适用场景）
| 特性 | jQuery | 原生JavaScript |
|---|---|---|
| 语法 | 简洁，链式调用 | 相对繁琐，需要更多代码 |
| 跨浏览器兼容 | 自动处理 | 需要手动处理兼容性问题 |
| DOM选择 | $('#id') | document.getElementById('id') |
| 事件绑定 | $('#id').click() | element.addEventListener('click', function(){}) |
| 动画效果 | 内置多种动画方法 | 需要手动实现或使用CSS动画 |
| AJAX请求 | 简化的API | XMLHttpRequest 或 fetch API |
| 代码量 | 更少 | 更多 |
| 学习曲线 | 较平缓 | 较陡峭 |
1.4 jQuery 的版本选择（1.x、2.x、3.x 区别，新手推荐3.x稳定版）
版本区别：
- 1.x：支持IE6/7/8等旧浏览器，体积较大
- 2.x：放弃对IE6/7/8的支持，体积更小，性能更好
- 3.x：继续放弃对旧浏览器的支持，提供现代化的API，性能进一步优化
版本选择建议：
- 如果需要支持IE6/7/8，选择1.x版本
- 如果不需要支持旧浏览器，选择3.x版本（推荐）
- 3.x版本是目前的稳定版，提供了更好的性能和现代化的特性
1.5 学习前提：原生JavaScript基础回顾（DOM基础、函数、事件，核心必备）
必备基础：
- HTML基础：了解HTML结构和标签
- CSS基础：了解CSS选择器和样式
- JavaScript基础：
- 变量和数据类型
- 函数和作用域
- 条件语句和循环
- DOM基础操作（获取元素、修改内容）
- 事件处理基础
快速回顾：
javascript
// 原生JavaScript获取元素
const element = document.getElementById('id');
const elements = document.getElementsByClassName('class');
// 原生JavaScript事件绑定
element.addEventListener('click', function() {
// 事件处理逻辑
});
// 原生JavaScript修改元素内容
element.innerHTML = '新内容';
element.textContent = '新文本';1.6 学习路线规划（明确新手重点，避免走弯路，衔接原生JS知识）
学习路线：
- 基础认知：了解jQuery的核心概念和优势
- 环境搭建：掌握jQuery的引入方式
- 核心语法：学习选择器和基本语法
- DOM操作：掌握元素的内容、属性和样式操作
- 事件处理：学习事件绑定和处理
- 动画效果：掌握基础动画和自定义动画
- AJAX请求：学习前后端交互
- 实战项目：通过项目巩固所学知识
- 进阶提升：学习插件使用和自定义插件
1.7 第一个jQuery程序（极简实操，实现页面元素操作，快速体验优势）
步骤1：引入jQuery
html
<!-- 通过CDN引入jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>步骤2：编写HTML结构
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一个jQuery程序</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1 id="title">Hello, jQuery!</h1>
<p class="content">这是一个段落。</p>
<button id="changeBtn">点击修改内容</button>
<script>
// jQuery入口函数
$(document).ready(function() {
// 给按钮绑定点击事件
$('#changeBtn').click(function() {
// 修改标题内容
$('#title').text('jQuery真强大！');
// 修改段落样式
$('.content').css('color', 'red').css('font-size', '18px');
});
});
</script>
</body>
</html>步骤3：运行效果
- 打开HTML文件
- 点击"点击修改内容"按钮
- 观察标题内容和段落样式的变化
代码解析：
$(document).ready()：jQuery入口函数，确保DOM加载完成后执行代码$('#changeBtn')：使用ID选择器选中按钮元素.click()：绑定点击事件$('#title').text()：修改标题文本内容$('.content').css()：修改段落样式，支持链式调用
对比原生JavaScript实现：
javascript
// 原生JavaScript实现
document.addEventListener('DOMContentLoaded', function() {
const changeBtn = document.getElementById('changeBtn');
const title = document.getElementById('title');
const content = document.querySelector('.content');
changeBtn.addEventListener('click', function() {
title.textContent = 'jQuery真强大！';
content.style.color = 'red';
content.style.fontSize = '18px';
});
});通过对比可以看出，jQuery代码更加简洁易读，尤其是在处理复杂操作时优势更加明显。