补充+复习

Posted 2021-01-31 mo123

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了补充+复习相关的知识，希望对你有一定的参考价值。

一事件对象

1. 事件event：浏览器上的行为。一个是mouse 一个是key

2. 需要去记下所有的mouse和key事件

3. 每个事件都是元素天生自带的，每当我们给这个事件绑定方法（函数）的时候，浏览器就会默认有一个参数叫mouseevent和keyevent。所有鼠标和键盘的信息都存在这个对象上。有兼容性？？

event不一样需要统一 var ev=ev||window.event
事件源不统一 ev.srcElement||ev.target
事件冒泡

(1) 嵌套元素的同一事件都绑定方法的时候，当触发子元素的事件时，执行完毕会接着触发父级元素身上的同一事件，这就叫冒泡。

(2) 取消冒泡的方法

ev.stopPropagation？ev.stopPropagation():ev.cancelBubble=true

(3) 事件委托

子元素将自己的事件都委托给父级，点的时候还是点子元素，但是这个方法绑在他的父级身上，然后父级通过ev.target找到这个事件时那个孩子委托的。

阻止事件默认行为
事件捕获

(1) 嵌套元素的同一事件都绑定方法的时候，当触发子元素身上的事件时，会先执行父级的事件，然后依次传递执行子级的事件，和叫捕获。

给元素事件绑定方法

Div.onclick=function(){}

Div.addEventListener(“click”,function(){},false)

第二种的写法ie不支持，ie有自己的写法

Div.attachEvent(“onclick”,function(){})

给元素取消事件

(1) Div.onclick=null

(2) Div.removeEventListener(“click”,fn,false)

注意：如果取消事件，三个参数和定义的三个参数必须一一对应，且不能使用匿名函数

针对事件对象案例是拖拽

取消事件

div.onclick=null
Div.removeEventListener(“click”,fn,false)
div.detachEvent(“onclick”,fn,false)

DOM回流

一个父级原先有三个div,当我们通过DOM操作给追加第四个div时，浏览器会重新加载前三个div，当追加第五个div，浏览器会再次重新加载前四个，当追加第六个时，浏览器会再次重新加载前五个div。这种现象叫DOM回流。会影响页面整体性能，消耗资源。

解决DOM回流的方法用文档碎片。

案例分析

如果给一个父级的所有子元素添加同一个事件，尽量不要获取所有的子元素通过for循环去添加事件，会造成DOM回流，用事件委托的方法去添加事件。

案例拖拽放大镜原理碰撞检测碰撞交换位置

二类

什么是类？分两种一种是浏览器自带的(Function，Math，Date，RegExp，String，Array，Number，Boolean)，一种是人为定义的（function Person(){}/class Person{}）。

基类:Object

案例分析数组为例

定义数组的方法

Var a=[12,23] 自变量定义

Var a=new Array(12,56) 类的实例化

三 apply call bind 继承

会使用它们三就行

四 BOM

浏览器对象模型，本质也是一个对象，而这个对象的大量方法都存在window下

Window.open(参数1，参数2)

参数1是地址可选如果是空白代表打开一个空白页

参数2 是打开方式是当前页打开还是新建一个页面打开

如果是空表示打开一个新前页 _self 打开当前的

Window.close() 只能关闭靠open打开的页面

浏览器用户信息

Window.navigator.userAgent

浏览器地址信息

Window.location

Window.location这个属性又是一个对象

Window.location.href整个地址

Window.location.search get提交的参数

Window.location.hash 哈希值做路由的

浏览器的历史记录

Window.history

前进

Window.history.forward()

前进的是最新打开的那个页面

后退

Window.history.back()

12.25

Cookie 就是一个存放数据的东西，存储量很小4KB，存放在客户端上和应用设备上。

应用场景

用户注册，用户登录，购物车。

Chrome浏览器在计算机中存放cookie的位置

C:UsersAdministratorAppDataLocalGoogleChromeUser DataDefaultCache

Chrome浏览器如何查看cookie和删除cookie

找到设置
点高级
内容设置
Cookie
删除cookie

案例1

我们今天登录了一个京东账号。过几天重新打开京东这个页面，发现账号还在登录状态上。这个就是存在客户端。使用cookie

案例2

我在北京用京东扔了一件衣服在购物车，我爸妈在老家用我的账号登录，发现了我的购物车有这件衣服。这种是存在服务器上的叫session

设置cookie

Cookie是document对象的一个属性，值是string类型。

