第三周学习

history对象：当前窗口的历史纪录（url）

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

查找元素

document.getElementsByXXXX(); - 返回的是一个动态集合HTMLCollection
document.querySelector("css选择器");
    document.querySelectorAll("css选择器");
    document.getXXX 和 document.queryXXX的区别?
            动态集合：效率低 - 不支持forEach
            静态集合：效率高 - 支持使用forEach

操作样式：

样式表样式：
	var sheet=document.styleSheets[i];
	var rules=sheet.cssRules;
            rule.style.css属性名="css属性值";
属性：
	获取属性值：
		DOM：elem.getAttribute("属性名");
		HTML DOM：elem.属性名;
	设置属性值：
		DOM：elem.setAttribute("属性名","属性值");
		HTML DOM：elem.属性名="属性值";
	删除属性：
		DOM：elem.removeAttribute("属性名");
		HTML DOM：elem.属性名="";
	判断：
		核心DOM：elem.hasAttribute("属性名");
		HTML DOM：elem.属性名!="";

创建元素

创建空标签：
	var elem=document.createElement("标签名");
设置属性和事件
	elem.属性名="属性值";
	elem.on事件名=function(){}
上树：
	父元素.appendChild(elem);末尾处追加
	父元素.insertBefore(elem,子元素);放在已有子元素前面
	父元素.replaceChild(elem,已有子元素);替换掉已有子元素
删除元素：elem.remove();

递归：专门用于遍历层级不明确的情况

使用：
function 函数名(root){
	1、操作
	2、判断下一层，如果有则再次调用此方法，传入的实参是下一层	
}

绑定事件：

1、<elem on事件名="函数名(实参)"></elem>
2、elem.on事件名=function(){操作}
3、主流：elem.addEventListener("事件名",callback);
	老IE：elem.attachEvent("on事件名",callback);
	兼容：
		if(elem.addEventListener){
			elem.addEventListener("事件名",callback);
		}else{
			elem.attachEvent("on事件名",callback);
		}
	有兼容性问题

event：

主流：会自动作为事件处理函数的第一个形参传入
老IE：event;
兼容：event;
获取鼠标相对于屏幕的坐标：e.screenX/Y
    获取鼠标相对于文档显示区域的坐标：e.clientX/Y
获取鼠标相对于网页的坐标：e.pageX/Y

阻止事件冒泡：
		主流：e.stopPropagation();
		老IE：e.cancelBubble=true;
		兼容：e.cancelBubble=true;
    利用冒泡
		主流：e.target;
		老IE：e.srcElement;
		兼容：e.srcElement;
    阻止浏览器的默认行为：
		主流：e.preventDefault();
		老IE：e.returnValue=false;
		兼容：e.returnValue=false;

新事件：
		右键事件 - window.oncontextmenu
		键盘事件： - window.onkeydown - 按住和按下，任何键盘按键都可以触发
			window.onkeypress - 按住和按下，只有字母、数字、回车、空格可以触发，其他按键不行
			window.onkeyup - 松开，任何键盘按键都可以触发

获取键盘的键码：
		e.keyCode; 

事件的取消绑定

若使用elem.onclick=()=>{}，则elem.onclick=null
若使用elem.addEventListener("事件名",回调函数); 则：
	elem.removeEventListener("事件名",回调函数); 

this的指向：

单元素绑定事件this->本元素
多元素绑定事件this->当前元素
箭头函数this->外部对象
***函数中的this->当前正在调用函数的对象
定时器的this->window

强制改变this的指向

call/apply：临时的替换了函数的this
	语法：函数名.call(借用的对象,实参,...); - 单独传入每个实参
	          函数名.apply(借用的对象,arr); - 只能传入一个实参
bind：永久替换函数中的this
	语法：var 新函数=函数名.bind(永久对象,永久实参,...); - 不是立刻执行，需要自己调用
固定套路：
	Math.max/min.apply(Math,arr) - 也能支持数组参数：
	Object.prototype.toString.call/apply(x)==="[object Array]";判断xx是不是数组

解构赋值：

类似数组的解构赋值
	let [a,b,c]=[1,2,3];
    类似对象的解构赋值
	let {a,b=默认值,c}={c:3,a:1,b:2};

Set：

	var s=new Set(arr); - 去重

正则表达式：

    备选字符集：/^[字符集]$/
            一位数字：[0-9];
            一位字母：[A-Za-z];
            一位数字、字母、下划线：[0-9A-Za-z_]
            一位汉字：[\u4e00-\u9fa5]
            除了xxx之外：[^0-9]
预定义字符集：
	一位数字：\d ===>[0-9]
	一位数字、字母、下划线：\w ===> [0-9A-Za-z_]
	一位空白字符：\s
            一位除了换行外的任意字符：.
    量词：规定一个字符集出现次数：
	字符集{n,m}：前边相邻的字符集，至少n个，最多m个
	字符集{n,}：前边相邻的字符集，至少n个，多了不限
	字符集{n}：前边相邻的字符集，必须n个
            字符集?：前边相邻的字符集，可有可无，最多1个
	字符集*：前边相邻的字符集，可有可无，多了不限
	字符集+：前边相邻的字符集，至少一个，多了不限
    选择和分组：
	选择：规则1|规则2
	分组：(规则1|规则2)
    指定匹配位置
	^：开头
	$：结尾
    预判公式：
	(?![0-9]+$) -> 不能全由数字组成，可能有大写、小写、汉字、日文、特殊符号...
	(?![0-9a-z]+$) -> 不能全由数字组成、也不能全由小写组成、也不能全由数字和小写的组合组成

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

切割：var arr=str.split("固定切割符"/RegExp);
替换：很有可能出现在笔试之中
	基本替换法：
		str=str.replace(/正则表达式/后缀,"新内容");
		缺陷：替换的新内容是固定的
	高级替换法：
		str=str.replace(/正则表达式/后缀,function(a,b,c){
			return 判断a关键字的长度，而返回不同的星星数量
		});
格式化：身份证
	var id="987874355567877869";
	var reg=/(\d{6})(\d{4})(\d{2})(\d{2})(\d{4})/;
	id.replace(reg,function(a,b,c,d,e,f,g,h){

正则对象：

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

API：
	验证：var bool=reg.test(用户输入的);