一 事件对象
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
谷歌存放的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.赋值运算，就是把后面的数据赋值给等号前面的变量。
后面的数据分两种情况
- 后面是简单的基本数据类型 number string boolean null undefined 直接就是将数据赋给前面的变量
- 后面的如果是复合数据类型 array object function 将内存地址赋值给前面的变量。
4.object和json二者
1.长的一样，都以键值对的形式书写，object的key可以不加引号，但是json必须加
2.object是前端的数据类型，json是数据库存放的数据格式。
5.object 对象
1.对象的定义
字面量定义 var obj={name:”张三”}
类的实例 var obj=new Object() obj.name=”张三”;
类的阶梯
类的本质是function
类和实例的关系
1.每个类(函数)都有一个prototype的属性，这个属性是一个对象，里面有一个constructor的属性,属性值就是这个类本身。
2.每个实例（对象）都有一个__proto__的属性，这个属性也是一个对象，它指向当前类的原型。
3.prototype和__proto__
二者都叫原型，前者是存放属性的对象，后者是查找属性的，前者给开发者使用，后者给浏览器使用。