# jQuery 经典教程系列（一）样式篇：从零基础到高效 DOM 操作
在前端开发的技术演进史上，jQuery 曾占据着无可替代的核心地位。尽管现代原生 JavaScript 已日益强大，但理解 jQuery 依然是许多开发者深入掌握 Web 交互原理的重要阶梯。本套“jQuery 经典教程系列——样式篇”专为初学者及希望巩固基础的前端工程师设计，旨在通过系统化的视频课程，帮助学员从零构建 jQuery 知识体系，特别是聚焦于页面样式与 DOM 元素的高效操控。
课程导览：循序渐进的学习路径
本课程共分为四个核心阶段，逻辑清晰，由浅入深：
**第一阶段：环境搭建与 Hello World**
课程开篇并未急于进入复杂语法，而是用两节内容详细讲解 jQuery 的运行环境配置。从引入 CDN 到本地下载库文件，再到第一个“Hello World”示例，导师手把手演示如何让 jQuery 在你的网页中“跑起来”。这一环节看似简单，却是排除新手常见报错、建立信心的关键一步。
**第二阶段：核心概念——jQuery 对象与 DOM 的区别**
许多初学者混淆原生 JavaScript DOM 操作与 jQuery 操作。本节深入剖析两者差异：原生 DOM 是浏览器提供的对象模型，而 jQuery 则是封装了 DOM 操作的库，返回的是 jQuery 对象。理解这一本质区别，是后续所有操作的前提。
**第三阶段：选择器——jQuery 的灵魂**
选择器是 jQuery 最强大的功能之一。课程依次讲解：
- **ID 选择器**：快速定位唯一元素；
- **类选择器**：批量操作具有相同样式的元素；
- 并预留后续章节涵盖标签选择器、属性选择器、层级选择器等更复杂的用法。
通过大量实例，学员将学会如何精准“选中”目标元素，为样式修改打下坚实基础。
学习价值与建议
本系列特别适合以下人群：
- 刚接触前端、对 jQuery 缺乏整体认知的初学者；
- 熟悉原生 JS 但想提升开发效率、了解业界经典方案的中阶开发者；
- 需要维护老旧 jQuery 项目的运维或后端转型前端人员。
**学习建议**：请务必跟随视频代码亲手实践，切勿仅观看不敲代码。jQuery 的简洁之美在于动手体验，建议在每个选择器讲解后，尝试在浏览器控制台自行测试不同选择器的效果，加深记忆。
虽然时代在变，技术栈不断更新，但 jQuery 所体现的“选择-操作”思想依然深刻影响着现代框架的设计。掌握它，不仅是为了怀旧，更是为了构建更扎实的前端基本功。
课程目录
1-1 [jQuery-样式篇-课程预览] jQuery-样式篇-课程预览 (04:20) 2-1 [jQuery-样式篇-环境搭建及"Hello World!"] jQuery-样式篇-环境搭建 (08:27) 2-2 [jQuery-样式篇-环境搭建及"Hello World!"] jQuery-样式篇-helloWorld (12:46) 3-1 [jQuery-样式篇-jQuery选择器] jQuery-样式篇-jQuery对象与原生DOM (08:42) 3-2 [jQuery-样式篇-jQuery选择器] jQuery-样式篇-jQuery选择器之id选择器 (07:04) 3-3 [jQuery-样式篇-jQuery选择器] jQuery-样式篇-jQuery选择器之类选择器 (08:07) 3-4 [jQuery-样式篇-jQuery选择器] jQuery-样式篇-jQuery选择器之元素选择器 (04:52) 3-5 [jQuery-样式篇-jQuery选择器] jQuery-样式篇-jQuery选择器之全元素选择器 (08:19) 3-6 [jQuery-样式篇-jQuery选择器] jQuery-样式篇-jQuery选择器原理介绍 (13:31) 3-7 [jQuery-样式篇-jQuery选择器] jQuery-样式篇-jQuery对象与原生对象的转换 (10:21) 3-8 [jQuery-样式篇-jQuery选择器] jQuery-样式篇-jQuery选择器之层级选择器 (15:06) 3-9 [jQuery-样式篇-jQuery选择器] jQuery-样式篇-jQuery选择器之筛选选择器（一） (09:35) 3-10 [jQuery-样式篇-jQuery选择器] jQuery-样式篇-jQuery选择器之筛选选择器（二） (05:09) 3-11 [jQuery-样式篇-jQuery选择器] jQuery-样式篇-jQuery选择器之筛选选择器（三） (09:31) 3-12 [jQuery-样式篇-jQuery选择器] jQuery-样式篇-jQuery选择器之筛选选择器（四） (05:16) 3-13 [jQuery-样式篇-jQuery选择器] jQuery-样式篇-jQuery选择器之内容选择器（一） (10:36) 3-14 [jQuery-样式篇-jQuery选择器] jQuery-样式篇-jQuery选择器之内容选择器（二） (05:03) 3-15 [jQuery-样式篇-jQuery选择器] jQuery-样式篇-jQuery选择器之可见性筛选选择器 (07:09) 3-16 [jQuery-样式篇-jQuery选择器] jQuery-样式篇-jQuery选择器之属性选择器（一） (10:09) 3-17 [jQuery-样式篇-jQuery选择器] jQuery-样式篇-jQuery选择器之属性选择器（二） (06:27) 3-18 [jQuery-样式篇-jQuery选择器] jQuery-样式篇-jQuery选择器之属性选择器（三） (08:12) 3-19 [jQuery-样式篇-jQuery选择器] jQuery-样式篇-jQuery选择器之子元素选择器（一） (09:24) 3-20 [jQuery-样式篇-jQuery选择器] jQuery-样式篇-jQuery选择器之子元素选择器（二） (11:41) 3-21 [jQuery-样式篇-jQuery选择器] jQuery-样式篇-jQuery之表单元素选择器（一） (10:08) 3-22 [jQuery-样式篇-jQuery选择器] jQuery-样式篇-jQuery之表单元素选择器（二） (03:16) 3-23 [jQuery-样式篇-jQuery选择器] jQuery-样式篇-jQuery之表单元素选择器（三） (08:34) 3-24 [jQuery-样式篇-jQuery选择器] jQuery-样式篇-jQuery之表单对象属性筛选选择器 (11:15) 3-25 [jQuery-样式篇-jQuery选择器] jQuery-样式篇-jQuery选择器之练习 (02:52) 3-26 [jQuery-样式篇-jQuery选择器] jQuery-样式篇-jQuery选择器之练习案例解析 (11:30) 3-27 [jQuery-样式篇-jQuery选择器] jQuery-样式篇-jQuery选择器之特殊选择器this (07:48) 4-1 [jQuery-样式篇-jQuery对元素的属性操作] jQuery-样式篇-jQuery设置属性及删除属性 (11:58) 5-1 [jQuery-样式篇-jQuery上的内容及类操作] jQuery-样式篇-jQuery的html与text方法 (12:42) 5-2 [jQuery-样式篇-jQuery上的内容及类操作] jQuery-样式篇-jQuery的val方法 (12:24) 5-3 [jQuery-样式篇-jQuery上的内容及类操作] jQuery-样式篇-jQuery的添加类的方法 (08:33) 5-4 [jQuery-样式篇-jQuery上的内容及类操作] jQuery-样式篇-jQuery的删除类的方法 (05:25) 5-5 [jQuery-样式篇-jQuery上的内容及类操作] jQuery-样式篇-jQuery的切换类的方法 (07:47) 6-1 [jQuery-样式篇-jQuery上的样式操作] jQuery-样式篇-jQuery的css方法 (11:13) 7-1 [jQuery-样式篇-jQuery上的元素数据操作] jQuery-样式篇-jQuery的储存删除元素私有数据方法 (07:41) 8-1 [jQuery-样式篇-本篇练习小结及课程总结] jQuery-样式篇-本篇练习小结及课程总结 (11:43)
