当前位置： 首页 > article >正文

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

article 2024/12/24 9:48:53

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-节流阀以及逻辑中断应用

在这里插入图片描述

  • 18-带有动画的返回顶部

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

  • 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-记住用户名案例

在这里插入图片描述
在这里插入图片描述


http://www.kler.cn/a/1942.html

相关文章：

  • VSCode搭建Java开发环境 2024保姆级安装教程（Java环境搭建+VSCode安装+运行测试+背景图设置）
  • useContext Hook 的使用及规范
  • python面试篇-多并发详解（多线程，多进程，协成整理）---一篇搞定
  • 大腾智能CAD：国产云原生三维设计新选择
  • macOS 配置 vscode 命令行启动
  • 构建高性能异步任务引擎：FastAPI + Celery + Redis
  • 计算机网络体系结构——“计算机网络”
  • HNUCM省赛训练赛第14场题解
  • 48天C++笔试强训 001
  • 【数据结构】链表相关题目（中档题）
  • 【Java版oj】day14计算日期到天数转换、幸运的袋子
  • 代理设计模式
  • 数组模拟单链表
  • Spring 源码解析 - Bean创建过程 以及 解决循环依赖
  • RabbitMQ技术-初级
  • 【C++】类和对象（上）
  • 【C#】List数据去重
  • 性能优化之防抖与节流
  • go语言入门-一文带你掌握go语言函数
  • Mybatis实战
  • 【JS】常用js方法
  • 基于YOLOv5的舰船检测与识别系统（Python+清新界面+数据集）
  • 《高质量C/C++编程》读书笔记一
  • 黑马程序员——前端HTML5+CSS3（女神版）——day01——文本格式化标签、图片标签的title属性、音频标签、视频标签、超链接标签的target属性
  • HTTPS 加密协议
  • Mybatis（一）：环境搭建