jQuery 毕设快速开发入门

背景

很多同学觉得 jQuery "过时了"，跳过它直接学 React/Vue。但实际毕设中，大量场景只需要简单的 DOM 操作和 Ajax 请求，jQuery 恰恰是最快出活的选择。学习成本低、复制粘贴就能跑、兼容性好——特别适合时间紧迫的毕设冲刺。

---

核心概念

jQuery 的三句话心法

1. 选择元素，然后操作它：$('.box').addClass('active')
2. 事件驱动：$('#btn').on('click', function() { ... })
3. Ajax 很简单：$.get('/api/data', function(res) { ... })

选择器大全

$('#id')         // ID 选择
$('.class')      // 类选择
$('div')         // 标签选择
$('[name="x"]')   // 属性选择
$('.parent .child')  // 层级
$('li:first')    // 伪类

常用 DOM 操作

// 内容
$('#el').text('hello')          // 文本
$('#el').html('<b>bold</b>')    // HTML
$('#el').val()                   // 表单值

// 样式
$('#el').addClass('active')
$('#el').css('color', 'red')
$('#el').toggle()

// 创建/插入
$('<div>新元素</div>').appendTo('body')
$('#list').append('<li>item</li>')

---

分步操作

第一步：引入 jQuery

最简单方式——CDN：

<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>

第二步：等待 DOM 就绪

$(function() {
  // 所有 DOM 操作写在这里
  console.log('页面加载完毕');
});

第三步：Ajax 请求

// GET
$.get('/api/students', function(data) {
  data.forEach(s => {
    $('#list').append(`<li>${s.name}</li>`);
  });
});

// POST
$.post('/api/students', { name: '张三', major: 'CS' }, function(res) {
  alert('添加成功');
});

第四步：事件绑定

// 直接绑定（对已有元素）
$('#saveBtn').on('click', function() {
  const name = $('#nameInput').val();
  $.post('/api/students', { name: name });
});

// 事件委托（对动态创建的元素）
$('#list').on('click', '.delete-btn', function() {
  $(this).closest('li').remove();
});

---

毕设实战模式

模式一：纯静态 + jQuery 交互

适合纯前端页面、作品展示站。

HTML + CSS + jQuery CDN，零构建工具。

模式二：jQuery + Bootstrap 管理后台

Bootstrap 提供 UI，jQuery 处理表单和表格。

引入 Bootstrap CSS + jQuery + Bootstrap JS。
用 DataTables 插件做表格分页搜索。

模式三：jQuery + 后端 API

前端 jQuery 调后端接口。

$.get('/api/data') → 渲染表格
$.post('/api/form') → 提交表单

---

思考题

1. 事件委托 $(parent).on('click', 'child', fn) 相比直接绑定有什么优势？
2. 为什么 Ajax 请求要在 $(function(){}) 内部执行？
3. jQuery 的链式调用 $el.addClass().fadeIn().text() 是怎么实现的？

---

小结

jQuery 虽老，但实用。当你只需要一个简单的管理后台、一个表单提交页面、一个数据展示面板时，它是最快的方式。学习它只需半天，出活只需一小时。