JavaScript: JavaScript 代码示例
本页收集了 JavaScript 教程各课的精选代码示例，方便你快速查找和参考。
每个示例都是独立可运行的 HTML 文件——复制出去保存为 .html 文件，用浏览器打开即可看到效果。
▶ 示例：按钮点击计数
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>按钮点击计数</title>
</head>
<body>
<button id="btn">点击我</button>
<p>点击次数: <span id="count">0</span></p>
<script>
let count = 0;
const btn = document.getElementById('btn');
const countEl = document.getElementById('count');
btn.addEventListener('click', function() {
count++;
countEl.textContent = count;
});
</script>
</body>
</html>
▶ 示例索引
| 课 | 示例 | 关键知识点 |
|---|---|---|
| 22 | 五种选择方法对比 | getElementById、querySelector 等 |
| 22 | textContent vs innerHTML | 修改元素内容 |
| 22 | 操作链接属性 | getAttribute、setAttribute |
| 22 | 动态添加列表项 | createElement、appendChild |
| 22 | 删除与克隆 | removeChild、cloneNode |
| 23 | style 属性读写 | element.style |
| 23 | 主题切换 | classList.toggle |
| 23 | 显示与隐藏 | classList |
| 23 | 获取计算样式 | getComputedStyle |
| 23 | cssText 批量设置 | style.cssText |
| 24 | 按钮点击计数 | addEventListener、事件对象 |
| 24 | 键盘检测 | keydown 事件 |
| 24 | 表单拦截 | preventDefault |
| 24 | 事件委托 | e.target、冒泡机制 |
| 25 | 序列化与格式化 | JSON.stringify、replacer、space |
| 25 | 反序列化 | JSON.parse |
| 25 | 常见 JSON 错误 | try/catch、JSON 语法陷阱 |
| 26 | 回调基本用法 | setTimeout、回调函数 |
| 26 | Promise 模拟请求 | new Promise、then/catch |
| 26 | async/await | async 函数、await |
| 26 | Promise.all 与 race | 并发请求、竞速 |
| 27 | Student 类 | class、constructor、方法 |
| 27 | 静态方法与 getter/setter | static、get、set |
| 27 | 继承演示 | extends、super |
| 27 | 单文件模拟模块 | type="module" |
后续会持续补充更多示例，敬请期待。
❓ 常见问题
Q 如何运行这些示例？
A 将代码复制到一个名为
example.html 的文件，然后在浏览器中打开。大多数示例不需要构建步骤或服务器。Q 可以修改示例并查看结果吗？
A 可以！在文本编辑器中打开文件，做些修改，保存并刷新浏览器。JavaScript 的更改会立即生效。
Q 哪里有更大的示例（如 Todo 应用）？
A 参见第 28 课 — Todo 应用项目。本索引仅收集单一概念的简短片段。
📖 小节
- 每个示例都是独立的 — 复制并在任何浏览器中运行
- 示例一次专注于一个概念
- 自由修改以探索行为
- 更大的项目请参见专门的课程
📝 作业
- 选择任何示例，修改它并在注释中记录新行为。
- 将两个示例（如：变量 + 事件）合并到一个页面中。
- 创建你自己的示例页面，讲解你觉得令人困惑的概念。
