前端学习第三阶段-第3章 WebAPI编程-CSDN博客

本文链接：https://blog.csdn.net/qq_39148787/article/details/129298708

3-1 API 和 Web API

01-Web APIs简介导读

在这里插入图片描述

02-js基础和Web APIs两个阶段的关联性

在这里插入图片描述

03-API 和 Web API

在这里插入图片描述

3-2 DOM介绍

04-DOM导读

在这里插入图片描述

05-DOM简介

在这里插入图片描述

06-getElementById获取元素

在这里插入图片描述

07-getElementsByTagName获取某类标签元素

在这里插入图片描述

08-H5新增获取元素方式

在这里插入图片描述

09-获取body和html元素

在这里插入图片描述

3-3 事件和样式操作及案例

10-事件三要素

在这里插入图片描述

11-执行事件过程

在这里插入图片描述

12-操作元素-修改元素内容

在这里插入图片描述

13-innerText和innerHTML的区别
14-操作元素-修改元素属性

在这里插入图片描述

15-分时问候案例

在这里插入图片描述

16-操作元素-修改表单属性

在这里插入图片描述

17-仿京东显示隐藏密码明文案例（上）

在这里插入图片描述

18-仿京东显示隐藏密码明文案例（下）
19-操作元素-修改样式属性

在这里插入图片描述

20-仿淘宝关闭二维码案例

在这里插入图片描述

21-循环精灵图

在这里插入图片描述

22-显示隐藏文本框内容

在这里插入图片描述

23-使用className修改样式属性

在这里插入图片描述

24-密码框验证信息

在这里插入图片描述

25-操作元素总结以及作业

在这里插入图片描述

3-4 百度换肤、表单全选案例

01-排他思想（算法）

在这里插入图片描述

02-百度换肤效果

在这里插入图片描述

03-表格隔行变色效果

在这里插入图片描述

04-表单全选取消全选（上）
05-表单全选取消全选（下）

在这里插入图片描述

06-获取自定义属性值

在这里插入图片描述

07-设置移除自定义属性

在这里插入图片描述

3-5 tab栏切换案例

08-tab栏切换布局分析（重要）

在这里插入图片描述

09-tab栏切换制作（上）
10-tab栏切换制作（下）

在这里插入图片描述

11-H5自定义属性

在这里插入图片描述

3-6 节点操作及发布留言案例
一

12-为什么学习节点操作以及节点简介

在这里插入图片描述

13-节点操作之父节点

在这里插入图片描述

14-节点操作之子节点

在这里插入图片描述

15-节点操作之第一个子元素和最后一个子元素

在这里插入图片描述

16-新浪下拉菜单

在这里插入图片描述

17-节点操作之兄弟节点

在这里插入图片描述

18-节点操作之创建和添加节点

在这里插入图片描述

19-简单版发布留言案例

在这里插入图片描述

二

01-节点操作-删除节点

在这里插入图片描述

02-删除留言案例

在这里插入图片描述

03-节点操作-复制节点

在这里插入图片描述

3-7 动态创建表格案例

04-动态生成表格-创建学生数据

在这里插入图片描述

05-动态生成表格-创建行
06-动态生成表格-创建单元格
07-动态生成表格-单元格填充数据
08-动态生成表格-创建删除单元格
09-动态生成表格-添加删除操作

在这里插入图片描述

10-document.write创建元素（了解）
11-innerHTML和createElement效率对比

在这里插入图片描述

12-DOM重点核心

在这里插入图片描述

3-8 事件详解及案例
一

13-事件高级导读

在这里插入图片描述

14-注册事件两种方式

在这里插入图片描述

15-attachEvent注册事件

在这里插入图片描述

16-删除事件

在这里插入图片描述

17-DOM事件流理论

在这里插入图片描述

18-DOM事件流代码验证

在这里插入图片描述

19-什么是事件对象

在这里插入图片描述

20-e.target和this区别

在这里插入图片描述

21-阻止默认行为

在这里插入图片描述

22-阻止事件冒泡

在这里插入图片描述

23-事件委托

在这里插入图片描述

24-禁止选中文字和禁止右键菜单

在这里插入图片描述

25-获得鼠标在页面中的坐标

在这里插入图片描述

26-跟随鼠标的天使

在这里插入图片描述

二

01-常用的键盘事件

在这里插入图片描述

02-keyCode判断用户按下哪个键

在这里插入图片描述

03-模拟京东按键输入内容案例

在这里插入图片描述

04-模拟京东快递单号查询（上）

在这里插入图片描述

05-模拟京东快递单号查询（下）

在这里插入图片描述

3-9 BOM介绍及应用

06-BOM导读

在这里插入图片描述

07+08-BOM概述

在这里插入图片描述

09-页面加载事件

在这里插入图片描述

10-调整窗口大小事件

在这里插入图片描述

3-10 定时器和相关案例

11-定时器之setTimeout

在这里插入图片描述

12-回调函数以及5秒之后自动关闭的广告

在这里插入图片描述

13-清除定时器clearTimeout

在这里插入图片描述

14-定时器之setInterval

在这里插入图片描述

15-倒计时效果

在这里插入图片描述

16-清除定时器clearInterval

在这里插入图片描述

17-发送短信案例

在这里插入图片描述

3-11 this指向和js执行机制

18-this指向问题

在这里插入图片描述

19-js 同步和异步

