day1

BOM： 1、history：保存当前窗口的历史记录： 前进后退刷新：history.go(正数/负数/0);

2、location：保存当前窗口的正在打开的url： 常识：一个url由5部分： 协议://域名:端口号/文件相对路径?请求消息

    跳转：location="新url";
    跳转后禁止后退：location.replace("新url");
刷新：location.reload();

---

DOM：

1、如何找到元素：

1、直接找： 动态集合：var elems=document.getElementsByTag/ClassName("标签名/class名"); 静态集合：var elems=document.querySelectorAll("任意的css选择器"); - 效率更高、而且支持forEach 2、通过关系： 父：parentNode 子：children 第一个儿子：firstElementChild 最后一个儿子：lastElementChild 前一个兄弟：previousElementSibling; 后一个兄弟：nextElementSibling;

2、操作元素 内容：innerHTML（识别标签）/innerText（识别纯文本）/value（input、option） 获取：elem.上面的; 设置：elem.上面的="新内容";

属性： 获取：elem.getAttribute("属性名"); HTML DOM：elem.属性名;

设置：elem.setAttribute("属性名","属性值"); HTML DOM：elem.属性名="属性值";

删除：elem.removeAttribute("属性名"); - 可以删干净属性节点

判断有没有：elem.hasAttribute("属性名"); true->有 false->没有

样式： 内联样式： 获取：elem.style.css属性名; 设置：elem.style.css属性名="css属性值"; 样式表： var sheet=document.styleSheets[i]; var rules=sheet.cssRules; var rule=rules[i]; 获取：rule.style.css属性名; 设置：rule.style.css属性名="css属性值";

3、创建元素&上树：3步 1、创建空标签： var elem=document.createElement("标签名");

2、为其添加必要的属性和事件 elem.属性名="属性值"; elem.on事件名=function(){} 3、上树：3种 *父元素.appendChild(elem); 父元素.insertBefore(elem,已有子元素); 父元素.replaceChild(elem,已有子元素);

4、删除元素：elem.remove();

day2 递归

1、递归：函数中又一次调用了函数自己，迟早有一天会停下来。 何时使用：遍历层级不明确的情况，DOM树和数据。 如何使用： function 递归(x){ 1、只管第一层要做什么 2、判断有没有下一层，如果有再次调用此方法，只不过传入的是下一层的东西 } 递归(实际的根DOM/根数据);

缺陷：同时开启大量的函数调用，浪费内存，仅在需要的时候使用

算法：深度优先算法！

2、三个绑定事件的方式： 1、<elem on事件名="函数()">

2、elem.on事件名=function(){}

3、兼容： if(elem.addEventListener){ elem.addEventListener("事件名",callback); }else{ elem.attachEvent("on事件名",callback);//老IE不支持箭头函数 }

day3 事件周期

事件： 1、事件周期：3个 1、捕获阶段：由外向内，记录着要发生的事件有哪些 2、目标元素优先触发：目标元素->实际点击的那个元素 3、冒泡阶段：由内向外，依次触发之前记录着的事件

2、获取到事件对象event 主流：事件函数内写一个形参，就会自动得到了 老IE：event; 兼容：event;

可以干什么？ 1、获取鼠标的位置 相对于屏幕：e.screenX/Y 相对于文档显示区域：e.clientX/Y 相对于页面：e.pageX/Y 2、阻止冒泡： 主流：e.stopPropagation(); 老IE：e.cancelBubble=true; 兼容：e.cancelBubble=true; 3、事件委托：利用冒泡 优化：绑定的事件越多，网站的性能越差 为什么：因为每绑定一个事件，相当于就创建了一个事件对象 把事件绑定在父元素身上：主要学会找到目标元素 主流：e.target; 老IE：e.srcElement; 兼容：e.srcElement; 事件内可以淘汰了this，但是淘汰不完 搭配上判断标签名：xx.nodeName; - 得到全大写的标签名 4、阻止浏览器的默认行为 主流：e.preventDefault(); 老IE：e.returnValue=false; 新事件： 1、右键事件 - oncontextmenu 2、键码事件 - onkeydown/press/up 5、获取键盘键码：e.keyCode;

day4 取消事件

1、取消事件： 1、elem.onclick=()=>{} - 取消：elem.onclick=null; 2、elem.addEventListener("事件名",函数名); - 取消：elem.removeEventListener("当初的事件名",当初函数名);

2、this的指向： 1、单个元素绑定事件this->这个元素 2、多个元素绑定事件this->当前元素 3、定时器中this->window 4、箭头函数的this->外部对象 5、函数中的this->当前正在调用函数的对象

3、强制改变this的指向： call/apply：临时替换了函数中的this - 借 语法：函数名.call(借用的人,实参,...); 函数名.apply(借用的人,arr); 借用相当于立刻执行 bind：永久替换了函数中的this - 买 语法：var 新函数=函数名.bind(永久绑定的人,永久实参,...); 不会立刻执行的，需要我们需要的时候再去调用。

三个固定套路：
	1、获取数组的最大值和最小值：Math.max/min.apply(Math,arr);//悄悄打散数组，其实还可以这么写：Math.max/min(...arr)
	2、判断x是不是一个数组：Object.prototype.toString.call/apply(x)=="[object Array]"
	3、类数组转为普通数组：var 接住=Array.prototype.slice.call/apply(类数组对象) - 被代替：Array.from()

4、模板字符串：我的名字叫${name}，今年${age}岁;

5、解构赋值：赋值的新方式 1、类似数组的解构赋值 var [a,b,c]=[1,2,3]; - 函数的return可以返回多个数据 2、类似对象的解构赋值 var {a,b,c}={a:1,c:3,b:2} - 衍生出函数的传参其实顺序是无所谓的

6、Set：将数组去重再转回数组，因为set提供的功能很少 arr=[...new Set(arr)];

7、for(var v of arr){ v;//当前值 } 不能修改原数组 而且不能遍历hash数组，也就不能遍历对象

day5 正则表达式

1.正则对象： 创建： 1、直接量：var reg=/正则表达式/后缀; 2、构造函数：var reg=new RegExp("正则表达式","后缀"); API： 1、验证：var bool=reg.test(用户输入的);

2.*****正则表达式：定义字符串中字符出现规则的表达式 何时使用：切割 替换 【验证】！ 如何使用：语法：/正则表达式/ 1、最简单的正则就是关键字原文 "no" -> /no/后缀 后缀：g：找全部 i：忽略大小写 2、备选字符集：/^[备选字符集]$/ 强调：1、一个中括号，只管一位字符 2、问题：正则表达式默认只要满足就不管后续了，而我们做验证的人，希望的是用户从头到尾按照我们的要求来，希望从头到尾完全匹配： 解决：前加^，后加$，两者同时使用，代表要求从头到尾完全匹配/^[备选字符集]$/ - 只要做验证必加！ 特殊：如果备选字符集中的ascii码是连续的，那么可用-省略掉中间部分 比如： 一位数字：[0-9]; 一位字母：[A-Za-z]; 一位数字、字母、下划线：[0-9A-Za-z_] 一位汉字：[\u4e00-\u9fa5] 除了xxx之外的：[^0-9] - 很少使用，范围太广了