history对象

• 前进history.go(正数)
• 后退history.go(负数)
• 刷星history.go(0)

location对象

www.baidu.com/

网址组成部分

• 协议：http(未加密)/https(加密)/ftp(传输文件)/ws(直播)
• 主机号|域名|IP地址：域名需要购买，主机号和IP地址是免费的
• 端口号：https(默认端口为443)，http(默认端口为80)，默认端口可以省略不写
• 路径|路由
• 查询字符串|请求消息

属性

• location.protocol协议
• location.hostname域名
• location.port端口号
• location.pathname路由
• location.search请求消息

方法

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

查找元素

关系网查找

通过选择器查找元素

• var elem=document.querySelector("任意css选择器")

注意：只能找到单个元素，如果匹配到多个，也返回第一个，没有找到返回null。

• var elem=document.querySelectorAll("任意css选择器")

注意：找到到返回一个静态集合没找到返回一个空集合。

操作样式表

内联样式

• 获取elem.style.css属性名;
• 设置elem.style.css属性名=css属性值;

样式表

//获取你想要操作的样式表
var sheet=document.styleSheets[i];
//获取此表中的所有样式规则
var rules=sheet.cssRules;
//去数出你要操作的第几个样式规则
var rule=rules[i];
//操作
rule.style.background="purple";

操作属性

• elem.getAttribute('属性名')获取属性值
• -elem.属性名
• elem.setAttribute('属性名')设置属性值
• • elem.属性名='属性值'
• elem.removeAttribute('属性名')删除属性
• • elem.属性名=''
• elem.hasAttribute('属性名')判断有没有
• • elem.属性名!=""

创建元素并且上树

1. 创建空标签var elem=document.createElement('标签名')
2. 为其设置属性和事件elem.属性名='属性值';elem.on事件名=function(){}
3. 上树

• 父元素.appendChild(elem)在父元素末尾追加一个子元素
• 父元素.insertBefore(elem,已有子元素)在父元素里面添加一子元素，会放到你的已有子元素前面
• 父元素.replaceChild(elem,已有子元素)在父元素里面添加一子元素，会替换掉你的已有子元素

5. 删除元素elem.remove();

扩展

form提交事件

onsubmit 阻止提交return false

input/textarea的专属事件

• onfocus获取焦点
• onblur失去焦点
• oninput内容改变触发input专属事件

鼠标按下和松开

• 鼠标按下：onmousedown
• 鼠标松开：onmouseup

创建变量的新方式

let 变量名=值;

作用：

• 解决了声明提前
• 带来了块级作用域

类数组对象变为普通数组

接住=Array.from(类数组)

递归

何时使用：

专门用于【遍历层级不明确】的情况 - DOM树和【数据】

使用：

function 函数名(root){
1、root第一层要做什么直接做

2、判断有没有下一层，如果有下一层再次调用此方法，但是传入的实参是自己的下一层
}
函数名(实际的根元素)

事件

HTML页面上书写事件属性

<elem on事件名='函数名()'></elem>

js中使用事件处理函数属性

elem.on事件名=function(){操作}

js中使用事件API

• 主流：elem.addEventListener('事件名',callback)
• 老IE：elem.attachEvent('on事件名',callback)
• 兼容

if(elem.addEventListener{
    elem.addEventListener("事件名",callback)
}else{
    elem.attachEvent("on事件名",callback)
}

事件周期

• 捕获阶段：由外向内，记录着要发生的事件有哪些
• 目标优先触发：目标元素->当前点击的实际发生事件的元素
• 冒泡触发：由内向外，依次执行我们之前记录着的要发生的事件

获取事件对象event

• 主流：会自动作为事件处理函数的第一个形参传入e
• 老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.on事件名=()=>{}
• 取消绑定：elem.on事件名=null
• 绑定elem.addEventListener("事件名",回调函数)
• 取消绑定elem.removeEventListener("事件名",回调函数)

this的指向

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

强制改变this的指向

临时借用(立刻执行)

• 函数名.call(借用的对象,实参,...)单独传入每个实参
• 函数名.apply(借用的对象,arr)只能传入一个实参，要求必须是一个数组：apply其实悄悄会将数组打散

永久替换(随时可以使用)

语法:var 新函数=函数名.bind(指定对象,永久的固定的实参);

• 创建了一个和原函数功能完全相同的新函数
• 将新函数中的this永久绑定了，为专属，不能借用
• 将传入新函数的部分参数永久固定的

严格模式

语法:在任意作用预的顶部写上一句话："use strict";

• 全局污染会报错
• 将静默失败升级为报错！

模板字符串

语法：`我的名字叫${name}`

结构赋值

• 类似数组的结构赋值var [a,b,c]=[值1,值2,值3]
• 类似对象的解构赋值var {a,b=默认值,c}={a:1,c:3}
• 调用函数时，传递实参的顺序无所谓

function zwjs({name,age=默认值,hobby}){
    return `我的名字叫${name},今年${age}岁,喜欢${hobby}`;
}

• 函数返回结果可以有多个

function f1(){
    var a=1;
    var b=2;
    return [a,b];
}

• 新循环for(var v of arr){v - 当前值}
• Set数据类型(去重数组)[...new Set(arr)];三个点是扩展运算符，可以脱掉数组或者对象的衣服

正则表达式

语法： /正则表达式/

后缀

• /正则表达式/g找全部
• /正则表达式/i忽略大小写

备选字符集

• 一位数字：[0-9]
• 一位字母：[a-zA-Z]
• 一位数字、字母、下划线：[0-9A-Za-z_]
• 一位汉字：[\u4e00-\u9fa5]
• 一位数字、字母、下划线、波浪号、汉字：[0-9A-Za-z_~\u4e00-\u9fa5]
• 除了数字之外的[^0-9]

预定义字符集

• 一位数字：\d
• 一位数字、字母、下划线：\w
• 一位空白字符：\s(空格、制表符、换行)
• 一位除了换行外的任意字符：.

量词

有明确数量：

• 字符集{n,m}：前边相邻的字符集最少出现n个，最多出现m个
• 字符集{n,}：前边相邻的字符集最少出现n个，多了不限
• 字符集{n}：前边相邻的字符集必须出现n个

无明确数量：

• 字符集?：前边相邻的字符集，可有可无，最多1个
• 字符集*：前边相邻的字符集，可有可无，多了不限
• 字符集+：前边相邻的字符集，至少一个，多了不限

选着分组

选择

规则1|规则2

分组

(规则1|规则2)

指定匹配的位置

• 开头：^
• 结尾：$

特殊：两者如果同时使用，前加^后加$，表示从头到尾要求完全匹配

支持正则的API

切割

var arr=str.split("固定切割符"/RegExp)

替换

基础替换

var newStr=str.replace(RegExp,"新内容")

高级替换

var newStr=str.replace(RegExp,function(key,i,str){		
    key//关键字		
    i//关键字的下标
    str//原文本身
    return a.length==2?"**":"***";
});

格式化

var idCard="500103198602215933";
var reg=/(\d{6})(\d{4})(\d{2})(\d{2})(\d{4})/;
var newStr=idCard.replace(reg,function(key,a,b,c,d,e,f,g,h){
//在replace的时候，如果正则中出现了分组，那我们会得到更多的形参
//在形参key的后面就会出现n形参，具体有多少个，看你有//多少个分组
//a第一个分组
//b第二个分组
//.....以此类推
//倒数第二个是下标
//倒数第一个是原文
return `${c}年${d}月${e}日`;
})

正则对象

创建

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

API

验证：var bool=reg.test(str);

true->验证成功

false->验证失败