但是里面书写的格式用名值对 name=value 键值对 key:value

Cookie中的值每个名值对用分号;隔开。所以我们设置cookie这样设置

document.cookie=“user=zhng;name=li;age=45”

设置cookie的生命周期

设置cookie的生命周期使用 expires这个名，单位是天，现在出一个新的名叫max-age 单位是秒。

删除cookie

将生命周期提前结束，就是删除cookie

获取cookie

借鉴string的split()方法

面试题

var arr=[12,56,12,23,56,2,56,89];将数组转化成json 属性是里面的元素,属性值是元素出现的个数

这是结果

封装一个获取cookie的方法

function getcookie(keys){

var arr=document.cookie.split(";");

for(var i=0;i<arr.length;i++){

var ass=arr[i].split("=");

if(ass[0].trim()==keys){

return ass[1];

}

return false;

}

有些浏览器不识别汉字需要编码

encodeURIComponent() 对汉字进行编码

decodeURIComponent() 对编码的结果进行解码

谷歌存放的cookie的位置

C:UsersAdministratorAppDataLocalGoogleChromeUser DataDefault

怎么在谷歌下看cookie

chrome://settings/siteData

点浏览器设置--》高级--》隐私设置和安全性--》内容设置---》cookie

chrome://settings/content/cookies

设置cookie

Document.cookie=”user=zhang”

每个cookie值是以名值对的形式 name=value的形式存储，并且之间用;隔开

设置cookie的时长用expries设置时间单位是天现在推荐使用 max-age单位是秒

删除cookie就是是时间为过去时间就可以了

获取cookie：

//存cokie
function setcookie(keys,value,time){
document.cookie=keys+"="+decodeURIComponent(value)+"domain=127.0.0.1;max-age="+time;
}

//取cookie
function getcookie(keys){
var arr=document.cookie.split(";");
for(var i=0;i<arr.length;i++){
var ass=arr[i].split("=");
if(ass[0].trim()==keys){
return ass[1];
}
}
return false;
}
//删cookie
function delcookie(){
var arr=document.cookie.split(";");
for(var i=0;i<arr.length;i++){
var ass=arr[i].split("=");
document.cookie=ass[0]+"=;max-age=0"
}
}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="btn">删除</button>
</body>
</html>
<script>
// 存cookie
// document.cookie="name=value;max-age="
function setcookie(name,value,time){
document.cookie=name+"="+decodeURIComponent(value)+";max-age="+time*24*60*60;

}
setcookie("user","list",2)
setcookie("age",32,3)
// console.log(document.cookie)
//取cookie
function getcookie(name){
var arr=document.cookie.split(";")
// ["user=list","age=32"]
for(var i=0;i<arr.length;i++){
var ass=arr[i].split("=")
// ["user","list"]["age"=32]
if(ass[0].trim()==name){
return decodeURIComponent(ass[1])
}
}
return false;
}
console.log(getcookie("age"))
// 删cookie
function delcookie(){
var arr=document.cookie.split(";")
for(var i=0;i<arr.length;i++){
var ass=arr[i].split("=")[0];
document.cookie=ass+"=;max-age=0"
}
}
document.getElementById("btn").onclick=function(){
delcookie()
console.log(document.cookie)
}
</script>

面向对象

作用域

栈内存 js执行的环境（作用域）

堆内存存放代码的空间存放方式键值对的形式存字符串的形式存

Js代码在执行之前，浏览器会给他一个全局作用域叫window，每个作用域下分连个模块，一个是内存模块，一个是执行模块。内存模块会给所有的变量一个内存地址。变量的声明在js中靠关键字var 和function 。

2.什么时候会有作用域的形成？

浏览器天生有一个全局的叫window

函数执行的时候会形成一个私有的。

Js在执行之前，浏览器会给他一个全局作用域叫window，在window下分两个模块，一个是内存，一个是执行，内存会找到所有的关键字var和function 对变量进行提前声明（这个功能叫变量提升）给每个变量分配一个内存地址。在执行模块遇到变量首先会在自己的作用域下通过内存地址去查找这个变量是否存在，如果有就直接操作，没有就向他的上一级作用域的内存模块查找，如果有就操作，没有就继续向上查找，直到window。这种查找机制叫作用域链。

变量命名冲突

如果普通变量和函数变量命名相同，最后保留函数变量。

3.= 赋值运算

1.赋值运算，就是把后面的数据赋值给等号前面的变量。

后面的数据分两种情况