文章目录

• JavaScript 基础阶段
• 一. 初识 JavaScript
• • (一) JavaScript 的作用
  • (二) HTML/CSS/JS 的关系
  • (三) 浏览器执行 JS 简介
  • (四) JS 的组成
  • (五) JS 书写位置
• 二. JavaScript 输入输出语句
• 三. 变量
• • (一) 变量的使用
  • (二) 变量语法扩展
  • (三) 变量命名规范
• 四. 数据类型
• • (一) 简单数据类型
  • • 1. isNaN()
    • 2. 字符串 String
    • 3. 获取检测变量的数据类型
    • 4. 数据类型转换
• 五. 流程控制
• • (一) 分支结构
  • • 1. if 语句
    • 2. 三元表达式
    • 3. switch 语句
  • (二) 循环结构
  • • 1. for 循环
    • 2. while 循环
    • 3. do while 循环
    • 4. continue break
• 六. 数组
• 七. 冒泡排序
• 八. 函数
• • (一) 声明函数
  • (二) 调用函数
  • (三) arguments 的使用
• 九. 作用域
• • (一) 全局变量
  • (二) 局部变量
• 十. JS 预解析
• 十一. JS对象
• • (一) 创建对象
  • (二) 遍历对象
• 十二. 内置对象
• • (一) 查文档
  • (二) Math 对象
  • (三) 日期对象
  • • 1. Date() 方法
    • 2. 日期格式化
    • 3. 倒计时案例实现
  • (四) 数组对象
  • • 1. 添加和删除数组元素
    • 2. 数组排序
    • 3. 数组索引方法
    • 4. 数组转换为字符串
  • (五) 字符串对象
  • • 1. 根据字符返回位置
    • 2. 拼接以及截取字符串
    • 3. 替换字符串以及转换为数组
• Web APIs
• 十三. DOM 文档对象类型
• • (一) DOM 树
  • (二) 获取元素
  • • 1. 根据 ID 获取
    • 2. 根据标签名获取
    • 3. 通过 HTML5 新增的方法获取（推荐）
    • 4. 特殊元素获取
  • (三) 事件基础
  • (四) 操作元素
  • • 1. 操作元素内容
    • • 1）element.innerText
      • 2）element.innerHTML (大量使用)
    • 2. 操作元素属性
    • 3. 操作表单元素属性
    • 4. css样式属性操作
    • • 1）element.style（行内样式操作）
      • 2）element.className（类名样式操作）
    • 5. 鼠标经过变色案例
    • 6. 排他思想()算法设计换肤效果案例
    • 7. 自定义属性的操作
    • • 1）获取属性值
      • 2）自定义属性
      • 3）设置属性值
      • 4）移除属性
  • (五) 节点操作
  • • 1. 节点层级
    • • 1）父级节点
      • 2）子节点
      • 3）兄弟节点
    • 2. 创建节点
    • 3. 添加节点
    • • 1）appendChild
      • 2）insertBefore
    • 4. 删除节点
    • 5. 复制节点
    • 6. 动态创建元素
    • • 1）document.write()（了解）
      • 2）element.innerHTML
      • 3）document.createElement()
  • (六) 事件高级
  • • 1. 注册事件(绑定事件)
    • • 1）传统注册方式
      • 2）方法监听注册方式
      • 3）addEventListener 事件监听处理
      • 4）attachEvent 事件监听方式(了解)
    • 2. 删除事件(解绑事件)
    • • 1）传统注册方式
      • 2）方法监听注册方式
    • 3. DOM事件流
    • 4. 事件对象
    • • 1）事件对象的常见属性和方法
    • 5. 事件委托(代理，委派)
    • 6. 常用的鼠标事件
    • • 1) event 鼠标事件对象
      • 2) mouseenter 和 mouseover 的区别
    • 7. 常用的键盘事件
    • • 1）键盘事件对象
• 十四. BOM 浏览器对象类型
• • (一) BOM的构成
  • (二) window 对象的常见事件
  • • 1. 窗口加载事件
    • 2. 调整窗口大小事件
  • (三) 定时器
  • • 1. setTimeout() 定时器设置
    • 2. 停止 setTimeout() 定时器
    • 3. setInterval() 定时器设置
    • 4. 停止 setInterval() 定时器
    • 5. this 指向问题
  • (四) JS执行机制
  • • 1. JS 是单线程
    • 2. 同步和异步
    • • 1）同步
      • 2）异步
  • (五) location 对象
  • • 1. URL
    • 2. location 对象的属性
    • 3. location 对象的方法
  • (六) navigator 对象
  • (七) history 对象
• 十五. PC端网页特效
• • (一) 元素偏移量 offset 系列
  • • 1. offset 与 style 区别
    • 2. 获取盒子中鼠标的坐标
  • (二) 元素可视区 client 系列
  • • 1. 立即执行函数
    • 2. 淘宝 js 源码
  • (三) 元素滚动 scroll 系列
  • • 1. 元素scroll系列属性
    • 2. 页面被卷去的头部
  • (四) 动画函数封装
  • • 1. 动画实现原理
    • 2. 动画函数简单封装
    • 3. 给不同元素记录不同定时器
    • 4. 缓动效果原理
    • 5. 动画函数添加回调函数
  • (五) 常见网页特效案例
  • • 1. 网页轮播图
• 十六. 移动端网页特效
• • (一) 触屏事件
  • • 1. 触摸事件对象（TouchEvent）
    • 2. 移动端拖动元素
  • (二) 移动端常见特效
  • • 1. 自动播放功能-无缝滚动
    • 2. classList 属性
    • • 1）添加类
      • 2）移除类
      • 1）切换类
    • 3. click 延时解决方案
  • (三) 移动端常用开发插件
  • • 1. fastclick插件
    • 2. Swiper 插件的使用
    • 3. 移动端常用插件
    • 4. 插件的使用总结
  • (四) 移动端常用开发框架
  • • 1. Bootstrap
• 十七. 本地存储
• • (一) window.sessionStorage
  • (二) window.localStorage
• 十八. jQuery
• • (一) JavaScript 库
  • (二) jQuery的概念
  • • 1. jQuery 的下载
    • 2. jQuery的使用步骤
    • 3. jQuery 的入口函数
    • 4. jQuery 的顶级对象 $
    • 5. jQuery 对象和 DOM 对象
• 十九. 数据可视化项目
• • (一) 什么是数据可视化
  • • 1. 数据可视化
    • 2. 数据可视化的场景
    • 3. 常见的数据可视化库
  • (二) ECharts 简介
  • (三) ECharts 的基本使用
  • • 1. ECharts 使用五步骤