D27
464(掌握)事件-鼠标常见的事件演练
-
常见的鼠标事件
-
案例
464.1(掌握)mouseover和mouseenter的区别
- mouseenter和mouseleave
- 不支持冒泡
- 进入子元素依然属于在该元素内,没有任何反应
- mouseover和mouseout
- 支持冒泡
- 进入元素的子元素时
- 先调用父元素的mouseout
- 再调用子元素的mouseover
- 因为支持冒泡,所以会将mouseover传递到父元素中;
464.2(掌握)mouseover和mouseenter应用的区别
- mouseover和mouseenter应用区别,over可以用在事件委托上,enter不可以
464.3(掌握)事件-键盘常见的事件和案例
-
常见的键盘事件
-
事件执行顺序:onkeydown,onkeypress,onkeyup
- down事件先发生
- press发生在文本被输入
- up发生在文本输入完成(抬起,松开)
-
key和code
- code:“按键代码”(“KeyA”,“ArrowLeft” 等),特定于键盘上按键的物理位置。
- key:字符(“A”,“a” 等),对于非字符(non-character)的按键,通常具有与 code 相同的值。)
主要区别:key区分大小写,code不区分
465(掌握)事件-表单常见的事件演练
- 常见的表单事件
- 表单事件案例
466(掌握)事件-监听文档加载事件
-
DOMContentLoaded:浏览器已完全加载 HTML,并构建了 DOM 树,但像 < img> 和样式表之类的外部资源可能尚未加载完成。
-
load:浏览器不仅加载完成了 HTML,还加载完成了所有外部资源:图片,样式等。
https://developer.mozilla.org/zh-CN/docs/Web/Events
468(掌握)window定时器用法的详细解析
-
有时我们并不想立即执行一个函数,而是等待特定一段时间之后再执行,我们称之为“计划调用(scheduling a call)”。
-
计划调用的两种方法
- setTimeout 允许我们将函数推迟到一段时间间隔之后再执行。
- setInterval 允许我们重复运行一个函数,从一段时间间隔之后开始运行,之后以该时间间隔连续重复运行该函数。
-
取消方法
-
clearTimeout:取消setTimeout的定时器;
-
clearInterval:取消setInterval的定时器;
-
469(掌握)案例实战-消息轮播展示
470(掌握)案例实战-m站头部移除
471(掌握)案例实战-侧边栏展示实现一
-
实现侧边栏展示
-
方案一:mouseenter(不用事件委托)
-
方案二:mouseover(使用事件委托)
-
473(理解)案例实战-侧边栏展示动画方向
- 动画方向为什么设置成right:35px,而不设置成left:-62px?
474(掌握)案例实战-tabControl的active切换
474.1(掌握)案例实战-王者轮播图实现(一)
476(理解)案例实战-侧边栏的实现-禁止事件
- 添加CSS属性:icon和name添加pointer-event: none,这样当鼠标进入icon和name中时,会禁止鼠标交互
477(掌握)案例实战-王者轮播图-定时器
478(掌握)案例实战-王者轮播图-代码重构
- 封装一个切换轮播的函数然后进行调用
-
代码重构的逻辑思路
- 把重复的代码进行封装,然后再调用
- 把重复的代码进行封装,然后再调用
479(掌握)案例实战-王者轮播图-移除定时器
479.1(理解)案例实战-王者轮播图-默认轮播效果
- 默认轮播图的思路
- 1.每个image对应的item的位置问题
- for循环判断索引
- 小于currentIndex,排在左边
- 等于currentIndex,放在中间
- 大于currentIndex,排在右边
- for循环判断索引
- 2.谁身上有动画,谁身上没有动画
- currentIndex需要动画
- 原来在中间的位置的那个元素需要动画
- 1.每个image对应的item的位置问题
481(掌握)案例实战-购物车-数据的展示
482(掌握)案例实战-购物车-删除的操作
- 删除按钮 > 删除那一行 > 重新计算价格
483(了解)案例说明和BOM的概览
484(理解)BOM-认识BOM浏览器对象模型
- BOM:浏览器对象模型(Browser Object Model)
- 由浏览器提供的用于处理文档(document)之外的所有内容的其他对象;
- 比如location,history等对象
- JavaScript有个非常重要的运行环境—浏览器
- 浏览器本身又作为一个应用程序需要对其本身进行操作;
- 所以通常浏览器会有对应的对象模型(BOM,Browser Object Model);
- 我们可以将BOM看成是连接JavaScript脚本与浏览器窗口的桥梁;
- BOM主要包括以下对象模型
- window:包括全局属性、方法,控制浏览器窗口相关的属性、方法;
- location:浏览器连接到的对象的位置(URL);
- history:操作浏览器的历史;
- navigator:用户代理(浏览器)的状态和标识(很少用到);
- screen:屏幕窗口信息(很少用到);
485(掌握)BOM-window对象的使用
-
window对象在浏览器中可以从两个视角来看待:
- 视角一:全局对象
- 视角二:浏览器窗口对象
-
window对象包含大量的属性,方法和事件,还有从EventTarget继承过来的方法
-
MDN文档查询:https://developer.mozilla.org/zh-CN/docs/Web/API/Window
486(掌握)BOM-location对象的使用
-
location对象用于表示window上当前链接到的URL信息。
-
常见的属性:
- href: 当前window对应的超链接URL, 整个URL;
- protocol: 当前的协议;
- host: 主机地址;
- hostname: 主机地址(不带端口);
- port: 端口;
- pathname: 路径;
- search: 查询字符串;
- hash: 哈希值;
-
案例展示
-
location对象常见的方法
- assign:赋值一个新的URL,并且跳转到该URL中;
- replace:打开一个新的URL,并且跳转到该URL中(不同的是不会在浏览记录中留下之前的记录);
- reload:重新加载页面,可以传入一个Boolean类型;
-
URLSearchParams定义了一些实用的方法来处理 URL 的查询字符串。
-
- get:获取搜索参数的值;
- set:设置一个搜索参数和值;
- append:追加一个搜索参数和值;
- has:判断是否有某个搜索参数;
-
MDN文档查询:https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchParams
-
中文会使用encodeURIComponent和decodeURIComponent进行编码和解码
487(掌握)BOM-history对象的使用
- history对象允许我们访问浏览器曾经的会话历史记录
- 两个属性
- length:会话中的记录条数
- state:当前保留的状态值
- 五个方法
- back():返回上一页,等价于history.go(-1);
- forward():前进下一页,等价于history.go(1);
- go():加载历史中的某一页;
- pushState():打开一个指定的地址;可以返回上一级
- replaceState():打开一个新的地址,并且使用replace;不可以返回上一级
- 两个属性
488(了解)BOM-navigator和screen对象
-
navigator 对象表示用户代理的状态和标识等信息。
-
screen主要记录的是浏览器窗口外面的客户端显示器的信息:
- 比如屏幕的逻辑像素 screen.width、screen.height;
489(掌握)JSON-JSON的由来和应用场景
-
JSON是一种可以在服务器和客户端之间传输的数据格式。
-
JSON的全称是JavaScript Object Notation(JavaScript对象符号):
- 是一种轻量级资料交换格式,算是JavaScript的一个子集
- 可以独立于编程语言,在哥哥编程语言中使用
- 很多编程语言都实现了将JSON转成对应模型的方式;
-
其他的传输格式
- XML
- Protobuf:可能会取代JSON
-
JSON的使用场景
- 网络数据的传输JSON数据;
- 项目的某些配置文件;
- 非关系型数据库(NoSQL)将json作为存储格式
490(掌握)JSON-JSON的基本语法格式
-
JSON的顶层支持三种类型的值
- 简单值:数字(Number)、字符串(String,不支持单引号)、布尔类型(Boolean)、null类型;
- 对象值:由key、value组成,key是字符串类型,并且必须添加双引号,值可以是简单值、对象值、数组值;
- 数组值:数组的值可以是简单值、对象值、数组值;
491(掌握)JSON-JSON的序列化和反序列化
- 某些情况下我们希望将JavaScript中的复杂类型转化成JSON格式的字符串
- 如果我们直接存放一个对象,这个对象会被转化成 [object Object] 格式的字符串,这样不行
- JSON全局对象,该对象有两个常用的方法
- stringify方法:将JavaScript类型转成对应的JSON字符串;
- parse方法:解析JSON字符串,转回对应的JavaScript类型;
492(理解)JSON-stringify和parse方法的补充
- JSON.stringify() 方法将一个 JavaScript 对象或值转换为 JSON 字符串:
- 如果指定了一个 replacer 函数,则可以选择性地替换值;
- 如果指定的 replacer 是数组,则可选择性地仅包含数组指定的属性;
- stringify的参数space:表示转成对象格式前面会空几个格子
- 如果对象本身包含toJSON方法,那么会直接使用toJSON方法的结果:
- JSON.parse() 方法用来解析JSON字符串,构造由字符串描述的JavaScript值或对象。
495(理解)for循环中监听函数中打印变量(一)
496(理解)for循环中监听函数中打印变量(二)
- 注意代码执行顺序,循环里的变量会依次往上找
- 拿到对应的btnItemEl的两个方案
- 直接获取this
- 先获取索引
498-499(掌握)华为商城-导航-操作界面搭建
13阶段行项目-华为商城>1商品列表-界面搭建
500(掌握)华为商城-动态商品列表的展示
13阶段行项目-华为商城>2商品列表-动态列表
- 这种方式适合和用户交互
501(掌握)华为商城-动态商品列表的展示
-
获取图片比较麻烦,需要对资源服务器的地址和图片路径和图片名称进行拼接,中间还需对比华为商城官网的图片网址,添加428_428或800_800_这样的数字
-
这种方式适合展示用,不适合和用户交互用
502(掌握)华为商城-优惠服务的点击处理
- 过滤算法原理
503(掌握)华为商城-服务优惠的点击过滤展示
- 作用域的提升
-
服务优惠的点击过滤和展示函数封装
-
过滤与展示的过程
1.获取服务优惠中的item
2.监听item的点击
* 切换active
3.根据item的点击获取filterItem
* 将其放在一个数组中
4.根据最新的filter,过滤数据
* filterResultListAction
5.根据过滤的最新数据进行展示
* showResultListAction
504(理解)数据过滤-颜色选择的算法
505(掌握)华为商城-最后一行的布局处理
506(掌握)华为商城-轮播图界面基本搭建
507(掌握)华为商城-轮播图图片动态数据展示
508(掌握)华为商城-轮播图的控制按钮处理
509(掌握)华为商城-轮播图的自动轮播效果
511(掌握)华为商城-轮播图指示器的动态展示
512(掌握)华为商城-轮播图指示器的切换操作
513(掌握)华为商城-轮播图位移动画的实现
514(掌握)华为商城-轮播图的无限轮播效果
515(掌握)华为商城-轮播图的定时器处理
- 处理窗口失去焦点时,停止自动播放
517(掌握)商品列表数据的排序实现
519(掌握)this绑定-三条绑定规则的回顾
- this指向
- 1.函数在调用时,JavaScript会默认给this绑定一个值;
- 2.this的绑定和定义的位置(编写的位置)没有关系;
- 3.this的绑定和调用方式以及调用的位置有关系;
- 4.this是在运行时被绑定的;
-
this绑定规则一:默认绑定
- 函数被独立调用,this就指向window
- 函数被独立调用,this就指向window
-
this绑定规则二:隐式绑定
- 函数在调用的这一刻,由谁发起,就绑定谁
- 函数在调用的这一刻,由谁发起,就绑定谁
-
this绑定规则三-new绑定
520(掌握)this绑定-显示绑定的规则
- 用call和apply方法
521(掌握)this绑定-apply-call的显示绑定
- JavaScript所有的函数都可以使用call和apply方法
- 第一个参数是相同的,要求传入一个对象,调用函数时,会将this绑定到这个传入的对象上
- 后面的参数,apply为数组,call为参数列表
- 因为上面的过程明确的绑定了this指向的对象,所以称之为显式绑定
522(掌握)this绑定-bind的显式绑定
- 如果希望一个函数总是显示的绑定到一个对象上用bind方法
- 使用bind方法,bind() 方法创建一个新的绑定函数(bound function,BF);
- 绑定函数是一个 exotic function object
- 在 bind() 被调用时,这个新函数的 this 被指定为 bind() 的第一个参数,而其余参数将作为新函数的参数,供调用时使用
523(掌握)this绑定-内置函数的this思考
- 有些内置函数会要求我们传入另外一个函数
- 我们自己并不会显示的调用这些函数,而且JavaScript内部或者第三方库内部会帮助我们执行;
524(掌握)this绑定-this绑定的优先级比较
- 绑定this的优先级顺序(高-低)
- new
- bind
- apply/call
- 隐式绑定
- 默认绑定
525(了解)this绑定-this绑定的规则之外的情况
- 如果在显示绑定中,我们传入一个null或者undefined,那么这个显示绑定会被忽略,使用默认规则:
- 情况二:创建一个函数的间接引用,这种情况使用默认绑定规则
- 赋值(obj2.foo = obj1.foo)的结果是foo函数;
- foo函数被直接调用,那么是默认绑定
526(掌握)箭头函数-箭头函数的用法和简写规则
-
箭头函数不会绑定this、arguments属性;不能和new一起使用
-
箭头函数编写
-
(): 函数的参数
-
{}: 函数的执行体
-
527(掌握)箭头函数-箭头函数中this查找的应用
- 注意作用域:只有代码块和函数才能形成作用域
- 箭头函数中的this应用
529(掌握)this指向题目一/二
-
this指向题目1
-
this指向题目二
530(掌握)this指向-题目三
- this指向题目三
531(掌握)this指向题目四
- this指向题目四