下面是一篇系统且通俗易懂的前端速通文章，标题为：

【前端】-jQuery：带你深入了解、学习与使用 jQuery

🧭 导航目录

  1. jQuery 是什么？为何曾经风靡全球？
  2. 如何引入 jQuery（CDN、本地）
  3. jQuery 的核心语法：选择器 + 链式编程
  4. DOM 操作、事件绑定、动画处理
  5. Ajax 快速入门：一步搞定前后端通信
  6. jQuery 插件机制与常用插件
  7. jQuery 与原生 JS 的对比
  8. jQuery 在现代开发中的定位

1️⃣ jQuery 是什么？

jQuery 是一个轻量级的 JavaScript 库，诞生于 2006 年，目标是：“Write less, do more.”（写更少的代码，做更多的事）

它解决了以下几个前端痛点：

  • 浏览器兼容性（IE6~现代浏览器）
  • DOM 操作简化
  • Ajax 调用封装
  • 动画与 UI 效果快速开发
  • 事件绑定更简洁

🔔 曾经几乎所有网站都用 jQuery，如新浪、淘宝、网易、人人网等。

2️⃣ 如何引入 jQuery

✅ 方法一：CDN 引入（推荐）

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

✅ 方法二：本地引入

  1. 去官网 https://jquery.com 下载 .js 文件；
  2. 将其放入项目目录；
  3. 在 HTML 中引入：
<script src="js/jquery-3.7.1.min.js"></script>

3️⃣ jQuery 核心语法（$ 选择器）

✅ 选择器

$('#id')           // ID 选择器
$('.class')        // 类选择器
$('div')           // 标签选择器
$('ul li:first')   // 结构选择器
$('[type="text"]') // 属性选择器

✅ 链式调用

$('#title')
  .css('color', 'red')
  .slideUp(500)
  .slideDown(500);

4️⃣ 常用功能示例

✅ DOM 操作

$('#title').text('你好 jQuery');
$('input').val('默认值');
$('.box').html('<strong>内容</strong>');

✅ CSS 操作

$('#btn').css('background-color', 'blue');
$('.item').addClass('active');
$('.item').removeClass('hidden');

✅ 事件绑定

$('#submit').click(function() {
  alert('按钮被点击了');
});

$('input').on('keyup', function() {
  console.log($(this).val());
});

✅ 动画效果

$('.box').fadeIn();
$('.box').fadeOut();
$('.menu').slideToggle();

5️⃣ Ajax 快速入门

$.ajax({
  url: '/api/user',
  method: 'GET',
  dataType: 'json',
  success: function(res) {
    console.log('成功返回：', res);
  },
  error: function(err) {
    console.log('请求失败：', err);
  }
});

✅ 简写方式：

$.get('/api/data', function(res) {
  console.log(res);
});

$.post('/login', { username: 'a', password: 'b' }, function(res) {
  alert(res.msg);
});

6️⃣ jQuery 插件机制

jQuery 插件是一种封装逻辑的方式，可以实现组件复用，如轮播图、模态框、日期选择器等。

$.fn.highlight = function() {
  this.css('background-color', 'yellow');
  return this;
};

// 使用
$('p').highlight();

✅ 常见插件示例：

插件名功能
slick.js图片轮播
jquery.validate表单验证
fancybox图片灯箱效果
select2下拉框美化
jQuery UI拖拽、弹窗、滑块等 UI 组件库

7️⃣ jQuery 与原生 JS 对比

功能jQuery原生 JS
获取元素$('#id')document.getElementById()
改变内容.text().innerText
绑定事件.click().addEventListener()
Ajax 请求$.ajax()fetch() / XMLHttpRequest
动画.fadeIn()自写 CSS 或 JS 动画

8️⃣ jQuery 在现代前端中的定位

虽然在 Vue、React、Svelte 等现代框架兴起后，jQuery 的使用频率下降，但它仍然适用于：

  • 老旧项目的维护
  • 快速搭建静态页面
  • 需要极简交互的项目
  • 后台管理系统（很多老系统仍依赖 jQuery）
  • 搭配 Bootstrap 3/4 使用

✅ 学习建议与资源推荐

类型链接
官方文档https://api.jquery.com/
中文教程菜鸟教程 jQuery
插件大全https://jqueryscript.net
源码仓库https://github.com/jquery/jquery

🧠 总结

模块内容
基础选择器、DOM 操作、事件绑定
高级Ajax、动画、插件开发
场景快速开发、老系统维护、小项目原型
替代品React / Vue / Alpine.js / 原生 JS