rou/front-end-example
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add TypeScript lessons and learning panel

Browse Source 
- Introduced a new script to check TypeScript lesson files for errors.
- Created a main TypeScript file to render lessons and their details.
- Added lesson definitions with starter and answer codes.
- Implemented a user interface for navigating and running lessons.
- Styled the application with CSS for a better user experience.
- Updated README to reflect the new TypeScript section and usage instructions.
This commit is contained in:
charlie
2026-03-19 10:06:11 +08:00
parent 69a4ae3178
commit f3bdaa4e88
146 changed files with 5951 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
04-dom-events-async/01-query-selectors/README.md Normal file
View File

@@ -0,0 +1,28 @@
# 练习 1：获取元素
## 目标
学会用几种常见方式拿到页面元素。
## 你要练什么
- `getElementById`
- `querySelector`
- `querySelectorAll`
- 元素文本读取
## 任务
请基于页面结构完成以下操作：
- 选中主标题
- 选中“开始学习”按钮
- 选中全部学习卡片
- 在控制台输出标题文字、按钮文字和卡片数量
## 文件
- [starter.html](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/01-query-selectors/starter.html)
- [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/01-query-selectors/starter.js)
- [answer.html](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/01-query-selectors/answer.html)
- [answer.js](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/01-query-selectors/answer.js)

52
04-dom-events-async/01-query-selectors/answer.html Normal file
View File

@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>获取元素</title>
<style>
body {
margin: 0;
padding: 32px;
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
background: #f6f8fb;
}
.panel {
max-width: 760px;
margin: 0 auto;
padding: 24px;
border-radius: 20px;
background: #ffffff;
border: 1px solid #dbe3f0;
}
.cards {
display: grid;
gap: 12px;
margin-top: 18px;
}
.card {
padding: 16px;
border-radius: 14px;
background: #f8fbff;
border: 1px solid #dce8f8;
}
</style>
</head>
<body>
<section class="panel">
<h1 id="page-title">DOM 获取元素练习</h1>
<button class="start-btn" type="button">开始学习</button>
<div class="cards">
<article class="card">获取标题</article>
<article class="card">获取按钮</article>
<article class="card">获取一组卡片</article>
</div>
</section>
<script src="./answer.js"></script>
</body>
</html>

7
04-dom-events-async/01-query-selectors/answer.js Normal file
View File

@@ -0,0 +1,7 @@
const title = document.getElementById("page-title");
const button = document.querySelector(".start-btn");
const cards = document.querySelectorAll(".card");
console.log("标题：", title.textContent);
console.log("按钮：", button.textContent);
console.log("卡片数量：", cards.length);

52
04-dom-events-async/01-query-selectors/starter.html Normal file
View File

@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>获取元素</title>
<style>
body {
margin: 0;
padding: 32px;
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
background: #f6f8fb;
}
.panel {
max-width: 760px;
margin: 0 auto;
padding: 24px;
border-radius: 20px;
background: #ffffff;
border: 1px solid #dbe3f0;
}
.cards {
display: grid;
gap: 12px;
margin-top: 18px;
}
.card {
padding: 16px;
border-radius: 14px;
background: #f8fbff;
border: 1px solid #dce8f8;
}
</style>
</head>
<body>
<section class="panel">
<h1 id="page-title">DOM 获取元素练习</h1>
<button class="start-btn" type="button">开始学习</button>
<div class="cards">
<article class="card">获取标题</article>
<article class="card">获取按钮</article>
<article class="card">获取一组卡片</article>
</div>
</section>
<script src="./starter.js"></script>
</body>
</html>

5
04-dom-events-async/01-query-selectors/starter.js Normal file
View File

@@ -0,0 +1,5 @@
// 任务：
// 1. 用 getElementById 获取标题
// 2. 用 querySelector 获取按钮
// 3. 用 querySelectorAll 获取全部卡片
// 4. 在控制台输出标题文字、按钮文字和卡片数量