jQuery 基础

库/框架 JavaScript jQuery

一、什么是 jQuery

1.1 诞生背景

John Resig 对原生 JavaScript 操作 DOM 的冗长代码感到沮丧，于是创建了 jQuery——一个大幅 简化 DOM 操作 的 JavaScript 库。

原生 JS vs jQuery 对比：

javascript

// 原生 JS — 为所有按钮添加点击事件，改变 h1 颜色
for (var i = 0; i < 5; i++) {
  document.querySelectorAll("button")[i].addEventListener("click", function () {
    document.querySelector("h1").style.color = "red";
  });
}

// jQuery — 一行搞定
$("button").click(function () {
  $("h1").css("color", "red");
});

1.2 $ 符号

$ 是 jQuery 的简写：

javascript

jQuery("h1")  // 完整写法
$("h1")       // 简写（推荐）

$("h1") 等价于 document.querySelector("h1")，但 自动选择所有匹配元素（无需 querySelectorAll）。

二、引入 jQuery

2.1 通过 CDN 引入

使用 Google CDN（推荐）：

html

<!-- jQuery CDN（必须在自定义 JS 之前） -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<!-- 自定义 JS -->
<script src="index.js"></script>
</body>

顺序至关重要

jQuery 的 <script> 标签必须在你自己的 index.js 之前，否则浏览器不认识 $ 符号。

2.2 CDN 的好处

如果用户之前访问过使用相同 CDN 的网站，jQuery 已被缓存，无需重新下载
加速网站加载

2.3 安全检查：jQuery 是否就绪

如果必须将脚本放在 <head> 中，使用 $(document).ready()：

javascript

$(document).ready(function () {
  // jQuery 已加载完毕，可以安全使用
  $("h1").css("color", "red");
});

💡 最佳实践：将所有 <script> 放在 </body> 前，就不需要 ready() 了。

2.4 Minification（代码压缩）

特性	标准版	压缩版（.min）
可读性	✅ 适合人类阅读	❌ 所有代码一行
文件大小	较大	较小（去除空格、注释、换行）
用途	开发/调试	生产环境

javascript

// 压缩前
function greeting(name) {
  console.log("Hello " + name);
}

// 压缩后
function greeting(n){console.log("Hello "+n)}

工具：minifier.org 可在线压缩 JS/CSS。

三、选择元素

jQuery 使用 CSS 选择器 语法，与 querySelector 一致，但更简洁：

javascript

// 按标签
$("h1")

// 按 class
$(".btn")

// 按 ID
$("#title")

// 层级选择器
$("li a")          // li 内的 a

// 组合选择器
$("h1.title")      // 同时是 h1 和 .title 的元素

querySelector vs jQuery

javascript

// 原生 JS — 选择所有按钮需要 querySelectorAll
document.querySelectorAll("button");

// jQuery — 自动选择所有匹配元素
$("button");  // 等价于 querySelectorAll，无需区分

四、操作样式（CSS）

4.1 获取 CSS 值（一个参数 = getter）

javascript

$("h1").css("color");       // "rgb(0, 0, 0)"
$("h1").css("font-size");   // "32px"

4.2 设置 CSS 值（两个参数 = setter）

javascript

$("h1").css("color", "green");
$("h1").css("font-size", "10rem");

4.3 操作类（推荐 ⭐）

遵循 关注点分离 原则，样式定义在 CSS 中，JS 只切换类名：

javascript

// 添加类
$("h1").addClass("big-title");

// 移除类
$("h1").removeClass("big-title");

// 添加多个类（空格分隔）
$("h1").addClass("big-title margin-50");

// 检查是否有某个类
$("h1").hasClass("big-title");  // true / false

CSS 定义：

css

.big-title {
  font-size: 10rem;
  color: yellow;
  font-family: cursive;
}

.margin-50 {
  margin: 50px;
}

五、操作文本

5.1 text() — 纯文本

javascript

// 获取文本
$("h1").text();            // "Hello"

// 设置文本（应用于所有匹配元素）
$("button").text("Don't Click Me");
// 所有按钮的文字都变了

5.2 html() — 含 HTML 标签

javascript

