11. jQuery 介绍与选择器

jQuery 是一个轻量级的 JS 工具库，口号是 "Write Less, Do More"（写更少代码，做更多事）。它把原生 JS 里那些麻烦的操作——选元素、改样式、绑事件、发请求——全部封装成了简单的方法。以前要写十行的原生代码，jQuery 一行就搞定。

核心函数是一个美元符号 $，你传一个选择器字符串进去（和 CSS 选择器写法一模一样），它就返回一个 jQuery 对象，你可以在上面点点点调各种方法。先记不住没关系，用熟了就知道它有多香。

11.1 互动演示（选择器实时查询）

输入选择器：

项目1
项目2
项目3
项目4

试试：li、.active、#selList li、li:first、li:eq(1)

11.2 知识点讲解

① jQuery 是什么？怎么引入？

jQuery 就是一个别人写好的 JS 文件，你把它引入到你的页面里，就多了一个 $ 可以用。两种引入方式：

// ===== 方式一：CDN 在线引入（推荐学习用） =====
// 不用下载文件，直接用网址引入
// 注意：必须写在你自己的 <script> 前面！
<
script src = "https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js" > < /script>

  // ===== 方式二：本地文件引入 =====
  // 从官网下载 jquery.min.js 放到项目的 js 文件夹里
  <
  script src = "./js/jquery.min.js" > < /script>

// ★ 引入没成功的话，控制台会报 $ is not defined
//  意思是 $ 这个东西不存在 = jQuery 没加载进来
//  排查：看引入路径对不对、CDN 能不能打开

如果你写了 $ 但浏览器报 $ is not defined——因为 jQuery 没加载成功。先检查 script 引入标签有没有写、路径对不对、是不是写在自己代码前面。

② 入口函数：等页面加载完再执行

原生 JS 用 window.onload，但它要等图片、视频等所有资源都加载完才执行，很慢。jQuery 的入口函数只等 DOM 结构渲染完就执行，不等图片——快多了。

// jQuery 入口函数（标准写法）：
$(function () {
  // 页面 DOM 渲染完成了，所有 jQuery 代码都写这里
  // 就像 DOMContentLoaded，但写法更短
});

// 完整等价写法（初学知道就行，平时用上面的简写）：
$(document).ready(function () {
  // ...
});

如果你把 jQuery 代码写在 <head> 里、页面元素还没渲染就执行，就会选不到元素——因为那时候 DOM 还没出来。用 $(function{}) 包起来，就保证等 DOM 好了才执行。

③ 基础选择器（和 CSS 写法一模一样！）

jQuery 的选择器就是 CSS 选择器，你会写 CSS 就会用 jQuery 选元素，零学习成本：

$("div")      // 元素选择器：选所有 div
$("#box")      // id 选择器：选 id 是 box 的
$(".item")     // class 选择器：选 class 是 item 的
$("input[name]")  // 属性选择器：选有 name 属性的 input
$(".list li")    // 后代选择器：选 .list 里面所有的 li
$("ul>li")     // 子代选择器：选 ul 的直接子元素 li

// jQuery 特有的伪类选择器（CSS 里没有的）：
$(".item:first")  // 第一个匹配的元素
$(".item:last")   // 最后一个匹配的元素
$(".item:eq(2)")  // 下标为 2 的元素（下标从 0 开始！）

④ 筛选方法（选完了再筛）

$(".list").find("li")   // 在 .list 里面找后代 li
$(".item").parent()    // 找 .item 的父元素——jQuery 方法要加括号
$(".item").siblings()  // 找 .item 的同级兄弟元素——jQuery 方法要加括号
$(".item").eq(1)     // 从选中的一堆里，取下标为 1 的那个

$ 选出来的是 jQuery 对象（长得像数组），不是原生 DOM 元素——它有自己的方法，不能直接调原生的 innerText、addEventListener 这些。后面会讲怎么互转。

⑤ 实战：用在哪 / 常见坑 / 怎么解决

可能在什么地方用：

① 老项目维护——很多公司的老系统还在用 jQuery；② 快速写小工具页面，不用搭框架；③ 学了 jQuery 再学 Vue/React 会更容易理解 DOM 操作的思路。

常见的问题：

① 报 $ is not defined——jQuery 没引入成功；② 选不到元素——选择器写错了，或者代码执行时元素还没渲染；③ 把 jQuery 对象当原生 DOM 用，调 innerText 报错；④ CDN 地址写错了。

解决思路：

① 先确认 jQuery 引入成功了（Console 里打 $ 能出来东西）；② 所有代码包在 $(function{}) 入口函数里；③ 选择器和 CSS 写法对照着查；④ 原生 API 和 jQuery 方法别混用。

一句话：$ 核心函数 + 和 CSS 一样的选择器；入口用 $(function{})；报 $ is not defined 先查引入。

11.3 课后作业（融入本节）

练习一：jQuery 引入与选择器——① 通过 CDN 引入 jQuery；② 准备好演示 HTML 结构；③ 分别用下面这些选择器选元素并在控制台打印：$("#app")、$(".title")、$("li")、$(".list li")、$("li:first")、$("li:eq(1)")。