11. jQuery 介绍与选择器

jQuery 就是封装了 DOM 操作和 AJAX 的库，选择器更快、链式调用更爽。

核心三个：
1. $(选择器)——选元素
2. .text() / .html() / .val()——拿内容
3. .css() / .addClass() / .removeClass()——改样式 class

坑：$ 就是 jQuery、jQuery 对象和原生 DOM 别混、$("") 返回 jQuery 对象不是原生元素。

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

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

下面是一个真实的 HTML 结构，点预设按钮或自己输入选择器，看选中哪些元素：

页面结构：

卡片标题（h4）

卡片描述文字（.desc）

第二个卡片（.card）

另一个描述文字

标签1 标签2

预设：

输入选择器：

点上面的预设按钮，或自己输入 CSS 选择器，看选中谁

11.2 知识点讲解

1. jQuery 是什么？怎么引入？

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

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

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

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

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

// 完整等价写法（初学知道就行，平时用上面的简写）：
$(document).ready(function () {
  console.log("DOM 准备好了，可以操作页面元素了");
});

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

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

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

// 元素选择器：选所有 div
$("div")
// id 选择器：选 id 是 box 的
$("#box")
// class 选择器：选 class 是 item 的
$(".item")
// 属性选择器：选有 name 属性的 input
$("input[name]")
// 后代选择器：选 .list 里面所有的 li
$(".list li")
// 子代选择器：选 ul 的直接子元素 li
$("ul>li")
// jQuery 特有的伪类选择器（CSS 里没有的）：
// 第一个匹配的元素
$(".item:first")
// 最后一个匹配的元素
$(".item:last")
// 下标为 2 的元素（下标从 0 开始！）
$(".item:eq(2)")

4. 筛选方法（选完了再筛）

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

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

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

可能在什么地方用：

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

常见的问题：

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

解决思路：

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

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

11.3 课后作业（融入本节）

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

本页重点

API	作用	参数	返回值	代码示例
$(selector)	选中页面元素	入参：CSS 选择器	返回：jQuery 对象	`let box = $("#box");`
$(document).ready(fn)	等 DOM 加载完再执行	入参：函数	返回：jQuery	`$(document).ready(function () { });`
$(function(){})	DOM 就绪后执行（ready 的简写，最常用）	入参：函数	返回：jQuery	`$(function () { });`