前端学习第三阶段-第3章 WebAPI编程
创始人
2025-05-29 02:22:49
0次

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

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

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：Map集合体系、集合的嵌套

下一篇：Nginx加载静态资源；反向代理实现负载均衡

相关内容

热门资讯

FIBA期待杨瀚森表现 最新实... 北京时间6月25日消息，FIBA国际篮联公布了最新一期世界杯预选赛亚太区球队实力榜，中国男篮排在澳大...
收评：创业板指放量反弹涨2.8... 市场冲高回落后，再度震荡拉升。黄白线分化明显，权重股走势较强。量能明显放大，沪深两市成交额3.59万...
巨头财报引爆A股存储芯片板块，... 当地时间6月24日美股盘后， 美光科技（MU.US）公布截至5月31日的2026财年第三财季财报，业...
银行、消金公司助贷余额增速不得... 近日，中国证券报记者从多位业内人士处独家获悉，5月以来，多地金融监管部门对部分中小银行、消金公司下达...
朱鸿接任陈航，担任钉钉科技有限... 消费日报-今朝新闻讯 天眼查显示，6月23日，钉钉科技有限公司发生工商变更，陈航卸任法定代表人、董事...
3日累跌超20%，德创环保：公... 6月25日， 德创环保（603177.SH）公告，公司股票于2026年6月23日、6月24日和6月2...
北京发布2026年第七轮拟供商... 央广网北京6月25日消息（记者门庭婷）6月25日，北京市规划和自然资源委员会网站发布了2026年第七...
开放麦 | 启明创投胡奇：从A... “2026年，创投圈的浪潮再次翻涌：AI从技术概念走进产业深水区，硬科技创业从“小众赛道” 变成“主...
腾讯孙忠怀：在行业转身处 6月24日，2026腾讯视频年度发布在上海举行。腾讯公司副总裁、腾讯在线视频董事长孙忠怀以《在行业转...
加息，突变！美联储，重磅传来！... 美联储政策路径突生变数。 美国商务部经济分析局最新公布的数据显示，5月个人消费支出（PCE）物价指数...
6月合肥上门收金必看！5步避坑... 2026年6月，合肥黄金市场持续高位运行，不少市民翻出家里闲置的旧金饰、投资金条想变现，上门回收因为...
潮汕女富豪挂帅后加码液冷！祥鑫... 潮汕女强人，带着百亿公司加码液冷散热。 6月24日晚间，祥鑫科技(002965.SZ)公告称，公司董...
马斯克向太空要电，GobiX ... 一场关于「去哪里找电」的全球竞赛，正在朝两个方向展开。 作者｜周永亮 编辑｜ 郑玄 「太空光伏是不是...
原料药行业陷入周期低谷 有药企... 每经记者｜许立波 每经编辑｜魏文艺 “过完年到现在，我们整个团队每个月都在出差，跑遍了亚非拉、欧美市...
家门口筛查白内障！永顺泽家镇暖... 大众卫生报·新湖南客户端6月25日讯（通讯员 彭雪姣）为切实解决辖区老年性白内障患者异地就医奔波、就...
终于等到！油价马上再大跌，这个... 点击添加图片描述（最多60个字） 编辑 各位车主朋友，好消息接二连三！ 继6月18日油价大幅下调...
丈量出海新路 世界酒庄影响力指... 长期以来，全球酒庄评价体系由西方机构主导，且大多局限于单一酒种、单一评价维度，这一局面正逐渐被打破。...
峰瑞资本创始合伙人李丰：从资本... “2026年，创投圈的浪潮再次翻涌：AI从技术概念走进产业深水区，硬科技创业从“小众赛道” 变成“主...
原创 A... 迈向成熟，还有茁壮成长的机会。 作者 | 方璐 编辑丨于婞 来源 | 野马财经 2026年6月21日...
为企业解锁出海新通道！亚太中小... 6月24日下午，作为2026年APEC中小企业工商论坛的重要组成部分，亚太中小企业国际化合作发展论坛...