← FC Coder · HomePhase 00 · Lesson 04 · 60 min
Lesson04
Phase Zero · DevTools Explore · Matchday 04
一行代码
染全场
Today's 3 Jobs · 今天这三件事
- 01数一数:页面上一共多少张球员卡用代码数,不用眼睛数。
- 02一行代码,把每一张卡的名字念一遍教练对全队喊一句话,30 个人都听到。
- 03一行代码,把整片球员卡涂金今天的高光 —— 一行管一片。
上节课你和大脑一问一答 —— 一个数、一个字、一个是否。今天大脑摸到**整张网页**:一行代码,管一片东西。
Half 1 · 在脑子里
三层回忆 · 大脑往里走
骨头看过、皮肤贴过、上节课开了大脑。今天大脑摸到整棵套娃树。
- 01
骨头
HTML决定是什么 —— 第 1 课见过。
- 02
皮肤
CSS决定长什么样 —— 第 2 课。
- 03今天只看这个
大脑
JavaScript决定会做什么 —— 上节课开了门,今天往里走。
Essence · 本质 1/2
网页是一棵套娃树 · DOM Tree
整张网页 = 大盒子套中盒子套小盒子。document 是树顶 —— 主教练的战术板。
document
↳ 球队
↳ 前锋线
↳ 9 号 · 名字 · 头像
↳ 球队
↳ 前锋线
↳ 9 号 · 名字 · 头像
树顶 · 总开关
document
中层 · 阵容线
前锋线 / 中场 / 后卫
叶子 · 哈兰德
名字 / 号码
你能抓任何一层:整队、整条前锋线、就 9 号、只名字。
CSS 选择器是钥匙(第 2 课已会),JS 用同一把钥匙。
Essence · 本质 2/2
一句咒语 · 找一串 → 对每一个 → 改样子
今天的形状。学会一次,后面 60 节课都用得到。
document.querySelectorAll('.player-card')
.forEach(card => card.style.background = 'gold')
.forEach(card => card.style.background = 'gold')
1. 找一串
querySelectorAll
2. 对每一个
forEach
3. 改样子
.style.X = 'Y'
读出来:"找到所有 .player-card,对每一个 card,把 card 的背景涂金。"
一行,30 张全变。
Roster · 咒语三件套
新工具 · 各看 30 秒
不用背 —— 在 ea.com 上手时这三个名字会一直回来。
- 01querySelectorAll('.player-card')找一串 —— 用第 2 课的 CSS 选择器,但抓回的是所有匹配的(不只一个)。少一个
All就只抓第一张 (querySelector)。多一个就是全部。 - 02.forEach(card => …)对每一个,做这件事 —— 教练对全队喊"全体,跑两圈"。喊一次,30 个人都做。
card是临时给每张卡起的名字。=>今天先抄,以后讲。 - 03card.style.background = 'gold'JS 贴的 CSS 字条 —— 形状和第 2 课一样 (
background: gold),只是 JS 帮你贴。颜色值要'引号'包住。CSS 里font-size在 JS 里写fontSize(去横线、第二个词大写)。
Warm-up · 赛前热身
先在这儿念几下咒语
下面是 9 张曼城卡。点一个咒语 —— 9 张同时变。等会儿到 ea.com 的 Console 里做的,就是这个。
const cards = document.querySelectorAll('.player-card')
cards.length → 9
// 点下面任何一个咒语 · 9 张卡同时变93
ST
FC · CODER
🐺
哈兰德
84
LW
FC · CODER
⚡
多库
88
CAM
FC · CODER
🦊
福登
91
CDM
FC · CODER
🛡️
罗德里
87
CM
FC · CODER
🎯
B 席
80
RW
FC · CODER
🌪️
赛门约
84
CB
FC · CODER
🧱
鲁本
84
CB
FC · CODER
🪨
斯通斯
88
GK
FC · CODER
🧤
埃德森
Spells · 点一下 · 9 张同时变
Half 2 · 在屏幕上
现在去真球场 · 在 ea.com 上染全场
做完一步就点 ✓。关掉浏览器也不丢。
01进场 · 摸到整棵树
01Min
召唤 DevTools · 切到 Console
打开 ea.com/games/ea-sports-fc/ratings(或任意有图片有卡片的网站)。Mac ⌘ + ⌥ + I / Windows F12 → 切到 Console。
02Min
打个 document 看整棵树
打:document · Enter。看到一坨像 <html>...</html> 的东西,旁边有个 ▶。点 ▶ —— 整棵套娃树展开,从 <head> 到 <body> 一层一层。这就是浏览器眼里的整张网页。
02抓 · 数 · 念
03Min
抓第一张 · querySelector
打:document.querySelector('.player-card') · Enter。回一段 HTML —— 就一张。如果回 null,要么去 Styles 偷一个真实 class 名,要么把 .player-card 全部换成 'img'(后面也照换),效果一样酷。
04Min
抓所有 + 数一数
打:const cards = document.querySelectorAll('.player-card') · Enter · 再打:cards.length → 一个数字(比如 30)。一行代码,数完。
05Min
对每一个 · 念名字
打:cards.forEach(card => console.log(card.textContent))。Console 哗啦啦打出 30 行 —— 内容会有点乱,正常,下节课专门挑最高的。
03高光 · 念咒语 · 全场染金
06Min
一行咒语 · 全场染金
打:cards.forEach(card => card.style.background = 'gold')。看向网页 —— 所有球员卡瞬间变金。一句话:对每一个 card,把背景涂金。
07Min
玩一下 · 换换效果
再打:cards.forEach(c => c.style.border = '4px solid deeppink') · 或 cards.forEach(c => c.style.transform = 'rotate(-3deg)') · 或 cards.forEach(c => c.style.opacity = '0.3')。每打一行,看一眼网页。
04收官 · 同形状换对象 + 刷新
08Min
同形状换对象 · 让所有图片半透明
打:document.querySelectorAll('img').forEach(img => img.style.opacity = '0.3')。所有图片都变半透明。咒语形状没变,只换了 .player-card → 'img'、background → opacity。这就是「模式」。
09Min
刷新 · 一切归零
⌘ + R / F5。金色、粉边、半透明 —— 全没,cards 变量也没了。再打 cards 会报 ReferenceError —— 和上节课的 haaland 一样,刷新就忘。
10Min
截图留念
截一张全场染金的。存:2026-XX-XX-我染了全场.png。第 4 张战利品。
Half Time · 中场休息
讲给爸爸听
关掉 DevTools。看着爸爸,用自己的话。
01document 是什么?像球场上的什么东西?Hint ↓
整张网页的总开关 / 主教练的战术板 / 整棵套娃树最顶上。
02querySelector 和 querySelectorAll 差在哪?Hint ↓
一个抓第一张,一个抓全部。多一个 All 就从一个变全部。
03forEach 在干什么?用「教练」打个比方。Hint ↓
教练对全队喊一句话,每个球员都做同一件事。一句话,管一群。
04我想让网页上所有按钮(button)变红色,你会写什么?Hint ↓
document.querySelectorAll('button').forEach(b => b.style.background = 'red')。讲得清「找一串 → 对每一个 → 改样子」三步就过。
Player Rating · 本课温度计
给今天打个分
没对错。说真话。爸爸会看到。
今天难度Difficulty
0
今天开心Fun
0
Final Whistle · 终场哨
你成了主教练 —— 一句话,全场动。
还有 10 步没打勾。明天继续也行,这不是考试。