在这里插入图片描述

20-同步任务和异步任务执行过程

在这里插入图片描述

21-js执行机制

在这里插入图片描述

3-12 location、navigator、history对象

22-location对象常见属性

在这里插入图片描述

23-5秒钟之后跳转页面

在这里插入图片描述

24-获取URL参数

在这里插入图片描述

25-location常见方法

在这里插入图片描述

26-navigator对象

在这里插入图片描述

27-history对象

在这里插入图片描述

3-13 offset、client、scroll三大家族介绍及案例应

01-PC端网页特效导读

在这里插入图片描述

02-offsetLeft和offsetTop获取元素偏移

在这里插入图片描述

03-offsetWidth和offsetHeight获取元素大小
04-offset与style区别

在这里插入图片描述

05-获取鼠标在盒子内的坐标

在这里插入图片描述

06-拖动模态框（上）

在这里插入图片描述

07-拖动模态框（中）

在这里插入图片描述

08-拖动模态框（下）
09-仿京东放大镜效果页面结构搭建

在这里插入图片描述

10-仿京东放大镜效果显示隐藏遮挡层和大盒子

在这里插入图片描述

11-仿京东放大镜效果遮挡层跟随鼠标
12-仿京东放大镜效果限制遮挡层移动范围

在这里插入图片描述

13-仿京东放大镜效果大图片移动

在这里插入图片描述

14-client系列

在这里插入图片描述

15-立即执行函数

在这里插入图片描述

16-淘宝flexibleJS源码分析之核心原理
17-淘宝flexibleJS源码分析之pageshow事件

在这里插入图片描述

18-scroll系列

在这里插入图片描述

19-仿淘宝固定侧边栏（上）

在这里插入图片描述

20-仿淘宝固定侧边栏（下）

在这里插入图片描述

21-三大系列总结

在这里插入图片描述

3-14 缓动动画的原理和封
一

22-mouseover和mouseenter区别

在这里插入图片描述

23-动画原理

在这里插入图片描述

24-简单动画函数封装

在这里插入图片描述

25-动画函数-给不同元素记录不同定时器

二

01-缓动动画原理

在这里插入图片描述

02-缓动动画基本代码实现
03-缓动动画多个目标值之间移动

在这里插入图片描述

04-缓动动画添加回调函数

在这里插入图片描述

05-动画函数的使用

3-15 网页轮播图实现

01-缓动动画原理
02-缓动动画基本代码实现
03-缓动动画多个目标值之间移动
04-缓动动画添加回调函数
05-动画函数的使用
06-网页轮播图-结构搭建

在这里插入图片描述

07-网页轮播图-鼠标经过显示隐藏左右按钮

在这里插入图片描述

08-网页轮播图-动态生成小圆圈

在这里插入图片描述

09-网页轮播图-小圆圈排他思想

在这里插入图片描述

10-网页轮播图-点击小圆圈滚动图片

在这里插入图片描述

11-网页轮播图-右侧按钮无缝滚动

在这里插入图片描述

12-网页轮播图-克隆第一张图片

在这里插入图片描述

13-网页轮播图小圆圈跟随右侧按钮一起变化

在这里插入图片描述

14-网页轮播图-两个小bug解决方案

1、重新播放直接回到了第二张图片；
2、播放相差1个像素。

15-网页轮播图-左侧按钮功能制作
16-网页轮播图-自动播放功能

在这里插入图片描述

3-16 节流阀、返回顶部及筋斗云案例

17-节流阀以及逻辑中断应用

在这里插入图片描述

19-筋斗云案例

在这里插入图片描述

3-17 移动端轮播图实现
一

20-移动端网页特效导读

在这里插入图片描述

21-移动端touch触摸事件

在这里插入图片描述

22-移动端TouchEvent触摸事件对象

在这里插入图片描述

23-移动端拖动元素

在这里插入图片描述

二

01-移动端轮播图-结构搭建

在这里插入图片描述

02-移动端轮播图-布局分析

在这里插入图片描述

03-移动端轮播图-滚动图片

在这里插入图片描述

04-移动端轮播图-无缝滚动

在这里插入图片描述

05-classList类名操作

在这里插入图片描述

06-移动端轮播图-小圆点跟随变化

在这里插入图片描述

07-移动端轮播图-手指拖动轮播图
08-移动端轮播图-手指滑动播放上一张下一张图片
09-移动端轮播图-回弹效果
10-返回顶部模块制作

在这里插入图片描述

3-18 移动端插件使用及轮播图的实现

11-移动端click事件300ms延时问题解决方案

在这里插入图片描述

12-fastclick插件使用

在这里插入图片描述

13-swiper插件使用-引入相关文件

在这里插入图片描述

14-移动端轮播图-按照语法规范使用

在这里插入图片描述
https://swiper.com.cn/usage/index.html

15-swiper插件使用-参数更改
16-移动端其他插件以及使用总结

在这里插入图片描述

17-视频插件zy.media.js的使用

在这里插入图片描述

18-bootstrap轮播图

在这里插入图片描述

19-阿里百秀轮播图制作

在这里插入图片描述

3-19 HTML5本地存储及记住用户名案例

20-本地存储导读

在这里插入图片描述

21-本地存储之sessionStorage

在这里插入图片描述

22-本地存储之localStorage

在这里插入图片描述

23-记住用户名案例

在这里插入图片描述