目标
以 HelloBD 应用为例，搭建好 SPA Web 应用的基本框架
1、Web应用程序的基本概念（JS运行环境、BOM、DOM概念）
2、学会基于 jQuery 操作 DOM 的基础前端Web开发
3、与后端API进行数据交互（Ajax、jQuery、Fetch、axios）
4、基本的 SPA 应用程序类的写法
5、引入前端样式框架
知识点：
1、Web应用程序的基本概念（JS运行环境、BOM、DOM概念）
- BOM 浏览器对象模型（我能怎样操作浏览器？）
- DOM 文档对象模型（我能怎么修改网页内容？）
- Js 运行环境（宿主：浏览器、Nodejs环境）
2、学会基于 jQuery 操作 DOM 的基础前端Web开发
- jQuery 选择器
- jQuery 数据操作
- jQuery DOM 操作（读取、缓存、填充、新增）
3、与后端API进行数据交互（Ajax、jQuery、Fetch、axios）
- 原生 Ajax 方法
- jQuery Ajax 数据操作
- Fetch 方法
- axios 库的使用
4、基本的 SPA 应用程序类的写法
- ES 6 高级语言特性 — 类的写法
- 一个基于类的前端单页应用(SPA) 的写法
5、引入前端样式框架
- Bootstrap：https://www.bootcss.com/
- WeUI：https://weui.io/ 文档：https://weui.io/docs/getting-start.html
- jQueryWeUI ： http://jqweui.com/
- 图标字体
- Font Awesome：http://www.fontawesome.com.cn/
- Bootstrap 图标库：https://icons.bootcss.com/
- 阿里图标：https://www.iconfont.cn/
- 字节跳动图标库：https://iconpark.oceanengine.com/official
- 一般图标设计
- IconFinder：https://www.iconfinder.com/
- EasyIcon：https://www.easyicon.cc/
练习
1、Web应用程序的基本概念（JS运行环境、BOM、DOM概念）
- BOM 浏览器对象模型（我能怎样操作浏览器？）
- 在调试台键入 window，可以查看 window 对象
- 键入 location 可以查看 location 对象
- location.href = 'https://www.bilibili.com' 可以让网页跳转
- location.reload() 可以重新加载网页（刷新）
- history.length 页面浏览历史个数
- history.back() 退回浏览历史上一页
- history.forward() 前进一页
- history.go(1) 前进一页
- history.go(-1) 后退一页
- DOM 文档对象模型（我能怎么修改网页内容？）
- 练习：查询 DOM 相关的文档，了解细节
- 控制台输入代码： document.body.innerHTML = 'Hello World' 可以修改当前网页内容
- Js 运行环境（宿主：浏览器、Nodejs环境）
- 浏览器当中的 js 程序相当于运行在安全沙盒当中，不会修改浏览器之外的东西；
2、学会基于 jQuery 操作 DOM 的基础前端Web开发
- 接上一节课创建的 HelloBD 目录，使用 VSCode 打开目录
- 使用 Microsfot Edge 浏览器，安装扩展，可以选择 JSONViewer 插件，可以在 API 是 JSON 格式的时候，自动格式化，方便浏览 JSON 结构
- 引用 jQuery, 可以从公用的 CDN 网站加载现成的 jquery.min.js
- jQuery 选择器
- jQuery DOM 操作（读取、缓存、填充、新增）