// 获取 HTML
$("h1").html();            // "<strong>Hello</strong>"

// 设置 HTML（可注入标签）
$("h1").html("<em>Good Bye</em>");
// h1 中显示斜体的 "Good Bye"

方法	等价原生 JS	处理 HTML 标签？
`.text()`	`textContent`	❌ 纯文本
`.html()`	`innerHTML`	✅ 解析 HTML

六、操作属性

6.1 attr() — 获取与设置

javascript

// 获取属性值（一个参数 = getter）
$("img").attr("src");           // "drum.png"
$("a").attr("href");            // "https://www.google.com"
$("h1").attr("class");          // "big-title margin-50"

// 设置属性值（两个参数 = setter）
$("a").attr("href", "https://www.yahoo.com");

💡 class 也是 HTML 属性，所以 $("h1").attr("class") 可以获取所有类名。

七、事件监听

7.1 click() — 点击事件

javascript

// jQuery 自动为所有匹配元素添加监听器（无需 for 循环！）
$("button").click(function () {
  $("h1").css("color", "purple");
});

对比原生 JS：

javascript

// 原生 JS — 需要 for 循环
for (var i = 0; i < 5; i++) {
  document.querySelectorAll("button")[i].addEventListener("click", function () {
    document.querySelector("h1").style.color = "purple";
  });
}

// jQuery — 一行搞定
$("button").click(function () {
  $("h1").css("color", "purple");
});

7.2 keypress() — 键盘事件

javascript

// 监听特定元素的按键
$("input").keypress(function (event) {
  console.log(event.key);
});

// 监听整个文档的按键
$(document).keypress(function (event) {
  $("h1").text(event.key);
});

7.3 on() — 通用事件监听（推荐 ⭐）

更灵活，支持 所有 DOM 事件：

javascript

// 监听 mouseover（鼠标悬停）
$("h1").on("mouseover", function () {
  $("h1").css("color", "purple");
});

// 监听 click
$("h1").on("click", function () {
  $("h1").css("color", "purple");
});

// 监听 keypress
$(document).on("keypress", function (event) {
  console.log(event.key);
});

.click() vs .on("click", ...)

功能相同，但 .on() 更灵活：

支持所有事件类型（click、keypress、mouseover、dblclick 等）
支持事件委托（动态元素）
推荐统一使用 .on()

八、添加与移除元素

8.1 四种添加方式

javascript

$("h1").before("<button>New</button>");   // h1 前面（同级）
$("h1").after("<button>New</button>");    // h1 后面（同级）
$("h1").prepend("<button>New</button>");  // h1 内部开头（子元素）
$("h1").append("<button>New</button>");   // h1 内部末尾（子元素）

位置示意图：

[before]
<h1>
  [prepend]
  Hello
  [append]
</h1>
[after]

8.2 移除元素

javascript

$("button").remove();  // 移除所有 button 元素

九、动画效果

9.1 显示/隐藏

javascript

$("h1").hide();     // 立即隐藏
$("h1").show();     // 立即显示
$("h1").toggle();   // 切换显示/隐藏

9.2 淡入/淡出

javascript

$("h1").fadeOut();      // 淡出（透明度 → 0，然后隐藏）
$("h1").fadeIn();       // 淡入
$("h1").fadeToggle();   // 切换淡入/淡出

9.3 滑动

javascript

$("h1").slideUp();      // 向上折叠
$("h1").slideDown();    // 向下展开
$("h1").slideToggle();  // 切换折叠/展开（适合下拉菜单）

9.4 自定义动画 — animate()

javascript

$("h1").animate({ opacity: 0.5 });
$("h1").animate({ margin: "20px" });
$("h1").animate({ margin: "20%" });  // 百分比需用字符串

animate 的限制

animate() 只支持 数值型 CSS 属性（如 opacity、margin、width）。

不支持 非数值属性（如 color、background-color）。

9.5 链式调用（Chaining）

多个动画按顺序执行：

javascript

$("h1").slideUp().slideDown().animate({ opacity: 0.5 });
// 1. 向上折叠
// 2. 向下展开
// 3. 透明度变为 50%

十、jQuery 方法速查表

