前端学习第三阶段-第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加载静态资源；反向代理实现负载均衡

相关内容

热门资讯

在大吉订购APP订购交易亏损被... 　　近期，不少投资者反映在“大吉订购App”上投资白银、铂金等商品遭遇严重亏损。该平台宣称提供现货订...
铂银壹号APP商品订购交易亏损... 　　许多中小投资者误以为网上的“商品现货订购”是合规合法的理财渠道，殊不知这背后隐藏着巨大的合规风险...
兴鑫淘金APP贵金属订购交易亏... 　　白银、贵金属或其他商品类投资，除国家批准的正规期货交易场所及持牌期货公司外，市面上大量第三方交易...
铂银掘金APP无资质的违规平台... 　　铂银掘金等平台的投资者，往往是被“注册送现金”“充值返现券”“首单免亏”等广告话术吸引，进而下载...
八方淘金APP订购交易不合规，... 　　“八方淘金APP”“铂银掘金APP”“铂银壹号APP”等软件被指以“现货订购”为名，实际采用高杠...
在指尖订购APP订购商品亏损被... 　　指尖订购APP这类平台，表面是“订购交易”，实则是披着电商外衣的非法期货陷阱。绝大多数投资者被蒙...
在犀贝易购APP做商品订购交易... 　　市面上打着“现货投资”“贵金属交易”旗号的APP并不少，但真正合规、受监管的平台并不多。犀贝易购...
易达淘金APP虚假商品订购交易... 　　易达淘金APP存在严重的虚假宣传与违规交易行为。该平台打着“商品订购”的旗号，实则通过不合规的交...
大浪淘金APP白银订购亏损被骗... 　　大浪淘金APP最隐蔽的套路，在于其完全封闭的内盘交易系统。表面上，它宣称与国际贵金属市场接轨；实...
一品好购APP上订购白银出现亏... 　　一品好购APP原名“一品订购”，运营方为上海宝智未来信息技术有限公司。近期不少投资者反映在该平台...
九州订购APP贵金属订购投资骗... 　　九州订购APP正通过抖.音、快手、今日头条等平台大量投放投资广告，用“5元起投”“充值返现”“0...
坚锅淘金APP交易软件并不正规... 　　当前，市面上大量所谓的“现货商城订购”交易软件，早已偏离了正常的实物商品买卖，演变为高杠杆、高手...
斗金订购APP贵金属期货交易骗... 　　斗金订购APP的投资者往往被铺天盖地的广告宣传所诱导——注册即送现金、充值返现券等看似诱人的福利...
警惕！云启购APP违规经营，披... 　　"5元起投、充值返现、稳赚不赔"——这些诱人的广告语背后，可能是一个精心设计的金融陷阱。　　近期...
量子淘金APP贵金属投资不合规... 　　"4元起投""充值返券""月入过万"——这些极具诱惑力的广告语在短视频平台、社交软件上铺天盖地。...
鑫汇智投APP贵金属商品订购骗... 　　鑫汇智投APP非法期货投资骗局，受害者在投资过程中根本不懂交易，也不去研究和验证这个平台是否正规...
矅光智策APP平台违规经营非法... 　　矅光智策APP对外宣称是“商城订购”“现货交易”，但查询其经营范围，并未显示具备开展现货期货交易...
黄金珠宝怎么选？内侧刻字都代表... 潮新闻客户端 记者 马焱 通讯员 任倩影 9月8日下午，“云游杭州 乐购金秋”——“浙城·浙放心”活...
原创 冰... 最近全球国债市场正在上演魔幻一幕： 美债、日债、欧债遭遇猛烈抛售，收益率冲到几十年新高，美国财政部都...
日韩股市开盘表现分化 上证报中国证券网讯 9月9日，日韩股市开盘表现分化，韩国综合指数开盘上涨0.26%，报6972.87...