Math对象
API
上取整：超过一点点，就取下一个整数
var num=Math.ceil(num);(小数点位数不能超过15位，否则此方法会失效，只能取整)
下取整：无论超过多少，都会省略掉小数部分
var num=Math.floor(num);
四舍五入取整：
var num=Math.round(num);//只看第一位小数
Number.toFixed(d);(Number的API)
优点：
传入自定义保留小数位数，并且也带有四舍五入的操作
解决浏览器带来的舍入误差
乘方和开方
乘方：Math.pow(底数,幂); -> 更简化的方法：底数**幂
开方：Math.sqrt(num); -> 仅仅只能开平方
最大值和最小值：
var max/min=Math.max/min();(不支持数组参数)
固定用法：Math.max/min.apply(Math,arr);//apply具有打散数组的功能
把负数变为整数 Math.abs(-1);
随机数：Math.random()：在0~1之间取一个随机的小数
公式：parseInt(Math.random()*(max-min+1)+min)
Date对象：日期对象
创建：4种
1、创建一个当前日期 var now=new Date();
2、创建一个自定义时间 var birth=new Date("yyyy/MM/dd hh:mm:ss");
3、创建一个自定义时间 var birth=new Date(yyyy,MM,dd,hh,mm,ss);//修改月份，从0~11月，0代表是1月
4、复制一个日期： var end=new Date(start);
5、创建一个日期：（不推荐） var date=new Date(毫秒数);//计算机元年：1970年1月1日 8点整
API： 分量：时间的单位
年月日星期：FullYear Month Date Day（没有set方法）
时分秒毫秒：Hours Minutes Seconds Milliseconds
每一个分量都有一对儿getXXXX（获取值）/setXXXX（设置值）
xx.getTime()(获取xx时间的毫秒数)
格式化日期为本地字符串： date.toLocaleString() （具有兼容性问题）
定时器：
周期性定时器：每过一段时间会执行一次，先等后做，会反复执行，需要自己写停止才能停止
开启周期定时器：timer=setInterval(function(){},间隔毫秒数);
停止周期定时器：clearInterval(timer);
一次性定时器：等待一段时间，只会做一次就结束了
开启一次性定时器：timer=setTimeout(function(){},间隔毫秒数);
停止一次性定时器：clearTimeout(timer);
两者可以相互转换（例如可以开启一个周期性定时器，但是使用一次性定时器关闭方式来关闭也可以成功）
使用JS创建页面DOM元素：
1、创建空标签
var elem=document.createElement("标签名");
2、为这个空标签，设置必要的属性或事件
elem.属性名="属性值";
elem.on事件名=function(){操作}
3、将我们的元素放上到DOM树
父元素.appendChild(elem);
BOM（Browser Object Model）浏览器对象模型
window对象：扮演着两个角色：
1、代替全局对象global：保存着全局变量和全局函数
2、指代当前窗口本身
属性：专门获取大小
1、获取浏览器的完整的大小：outerWidth/outerHeight
2、获取浏览器的文档显示区域的大小：innerWidth/innerHeight （获取浏览器的文档显示区域的大小）
3、获取屏幕的完整的大小：screen.width/height
3、window的专属事件
window.onload事件 （加载事件）
等待其他所有的资源加载完毕后才会执行的代码，放在里面的代码其实是要最后才会执行
window.onresize事件 （窗口变化事件）
只要窗口变化就会触发
window.onscroll事件 （滚动事件）
一旦滚动就会触发
获取滚动条当前的位置：window.scrollY
获取元素距离页面顶部有多远：elem.offsetTop/offsetLeft
打开链接的新方式：
1、当前窗口打开，可以后退
HTML：<a href="url">内容</a>
JS：open("url","_self");
2、当前窗口打开，禁止后退
history：当前【窗口的历史记录】，他其实可以做的事儿就是前进后退
location：当前【窗口的正在打开的url】，而他有一个API叫做
location.replace("新url");//叫做替换，不叫作跳转，不会产生历史记录，自然也就不能前进后退，但是网址都替换，网页必然会发生变化
3、新窗口打开，可以打开多个：
HTML：<a href="url" target="_blank">内容</a>
JS：open("url","_blank");
4、新窗口打开，只能打开一个，使用场景：比如电商网站，只允许用户打开一个结账界面
HTML：<a href="url" target="自定义一个name">内容</a>
JS：open("url","自定义一个name");
解释：其实窗口的底层都有一个名字，如果打开了一个已经开着的名字的窗口，新打开的就会把旧的给替换掉，但是给大家的感觉有一点像是刷新的感觉
3、a标签的其他用途：
1、跳转
2、锚点
3、下载：<a href="xx.exe/rar/zip/7z...">内容</a>
4、打开图片和txt文件：<a href="xx.图片的后缀/txt">内容</a>
5、直接书写JS - 不需要绑定点击事件：<a href="javascript:js代码;">内容</a>
2、打开新窗口/新连接：var newW=open("url","target","width=?,height=?,left=?,top=?");
特殊：
1、如果你没有传入第三个参数，那么窗口会和浏览器融为一体，浏览器有多大，窗口就有多大
2、如果你传入第三个参数，那么窗口会和浏览器分离开，独立存在
3、可以拿个变量接住这个窗口，以后用于做其他操作
3、关闭窗口：window/newW.close()
4、改变新窗口的大小：newW.resizeTo(新宽,新高)
5、改变新窗口的位置：newW.moveTo(新X,新Y)
本地/客户端存储技术：保存着在浏览器里面的数据
cookie：淘汰了，存储大小只有2kb，而且操作极其复杂，尤其要到处切割的，最多只能保存30天
webStorage：H5（概念统称）带来的一个新特性，存储的大小由8mb，永久保存，而且操作非常简单！
分为2种：
1、sessionStorage - 会话级，只要浏览器一旦关闭，数据就会死亡
2、localStorage - 本地级，只要不你清空他，他就永远存在
两者的用法是一模一样的，不用创建，可以直接使用
操作：
1、添加：xxxxStorage.属性名="属性值";
2、读取：xxxxStorage.属性名
3、删除：xxxxStorage.removeItem("属性名");
4、清空：xxxxStorage.clear();//删全部
BOM的常用对象：最重要的三个东西：定时器、客户端存储技术、event
history对象：保存了当前窗口的历史记录（过去的url）
前进：history.go(1); 后退：history.go(-1); 刷新：history.go(0);
location对象：保存了当前窗口的正在打开的url（现在的url）
一个url由5部分组成分别是：
1、协议：https（加密）/http（未加密）/ftp(传输文件) /ws（直播） - 前两个都属于叫做 请求 - 响应 模型，专门用于实现网站开发
2、主机号|ip地址|域名：域名是需要花钱购买的，主机号|ip地址是免费的，127.0.0.1才真的叫主机号，只能自己访问自己
3、端口号：https默认端口为443，http默认端口为80，只有默认端口可以省略不写！
4、文件的相对路径|路由：百度加密了 - 如果以后学习了服务器端，我们可以配置好一些选项，用户就可以在自己电脑上，看到我们的东西了
5、查询字符串|请求消息：前端传输到后端的东西，前端对后端说的话，就是form表单get提交带来的东西
方法： 跳转：location="新url" - 替换当前窗口，可以后退
跳转后，禁止后退：location.replace("新url");
刷新：location.reload();
DOM：原本DOM是可以操作一切结构化文档的，但是再某个版本升级过后，为了方便各类程序员将DOM分为了3部分：
1、核心DOM：无敌的，既可以操作HTML又可以操作XML，但是语法相对比较复杂
2、HTML DOM：只能操作HTML，不能访问一切自定义的东西，但是语法简单
3、XML DOM：只能操作XML数据格式，被淘汰了，被JSON数据格式代替了
查找元素
1、var elems=document.getElementsByXXXXXX();（返回的是一个动态集合HTMLCollection）
2、var elem=document.querySelector("任意css选择器");（返回的是一个元素）
3、var elems=document.querySelectorAll("任意css选择器");（返回的是一个静态集合NodeList可以使用forEach）
操作样式表样式 获取你想要操作的样式表
var sheet=document.styleSheets[i];
获取此样式表中所有的样式规则
var rules=sheet.cssRules;
数出你想要操作的那个样式规则
var rule=rules[i];
操作 rule.style.background="purple"
操作属性
1、获取属性值：
核心DOM：elem.getAttribute("属性名");
HTML DOM：elem.属性名
2、设置属性值：
核心DOM：elem.setAttribute("属性名","属性值");
HTML DOM：elem.属性名="属性值"
3、删除属性
核心DOM：elem.removeAttribute("属性名");
HTML DOM：elem.属性名="";
4、判断有没有（不推荐只会得到一个布尔值）
核心DOM：elem.hasAttribute("属性名");
HTML DOM：elem.属性名!="";
上树：3种
父元素.appendChild(elem);//在父元素末尾追加一个子元素elem
父元素.insertBefore(elem,已有子元素);//在父元素里面追加一个子元素elem，但是会放在已有子元素的前面
父元素.replaceChild(elem,已有子元素);//在父元素里面追加一个子元素elem，但是elem会替换掉已有子元素
删除元素：elem.remove();
总结：你觉得DOM在干什么？ 答：增、删、改、查（元素、内容、属性、样式）
let的作用：
1、解决了声明提前，一定要先创建再使用
2、带来了块级作用域：一个{}就是一个快，此变量只能在那个{}里面使用！
3、如果用let去当作下标绑定事件，那么他会记录着你当前元素的下标，不再需要自定义下标了！其实forEach的那个形参i就是用let创建的！
其他扩展方法
将类数组对象变为普通数组！ES5提供了此API 接住=Array.from(类数组);
input的两个专属事件：onfocus（获取焦点）和onblur（失去焦点）
递归：简单来说就是再函数之中再一次调用了函数自己，迟早有一天会停下来
何时使用：专门用于【遍历层级不明确的情况】 - DOM树和【数据】
如何使用：2步
function 函数名(root){
1、第一层要做什么直接做！
2、判断有没有下一层，如果有下一层则再次调用此方法，只不过传入的实参是自己的下一层
}
函数名(实际的根元素/根数据)
算法：深度优先！优先遍历当前节点的子节点，子节点遍历完毕才会跳到兄弟节点
缺陷：不要过多使用，性能相对较差，同时开启大量的函数调用，浪费内存，我们只在一个情况：【遍历层级不明确的情况】
2、绑定事件：3种方式
1、在HTML页面上书写事件属性： <elem on事件名="函数名(实参)">
缺点： 1、不符合内容（HTML）与样式（CSS）与行为（JS）的分离
2、无法动态绑定，一次只能绑定一个元素
3、不支持绑定多个函数对象
2、在JS中使用事件处理函数属性： elem.on事件名=function(){操作}
优点： 1、符合内容（HTML）与样式（CSS）与行为（JS）的分离
2、可以动态绑定
缺点： 不支持绑定多个函数对象
3、在js中使用事件API（有兼容性）
主流：elem.addEventListener("事件名",callback);
老IE：elem.attachEvent("on事件名",callback);
兼容：
if(elem.addEventListener){
elem.addEventListener("事件名",callback);
}else{
elem.attachEvent("on事件名",callback);
}
优点：
1、符合内容（HTML）与样式（CSS）与行为（JS）的分离
2、动态绑定
3、支持绑定多个函数对象
缺点：有兼容性问题
event（事件对象）：
1、事件周期：从事件发生，到所有事件处理函数执行完毕的全过程 3个阶段：
1、捕获阶段：由外向内，记录着要发生的事件有哪些
2、目标优先触发：目标元素->当前点击的实际发生事件的元素
3、冒泡触发：由内向外，依次执行我们之前记录着的要发生的事件
2、获取事件对象event： 主流：会自动作为事件处理函数的第一个形参传入e 老IE：event; - 老IE全局有这个变量，主流也可用
1、获取鼠标的坐标/位置
获取鼠标相对于屏幕的坐标：e.screenX/Y
获取鼠标相对于浏览器窗口/客户端/文档显示区域的坐标：e.clientX/Y
获取鼠标相对于网页的坐标：e.pageX/Y
2、阻止事件冒泡 - 笔试面试中
主流：e.stopPropation();
老IE：e.cancelBubble=true; 主流也可用
3、事件委托/利用事件冒泡
优化：如果多个子元素定义了相同 或 相似的事件操作，那么最好只给【父元素定义一次】
为什么：每一次绑定一个事件函数，其实都是创建了一个事件对象，创建的对象越多，网页的性能就越差
目标元素target：实际触发事件的元素
主流：e.target;
老IE：e.srcElement;主流也可用
4、阻止浏览器的默认行为
主流：e.preventDefault();
老IE：e.returnValue=false;主流也可用
新事件：
1、右键事件 - window.oncontextmenu
2、键盘事件：一般用于游戏开发比较多 + 都要搭配上键盘的键码
window.onkeydown - 按下和按住都会触发，任何键盘按键都可以触发
window.onkeypress - 按下和按住都会触发，但是只有数字、字母、回车、空格可以触发，其他人不行
window.onkeyup - 松开按键才会触发，任何键盘按键都可以触发
获取键盘的键码： e.keyCode
