Forest Hu1. jQuery 语法详解：从入门到实战
jQuery作为前端开发中最经典的JavaScript库之一，至今仍在大量项目中发挥着重要作用。它用简洁的语法封装了复杂的DOM操作，让开发者可以用更少的代码完成更多功能。我使用jQuery开发已有8年时间，从早期的PC端网页到现在的移动端适配，这套语法体系始终保持着惊人的稳定性。
1.1 为什么选择jQuery
在三大框架盛行的今天，仍然有许多场景需要jQuery：
- 老项目维护（特别是2015年前的项目）
- 需要快速开发的小型页面
- 对浏览器兼容性要求高的场景（jQuery 1.x版本支持到IE6）
- 与其他库的兼容性需求
实际案例：去年接手一个政府项目，要求支持IE8且两周内上线。使用jQuery+vue的组合方案，用jQuery处理DOM操作和兼容性问题，vue负责数据绑定，最终按期交付。
1.2 环境准备与基础语法
1.2.1 引入方式
推荐使用CDN引入（国内建议使用BootCDN）：
html复制<!-- 生产环境 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- 开发环境 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
版本选择建议：
- 需要兼容IE6-8：使用1.x版本
- 现代项目：使用3.x版本
- 迁移中的项目：使用迁移插件（jquery-migrate）
1.2.2 基础语法结构
jQuery的核心是$()函数，它有四种主要用法：
- 选择元素：
$("selector") - 创建元素：
$("<div>") - DOM就绪回调：
$(function(){}) - 包装DOM对象：
$(document)
2. 选择器深度解析
2.1 基础选择器对比
| 选择器类型 | 示例 | 等效DOM方法 | 性能对比 |
|---|---|---|---|
| ID选择器 | $("#main") |
document.getElementById() |
最快 |
| 类选择器 | $(".item") |
document.getElementsByClassName() |
中等 |
| 标签选择器 | $("div") |
document.getElementsByTagName() |
中等 |
| 属性选择器 | $("[name='test']") |
需循环判断 | 较慢 |
性能提示：ID选择器速度最快，复杂选择器会显著降低性能。在循环中应缓存选择结果。
2.2 进阶选择技巧
组合选择：
javascript复制// 同时选择多个元素