选择与遍历

方法	功能
`$("selector")`	选择元素（CSS 选择器语法）

样式操作

方法	功能
`.css("prop")`	获取 CSS 属性值
`.css("prop", "val")`	设置 CSS 属性值
`.addClass("name")`	添加类
`.removeClass("name")`	移除类
`.hasClass("name")`	检查是否有某个类

文本与 HTML

方法	功能
`.text()` / `.text("new")`	获取/设置纯文本
`.html()` / `.html("<em>new</em>")`	获取/设置 HTML

属性

方法	功能
`.attr("name")`	获取属性值
`.attr("name", "val")`	设置属性值

事件

方法	功能
`.click(fn)`	点击事件
`.keypress(fn)`	键盘按键事件
`.on("event", fn)`	通用事件监听（推荐）

DOM 增删

方法	功能
`.before(html)`	在元素前插入（同级）
`.after(html)`	在元素后插入（同级）
`.prepend(html)`	在元素内部开头插入
`.append(html)`	在元素内部末尾插入
`.remove()`	移除元素

动画

方法	功能
`.hide()` / `.show()` / `.toggle()`	显示/隐藏
`.fadeOut()` / `.fadeIn()` / `.fadeToggle()`	淡入/淡出
`.slideUp()` / `.slideDown()` / `.slideToggle()`	折叠/展开
`.animate({prop: val})`	自定义动画（仅数值属性）

十一、Simon Game 项目实战 🎮

11.1 项目概述

经典记忆游戏 Simon：系统随机闪烁颜色序列 → 玩家按顺序点击 → 每关增加一个新颜色 → 出错则游戏结束。

11.2 核心机制

功能	实现方式
随机颜色	`Math.random()` 从数组中随机选一个颜色
颜色序列	数组 `gamePattern` 存储不断增长的序列
用户输入	`.click()` 监听按钮点击，记录用户选择
序列比较	逐个比较用户输入与游戏序列
关卡推进	匹配成功后调用新一轮 `nextSequence()`
游戏结束	匹配失败 → 播放错误音效 → 显示 "Game Over"
重新开始	`$(document).keypress()` 监听按键重启
视觉反馈	`.addClass("flash")` + `setTimeout` 移除
音效	`new Audio("sounds/" + color + ".mp3").play()`

11.3 核心代码结构

javascript

var buttonColours = ["red", "blue", "green", "yellow"];
var gamePattern = [];
var userClickedPattern = [];
var level = 0;
var started = false;

// 键盘按键 → 开始游戏
$(document).keypress(function () {
  if (!started) {
    nextSequence();
    started = true;
  }
});

// 按钮点击 → 记录用户输入
$(".btn").click(function () {
  var userChosenColour = $(this).attr("id");
  userClickedPattern.push(userChosenColour);

  playSound(userChosenColour);
  animatePress(userChosenColour);

  checkAnswer(userClickedPattern.length - 1);
});

// 生成下一个序列
function nextSequence() {
  userClickedPattern = [];
  level++;
  $("#level-title").text("Level " + level);

  var randomNumber = Math.floor(Math.random() * 4);
  var randomChosenColour = buttonColours[randomNumber];
  gamePattern.push(randomChosenColour);

  $("#" + randomChosenColour).fadeIn(100).fadeOut(100).fadeIn(100);
  playSound(randomChosenColour);
}

// 检查答案
function checkAnswer(currentLevel) {
  if (gamePattern[currentLevel] === userClickedPattern[currentLevel]) {
    if (userClickedPattern.length === gamePattern.length) {
      setTimeout(function () { nextSequence(); }, 1000);
    }
  } else {
    playSound("wrong");
    $("body").addClass("game-over");
    setTimeout(function () { $("body").removeClass("game-over"); }, 200);
    $("#level-title").text("Game Over, Press Any Key to Restart");
    startOver();
  }
}

// 重置游戏
function startOver() {
  level = 0;
  gamePattern = [];
  started = false;
}

11.4 涉及的综合知识点

