前端学习第三阶段-第3章 WebAPI编程
创始人
2025-05-29 05:12:54
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”。

上一篇：额济纳旗胡杨林赏秋最佳时节指南

下一篇：在ubuntu中，如何给一个移动固态硬盘安装ubuntu20.04

相关内容

热门资讯

跟我学c++高级篇——c++模... 一、模板元编程在c++中的发展 模板元编程从本质上看和函数编程有些类似。其实偏底层的...
若依整合Easy-Es实现文章... Easy-Es（简称EE）是一款基于ElasticSearch(简称Es)官方提供的RestHigh...
一家三口去张家界5日跟团游价格... 一家三口去张家界5日跟团游价格，张家界旅游团报价5日游价格表，看这省心又省钱。最近我和老公商量着带娃...
宜昌三峡旅游攻略三日游报团，宜... 最近，我有幸和朋友们一起踏上了前往宜昌三峡的旅程。宜昌三峡，那山清水秀、景色宜人的地方，一直是我向往...
计算机网络 简单FTP客户端软... 一.原理概述 1.1 FTP原理概述 文件传送协议FTP（File Transfer ...
Qt音视频开发23-视频绘制Q... 一、前言 采集到的图片，用painter绘制是最基础的方式，初学者可能第...
原创 腊... 导读：腊肉处理，第一步先泡水还是先煮？大厨教你做法，简单易学真好吃 腊肉作为中国传统美食，承载着深厚...
2025重庆美食“渝味360碗... 5月29日，以“舌尖渝味·全球共享”为主题的2025重庆美食“渝味360碗”嘉年华在九龙坡区巴国城正...
这样吃粽子=喂胃酸？升糖速度是... 明天就将迎来端午节， 粽子是节日绕不开的美食。 如今， 动辄半斤的大粽子越来越流行。 佳节到来之际，...
端午养生正当时，解锁传统佳节里... “五月五日午，赠我一枝艾。”宋代文天祥的《端午即事》道出了端午传统习俗承载着深厚的文化底蕴。作为中国...
行业龙头微念领航螺蛳粉出海 亮... 日前,2025 SIAL 西雅国际食品展在上海新国际博览中心圆满举办。本届西雅展汇集全球35万件特色...
计算机网络(第九弹) --- ...   传输控制协议 TCP 在整个计算机网络中占有很高的地位, 它会控制着网络上数据的传输过程, 当然...
金融“及时雨”润泽南粤文旅，看... 当开平碉楼在夜色中亮起璀璨灯火，当丹霞山索道载着游客掠过云海，当潮州古城的青石板路迎来熙攘人潮，20...
来大连拍哪儿最好看？指南来了！... 晨报讯（半岛晨报、39度视频记者肖崟崟） 5月29日上午，由大连市委宣传部、大连市文化和旅游局、中山...
Kompex::SQLiteD... 使用Kompex::SQLiteDatabase的时候，发现并没有加密的接口ÿ...
2023年华为认证H12-82... 一、什么是HCIP-Datacom 英文名：HCIP-Datacom-Advanced...
【2023-Pytorch-检... 项目下载地址：YOLOV5交通标志识别检测数据集+代码+模型+...
JavaWeb——Repons... 响应体当中的两种的数据格式:字符和字节 Reponse响应字符数据 演示，在get请...
端午节前夕大明湖 水碧树绿美如... 齐鲁晚报·齐鲁壹点记者 周青先端午节前夕，航拍济南大明湖景区。湖水清澈如玉，湖畔树木葱绿，景色仿佛画...
Python3 内置函数 Python3 内置函数 注意：有些函数与 Python2.x 变化不大࿰...