第一天

一.history：

保存了当前串钩的历史纪录（过去的url）

前进：history.go(1);
后退：history.go(-1);
刷新：history.go(0);

二.location对象

保存了当前窗口的正在打开的url（现在的）；

一个url有几部分组成？每部分都用什么用？----五部分

协议;https（加密）/http（未加密）/ftp（传输文件）/ws（直播）--前两个都叫做请求-响应模型。
主机号|IP地址|域名：是需要花钱买的，主机号不是免费的只有自己能访问。
端口号：https默认端口为443，HTTP默认端口为80，只有默认端口可以不写。
文件的相对路径|路由：百度加密了。
查询字符串|请求消息：前端传输到后端，相当于前端对后端说的话。

属性：

获取url的5个部分的内容，直接输入location对象可以查看

协议：location.protocal;
域名：location.hostname;
端口：location.port;
路由：location.pathtion;
请求消息：location.search;
跳转：location=“新值url”//替换当前窗口，可以后退
跳转：location repalce``“新值url”//替换当前窗口，不可以后退
刷新：location.relode();

三.DOM

查找元素：

- 通过关系查找
- 直接查找元素： 1. document.getElementsByname();//返回一个集合，HTMLcollection

var elem=document.querySelector(任意css选择器)//缺点只能找到单个元素，如果匹配到到多个也只就返回一个，没有找到为null，-----var elems=document.querySelectorAll(任意css选择器)。

面试题：document.getxxx和document.queryxxx的区别：后者更适合复杂查找
- 动态集合和静态集合的区别？

动态集合：每次DOM发生变化，他也会悄悄再次查找，让页面和数据保持一致，但是效率变低
静态集合：每次DOM发生变化，他不会悄悄再次查找，让页面和数据保持不一致，但是效率变低

操作样式：内联样式：样式表样式：

