jQuery 入门：选择器与核心概念 · jQuery 与 Layui 实战

第 1 章 · jQuery 入门：选择器与核心概念

本章目标：理解 jQuery 是什么、为何行业老旧后台仍大量使用；掌握 CDN 与本地引入、$ 与 jQuery 别名、noConflict；熟练运用 CSS 选择器、属性选择器、层级与过滤；区分 $(document).ready 与 DOMContentLoaded；在 admin-demo 后台骨架页写出第一个 jQuery 程序。

学时建议：3～4 小时（含 1 小时跟练）

前置：完成 frontend-web ch01～ch12；能在浏览器开发者工具中查看 DOM；了解 HTML/CSS 基础选择器语法。

1.1 jQuery 是什么、为何老项目仍大量使用

jQuery 是 2006 年发布的 JavaScript 库，核心使命：简化 DOM 操作、事件绑定与 Ajax。在 ES5 时代，各浏览器 DOM API 差异大，jQuery 用统一 API 抹平兼容性问题。

维度	jQuery 1.x 时代	现代浏览器 + ES6+
DOM 兼容性	核心价值	原生 API 已趋同
链式调用	开发效率高	仍可用于 jQuery 代码
Ajax	`$.ajax` 统一封装	Fetch / axios 更主流
包体积	约 30KB gzip	对后台页可接受
生态	海量插件	Layui、Bootstrap 3 等仍依赖

行业常见做法：大量遗留 C 端门户、运营工具页与 Layui 后台仍通过本地静态目录引入 jQuery 1.12.x（如 jquery-1.12.4.min.js）。新功能逐步迁移 Vue 3，但维护存量页面必须掌握 jQuery 与 1.12.x 时代的 API 差异。

admin-demo 是本章贯穿案例：示例电商后台教学页，主色 #e91e8c，侧边栏 + 顶栏 + 内容区布局，后续章节在此页上叠加交互。

技术栈演进（典型电商后台）
  C 端老页 / 静态门户     → jQuery 1.12.x
  经典商户后台           → jQuery + Layui
  新后台 / 运营中台      → Vue 3 + Element Plus（并行存在）

1.2 引入方式：CDN vs 本地

1.2.1 CDN 引入（教学 / 原型）

<!-- 放在 </body> 前，避免阻塞渲染 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="js/admin-demo.js"></script>

方式	优点	缺点
CDN	零配置、可能命中浏览器缓存	内网 / 离线不可用
本地 `/static/js/`	与线上一致、可控版本	需自行更新

1.2.2 教学项目本地引入（推荐跟练方式）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>admin-demo · 电商后台</title>
  <link rel="stylesheet" href="css/admin-demo.css">
</head>
<body>
  <div id="app" class="admin-layout">
    <aside class="sidebar">
      <div class="sidebar__brand">admin-demo</div>
      <ul class="sidebar__menu">
        <li class="is-active" data-page="dashboard">仪表盘</li>
        <li data-page="products">商品管理</li>
        <li data-page="orders">订单管理</li>
      </ul>
    </aside>
    <main class="main">
      <header class="topbar">
        <h1 id="page-title">仪表盘</h1>
        <span class="topbar__user">管理员</span>
      </header>
      <section id="content" class="content">
        <p class="welcome-text">欢迎使用 admin-demo 电商后台。</p>
      </section>
    </main>
  </div>

  <!-- 行业常见：遗留项目多锁定 jQuery 1.12.x -->
  <script src="js/jquery-1.12.4.min.js"></script>
  <script src="js/admin-demo.js"></script>
</body>
</html>

原则：脚本放 </body> 前，保证 DOM 已解析；admin-demo.js 写在 jQuery 之后。

1.3 `$` 与 `jQuery` 别名、`noConflict`

// $ 与 jQuery 完全等价
jQuery('#page-title').text('商品管理');
$('#page-title').text('商品管理');

// 其他库也占用 $ 时（如旧版 Prototype）
var jq = jQuery.noConflict();
jq('#page-title').text('仪表盘');

// 恢复 $ 给其他库，同时保留 jQuery 引用
jQuery.noConflict(true); // 彻底释放全局 jQuery

写法	场景
`$(selector)`	单库环境，日常开发
`jQuery(selector)`	与 `$` 混用、代码审查要求显式命名
`noConflict()`	页面同时加载多个 `$` 库

常见错误：在 noConflict() 之后仍写 $()，报 $ is not a function。

1.4 选择器大全

jQuery 选择器与 CSS 选择器语法一致，并扩展了部分伪类。

1.4.1 基础选择器

$('#app');              // ID（页面内应唯一）
$('.sidebar__menu li'); // 类 + 后代
$('div.content');       // 标签 + 类
$('*');                 // 所有元素（慎用）

1.4.2 属性选择器

$('[data-page]');                    // 有 data-page 属性
$('[data-page="products"]');         // 精确匹配
$('[data-page^="prod"]');            // 以 prod 开头
$('input[type="text"]');              // 表单属性

1.4.3 层级选择器

$('.sidebar > ul');       // 子元素
$('.main .content p');    // 后代
$('h1 + span');           // 相邻兄弟
$('li ~ li');             // 后续兄弟

1.4.4 过滤选择器

$('.sidebar__menu li:first');
$('.sidebar__menu li:last');
$('.sidebar__menu li:eq(1)');      // 索引从 0 开始
$('.sidebar__menu li:even');
$('.sidebar__menu li:odd');
$('.sidebar__menu li:not(.is-active)');

选择器类型	示例	admin-demo 用途
ID	`#content`	主内容区
类	`.is-active`	当前菜单高亮
属性	`[data-page]`	侧边栏路由标识
过滤	`:first`、`:not()`	默认选中第一项

性能提示：优先用 #id、.class；避免 $('*') 和过深层级。

1.5 `$(document).ready` 与 `DOMContentLoaded`

DOM 树构建完成 ≠ 图片等资源加载完成。jQuery 代码应在 DOM 就绪后执行。

// 写法 1：完整形式
$(document).ready(function () {
  console.log('DOM ready');
});

// 写法 2：简写（最常用）
$(function () {
  $('#page-title').text('仪表盘');
});

// 写法 3：原生等价