知识点	在项目中的应用
jQuery 选择器	`$(".btn")`、`$("#level-title")`
jQuery 事件	`.click()`、`$(document).keypress()`
jQuery 动画	`.fadeIn().fadeOut().fadeIn()` 闪烁
jQuery classList	`.addClass("game-over")` + `setTimeout` 移除
jQuery 属性	`$(this).attr("id")` 获取按钮颜色
数组操作	`.push()` 存储序列、索引比较
随机数	`Math.floor(Math.random() * 4)`
Audio 对象	`new Audio(...).play()`
setTimeout	延迟执行下一轮
条件判断	逐位比较、判断通关或失败

十二、jQuery 的现状与思考

jQuery 的定位

jQuery 诞生于 2006 年，解决了当时浏览器兼容性差、原生 API 冗余的痛点。

现代开发中：

原生 JS（ES6+）已大幅改善，querySelector、classList、fetch 等替代了很多 jQuery 功能
React、Vue 等框架采用 声明式 范式，手动 DOM 操作越来越少
jQuery 仍广泛存在于 遗留项目 中，了解它有助于维护旧代码

学习价值：理解 jQuery 的设计思想（链式调用、选择器抽象、事件委托）对理解现代框架很有帮助。

← 返回 Web 开发研究

jQuery 基础 ​

一、什么是 jQuery ​

1.1 诞生背景 ​

1.2 $ 符号 ​

二、引入 jQuery ​

2.1 通过 CDN 引入 ​

2.2 CDN 的好处 ​

2.3 安全检查：jQuery 是否就绪 ​

2.4 Minification（代码压缩） ​

三、选择元素 ​

四、操作样式（CSS） ​

4.1 获取 CSS 值（一个参数 = getter） ​

4.2 设置 CSS 值（两个参数 = setter） ​

4.3 操作类（推荐 ⭐） ​

五、操作文本 ​

5.1 text() — 纯文本 ​

5.2 html() — 含 HTML 标签 ​

六、操作属性 ​

6.1 attr() — 获取与设置 ​

七、事件监听 ​

7.1 click() — 点击事件 ​

7.2 keypress() — 键盘事件 ​

7.3 on() — 通用事件监听（推荐 ⭐） ​

八、添加与移除元素 ​

8.1 四种添加方式 ​

8.2 移除元素 ​

九、动画效果 ​

9.1 显示/隐藏 ​

9.2 淡入/淡出 ​

9.3 滑动 ​

9.4 自定义动画 — animate() ​

9.5 链式调用（Chaining） ​

十、jQuery 方法速查表 ​

选择与遍历 ​

样式操作 ​

文本与 HTML ​

属性 ​

事件 ​

DOM 增删 ​

动画 ​

十一、Simon Game 项目实战 🎮 ​

11.1 项目概述 ​

11.2 核心机制 ​

11.3 核心代码结构 ​

11.4 涉及的综合知识点 ​

十二、jQuery 的现状与思考 ​

jQuery 基础

一、什么是 jQuery

1.1 诞生背景

1.2 $ 符号

二、引入 jQuery

2.1 通过 CDN 引入

2.2 CDN 的好处

2.3 安全检查：jQuery 是否就绪

2.4 Minification（代码压缩）

三、选择元素

四、操作样式（CSS）

4.1 获取 CSS 值（一个参数 = getter）

4.2 设置 CSS 值（两个参数 = setter）

4.3 操作类（推荐 ⭐）

五、操作文本

5.1 text() — 纯文本

5.2 html() — 含 HTML 标签

六、操作属性

6.1 attr() — 获取与设置

七、事件监听

7.1 click() — 点击事件

7.2 keypress() — 键盘事件

7.3 on() — 通用事件监听（推荐 ⭐）

八、添加与移除元素

8.1 四种添加方式

8.2 移除元素

九、动画效果

9.1 显示/隐藏

9.2 淡入/淡出

9.3 滑动

9.4 自定义动画 — animate()

9.5 链式调用（Chaining）

十、jQuery 方法速查表

选择与遍历

样式操作

文本与 HTML

属性

事件

DOM 增删

动画

十一、Simon Game 项目实战 🎮

11.1 项目概述

11.2 核心机制

11.3 核心代码结构

11.4 涉及的综合知识点

十二、jQuery 的现状与思考