//获取想要的样式表：var sheet=decument.stylesheets[i].
//获取此样式表中的说有样式规则：var rules=sheet.cssRules;
数出想要操作的那个规则：`var rules=rule[i]
//操作：console.logCyule.CSS属性名；rule.style.css属性名=“css属性值”

操作属性：

获取属性值：核心DOM：elem.getAttribute("属性名"，"属性值")；-----HTML DOM：elem.属性名。
设置属性值：核心DOM：elem.setAttribute(("属性名"，"属性值");-----HTML DOM：elem.属性名="属性值"
删除属性：设置属性值为空字符串，确实某些属性可以算是删除，但是只是删除的属性值，属性名还在，而有的属性哪怕只有一个属性名也具有作用（比如：href，disiabled，readonly）。核心：DOM：elem.removeAttribute("属性名")----HTML DOM：elem.属性名="";//属性节点删除不干净
判断有没有：只能判断有没有，不能判断是什么，推荐使用elem.getAttribute("属性名")；去读取到值自己再写比较运算。核心：DOM:elem.hasAttribute;---HTML DOM:elem.属性名!="";

建议：优先HTML DOM，HTML MOD实现不了的再用核心补充 -----------操作内容：innerHTML/innerText/value

如何创建元素以及上树

创建空标签;var elem=document.createEement("标签名")
为其设置必要的属性和事件：elem.属性名="属性值"；---elem.on事件名=function(){};
上树：

父元素.appendChild(elem):在父元素末尾处追加一个子元素elem
父元素：insertBefore(elem,已有子元素)；在父元素追加一个子元素，放在已有子元素的前面
父元素：replaCeild(elem,已有子元素)；在父元素追加一个子元素，替换掉已有子元素

删除元素：elem.remove();

扩展： 创建变量：新增的一个let关键字---let变量名=值； 作用：

解决了声明提前
带来了块级作用域，一个{}就是一块，此变量只能在{}中使用
如果用let去当作下标绑定事件，那么它会记录着当前水元素的下标，不再需要自定义下标-其实forEach的那个形参就是let创建的

类数组转为普通数组：接住=Array.from(类数组对象)

第二天

1.递归

就是在函数之中再一次调用函数自己，迟早有一天会停下来。何时使用：专门用于遍历层级不明确的情况--DOM树和数据children，只能找到儿子，不能找到孙子。

如何使用：

    function 函数名（root）{
    //第一层要做什么直接做
    //判断下一层有没有，如果有下一层就在调用此方法只不过传入的实参是自己的下一层
}函数名（实际的根）
//算法深度优化：优先遍历当前节点的子节点，子节点遍历完毕才会跳到兄弟节点；
//缺点：不要过多使用，性能相对较差，同时开启大量的函数调用浪费内存，只在层级不明确的时候使用

递归VS纯循环

递归：优点：简单易用缺点：性能低

纯循环：优点：几乎不占用性能缺点：操作难

2.操作事件的3中方式

在HTML中写事件：<elem on事件名="函数名()"> 缺点：

不符合内容与样式与行为的分离原则
无法动态绑定，一次只能绑定一个元素
不支持绑定多个函数对象

在JS使用事件处理函数属性 elem on事件名=function(){操作} 优点：

符合内容与样式与行为的分离原则
动态绑定一次能绑定多个元素
不支持绑定多个函数对象

在JS中使用事件API：不考虑；老IE的情况下用
主流：elem.addEventListener("事件名"，callback)；
老IE：elem.attachEvent("on事件名"，callback)；
兼容:

elem.addEventListener("事件名"，callback)；
}else{
elem.attachEvent("on事件名"，callback)；
}
//优点：
- 符合内容与样式与行为的分离原则
- 动态绑定
- 支持绑定多个函数对象
缺点：有兼容问题

扩展： select&option只有他们可以简化创建元素&上树； select.add(new Option("innerHTML","value"))

第三天

属于DOM重点：定时器和event。 1. 事件周期：从事件发生到所有时间处理函数执行完毕的过程。

捕获阶段：由外向内，记录要发生的时间有哪些
目标优先触发：目标元素->当前点击的实际发生事件的元素
冒泡触发/委托事件：由内向外，依次执行之前记录着要发生的事件 2. 获取事件对象event：
主流：会自动作为事件处理函数的第一形参传入
老IE：event全局有这个变量
兼容：event：都可以用

3. 事件对象event的作用：

1. 获取鼠标坐标：

获取鼠标相对于屏幕的坐标：e.screenX/Y
获取鼠标相对于窗口/客户端/文本显示区域的坐标：e.clientX/Y
获取鼠标相对于网页的坐标：e.pageX/Y

2阻止冒泡：笔试面试中考

主流：e.stopPropagetion():
老IE:e.canceBubble=true;
兼容:e.canceBubble=true;

利用冒泡事件：开发中常用，提升网页性能，事件函数可以换为箭头函数

优化：如果多个子元素做相同或者相似的操作，最好只给父元素定义一次。因为：每一次绑定函数其实就是创建了一个事件对象，创建的对象越多网站性能越差；

新元素：target：点击了哪个永远就是哪个

主流：e.target;
老IE:e.srcElement:
兼容:e.srcElement:

新事件：

右键事件：window.oncontextmenu；
键盘事件：

都要搭配上键盘的键码--window.onkeydown按住和按下都触发
window.onKeypress--按住和按下，字母数字回车和空格都可以触发
windown.onKeyup--松开，任何按键都可以触发

获取键盘键码

e.keyCode:--可以获取到按的哪个键，每个键都有自己的键码。
event面试题要考

第四天

一.事件的取消绑定

如果使用elem.onclick=()=>{},那么elem.onclick=null
如果使用elem.addEventListener("事件名"，回调函数)那么elem.removeEventLiener("事件名"，回调函数);事件名和回调函数必须和添加时的一样

二.this的指向

单元素绑定事件：this->这个元素；
多个元素绑定事件：this->当前元素；
箭头函数中：this->外部对象；
函数中的thisthis->当前正在调用函数的这个人；
定时器：this->window；

三.强制改变this指向

Call/apply：临时替换函数的this--借用：语法：

函数名.call(借用的对象，实参)单独传入每个实参
函数名.apply(借用的对象，arr)传入要求是数组---apply会悄悄打散数组，call/apply相当于立即调用函数，立即执行
bind永久替换了函数中的this--相当于买：

创建了一个和原函数功能呢=完全相同的新函数
将新函数的this永久绑定了指定函数，借不走
将新函数的部分参数永久固定

语法：var 新函数=函数名.bind(永久对象，永久实参，....)需要自己调用

强调：bind绑定的函数没办法被call/apply借走。

三个固定套路：

Math.max/min.apply(Math.arr)//也能支持数组参数；
Object.prototype.toSting.call/apply(x)===[object Array]//判断xx是不是数组
类数组转为普通数组：

接住=Array.prototype.slice.call/apply(类数组对象)
接住=Array.from()类数组对象

四.ES6

学过了：let const关键字，箭头函数
模板字符串：可以直接识别变量，不再需要加运算而且实现了一个简单的JS环境，甚至支持写API--例子：我的名字叫${name}

解构赋值：解析结构再进行赋值的新方式，并且得到了增强，如果赋值符号左右两边结构一样就会悄悄解开脱掉结构一一赋值。语法：

 1.类是数组的解构赋值：
 let[a,b,c]=[1,2,3]
 console.log(a);
  console.log(a);
   console.log(a);
  
  2.类是对象的解构赋值
  let{a,b,c}={c:3,a:1,b:2}//不设置值则为0
    console.log(a);
  console.log(a);
   console.log(a);
   
   3.调用函数时，传递的实参的顺序无所谓
   function zwjs({name,age,hobby="女"}){
   return `我的名字叫${name}，今年${age}岁，喜欢${hobby}`；
   }
   console.log(zwjs({hobby:"学习"，age：18，name：“某某某”}))；
   4.函数的返回结果可以有多个
   function f1(){
   var a=1;
   var b=2
   return[a,b]
   }
   var [a,b]=f1();
   console.log(a,b)
   //只要见到方法名（{里面放着键值对就是使用了ES6的解构赋值}）

4.set和Map新的数据类型

1.set：类似与数组的一种数据格式--[去重数组，然后再转为数组]：var s=new set（arr）--...s三个点扩展运算符，可以脱掉外套----[...new set(arr）]

2.Map:类似于对象的已知数据格式 var m=newMap();

- 添加：m.set("键","值")；
- 获取：m.get("键")；
- 清空：m.clear()；
- 删除：m.delete("键")；

新的循环： for(var v of arr){v;} 缺陷：

没有提示下标，意味着不能修改原数组
只能遍历索引数组，不能遍历hash数组，意味着也不能遍历对象

第五天

一.正则表达式

定义字符串中字符出现规则的表达式：

何时使用：切割，替换【验证】：
如何使用：语法：/正则表达式/

1.关键字原文：

“no”==>/no/后缀----后缀：g=>找全部 i=>忽略大小写

2.备选字符集：

/^[备选字符集]$/

强调：

一个中括号只管一位字符
正则表达式默认只要满足就不管后续了，而我们要做验证，希望从头到尾完全匹配：/^[备选数字计集]$/--只要做验证必加。
特殊：如果备选字符集中的ascli码是连续的，那么可以用-省略中间部分--如：

一位数字[0-9]
一位字母[A-Za-z]
一位数字，字母，下划线[0-9A-Za-z_]
一位汉字：[\u4e00-\u9fa5]
除了xxx以外：[^xxx]

3.预定义字符集

一位数字[0-9]==>\d
一位数字，字母，下划线[0-9A-Za-z_]==>\w
一位空白符：\s
除了换行以外的任意字符：.

建议：优先使用预定义字符集，如果自定义字符集满足不了再搭配备选字符集补充

不管是预定义字符集还是备选字符集都是一个只管一位

4.量词

有明确数量：

字符集{n,m}前面相邻的字符集。至少n个最多m个
字符集{n,}前面相邻的字符集。至少n个多了不限
字符集{n}前面相邻的字符集。只能n个

没有明确数量

字符集？前面相邻的字符集，可有可无，最多一个
字符集* 前面相邻的字符集，可有可无，多了不限
字符集+ 前面相邻的字符集，至少一个，最多一个

5.选择和分组

选择：在俩个规则中选一个---规则1|规则2
分组：将多个字符集临时组成一组子规则--(规则1|规则2)

6.指定匹配位置

^:开头
$:结尾
特殊：两则同时使用时前面加^后面加$表示从头到尾要求完全匹配---验证

7.密码强度验证

2-4位，可以输入数字、字母，但是必须出现一位大写和一位数字的组合
/^[0-9A-Za-z]{2,4}$/
预判公式：
(?![0-9]+$) -> 不能全由数字组成，可能有大写、小写、汉字、日文、特殊符号...
(?![a-z]+$) -> 不能全由小写组成，可能有数字、大写、汉字、日文、特殊符号...
(?![0-9a-z]+$) -> 不能全由数字组成、也不能全由小写组成、也不能全由数字和小写的组合组成

比如：
/(?![0-9a-z]+$)(?![A-Za-z]+$)[0-9A-Za-z]{2,4};//2-4位，可以输入数字、字母，但是必须出现一位大写和一位数字的组合
/(?![0-9a-z]+$)(?![A-Za-z]+$)(?![A-Z0-9]+$)[0-9A-Za-z]{2,4}/;//必须三者都有
/(?![0-9A-Za-z]+$)[0-9A-Za-z_]{2,4}/;//至少要有下划线

支持正则表达式的字符串API

切割：var arr=str.split("固定切割符",RegExp)
替换：很有可能出现在笔记中

1、基本替换法：
str=str.replace(/正则表达式/后缀,"新内容");
//replace支持支持正则，并且搭配上后缀g就可以找到全部
//缺陷：替换的新内容是一个固定的

2、高级替换法：
str=str.replace(/正则表达式/后缀,function(a,b,c){
console.log(a);//正则匹配到的关键字
console.log(b);//正则匹配到的关键字的下标
console.log(c);//原字符串
return 判断a关键字的长度，而返回不同的星星数量
			});
3、格式化：身份证
var id="500103198602215933";
var reg=/(\d{6})(\d{4})(\d{2})(\d{2})(\d{4})/;
id.replace(reg,function(a,b,c,d,e,f,g,h){
//再replace的时候，正则出现了分组，我们会得到更多的形参
//再形参a的后面就会出现n个形参，就看你有多少个分组
//第1个分组获得的内容会保存在第2个形参之中
//第2个分组获得的内容会保存在第3个形参之中
//...依次类推.....
//倒数第二个一定是下标
//倒数第一个一定是原文本身
})
格式化：手机号
var phone="13452390312";
var reg=/(\d{4})\d{4}(\d{3})/;
	
phone=phone.replace(reg,(a,b,c)=>{
return b+"****"+c;
})	
console.log(phone);

总结：何时前面加^后面加$，何时又该添加后缀g

前面加^后面加---验证
替换：替换所有----g

正则对象：创建：

直接量：var reg=/正则表达式/后缀；
构建函数：var reg=new RegExp("正则表达式","后缀")

API：验证：varbool=reg.test(用户输入的)；

第三周

第一天