JS函数BOOM、DOM、事件
screen对象
*/
console.log(screen.width);//屏幕宽度
console.log(screen.height);//屏幕高度
console.log(screen.availWidth);//可用宽度
console.log(screen.availHeight);//可用高度 屏幕高度-任务栏高度
/*
* location对象
*
* 完整的URL路径：
* 协议://主机名(IP地址):端口号/文件路径?传递参数(参数名=参数值&参数名2=参数值2)#锚点
*/
console.log(location.href);//完整路径
console.log(location.protocol);//使用协议 http:https:ftp:file:mailto:
console.log(location.pathname);//文件路径
console.log(location.port);//端口号
console.log(location.search);//从?开始往后的部分
console.log(location.hostname);//主机名(IP地址)
console.log(location.host);//主机名+端口号
console.log(location.hash);//从#开始的锚点
//使用JS设置页面跳转
//window.location="http://www.baidu.com";
重点 window对象的常用方法
* >>>window对象中的所有方法，均可以省略前面的window.，比如close();
* 1、prompt:弹窗接收用户输入
* 2、alert:弹窗警告
* 3、confirm:带有确认/取消 按钮的提示框；
* 4、close:关闭当前浏览器选项卡
* 5、open:重新打开一个窗口
*
* //比较重点
* 6、setTimeout:设置延时执行，只会执行一次
* 7、setInterval:设置定时器，循环每个N毫秒执行一次
* 两个参数：需要执行的function/毫秒数
*
* 8、clearTimeout:清楚延迟
* 9、clearInterval:清除定时器
* 传入参数，调用setInterval时返回一个ID，通过变量接受ID，传入clearInterval.
【DOM树节点】
DOM节点分为三大类：元素节点、文本节点、属性节点
文本节点、属性节点，为元素节点的两个子节点；
通过getElement系列方法，可以去到元素节点。
【查看节点】
1、getElementById：通过ID获取唯一的节点；多个同名ID，只会取第一个；
2、getElementsByName：通过Name取到一个数组，包含1到多个节点；
使用方式：通过循环，取到每一个节点。循环次数：从0开始,<数组.length
【查看和设置属性节点】
1、查看属性节点： getAttribute("属性名");
2、设置属性节点： setAttribute("属性名","属性值");
【JS修改样式总结】
1、.className : 为元素设置一个新的class名字；
div1.className = "class1";
2、.style : 为元素设置一个新的样式，注意驼峰命名法；
div1.style.backgroundColor = "red";
3、.style.cssText : 为元素同时修改多个样式；
div1.style.cssText = "width:100px;height100px;";
【查看节点】
1、tagName属性：获取节点的标签名；
2、innerHTML:设置或者获取节点内部的所有HTML代码；
3、innerText:设置或者获取节点内部的所有文字；
【获取层次节点的常用属性】
* 1、.childNodes：获取UL里面的所有子节点(包含元素节点/文本节点)
* 2、.firstchild:获取元素第一个子节点
* 3、.lastchild:获取元素左后一个子节点
* 4、.ownerDocument:获取当前文档根节点，在HTML文档中，为document节点
* 5、.parentNode:获取当前节点的父节点
* 6、.previousSibling:获取当前节点的前一个兄弟节点
* 7、.nextSibling:获取当前节点的后一个兄弟节点
*
* 注：上述属性，均会获得所有的元素节点和文本节点，如果只需元素节点，需要
* 使用对应的Element属性，例如:firstChild--->firstElementChild
*
* 8、.attributes:获取当前元素节点的所有属性节点
[创建并新增节点]
* 1、.createElement("标签名"):创建一个新的节点，需要配合.setAttribute()方法设置新节点的相关属性
* 2、.appendChild(节点名)：在某元素后面追加一个新的节点
* 3、.insertBefore(新节点名)：在某元素之前追加一个新的节点
* 4、克隆对象.cloneNode(true/false):需要克隆谁，就用谁去调用克隆对象；
* >>>传参可以为true或者false:
* ①true表示：克隆当前节点及所有子节点；
* ②false表示：只克隆当前节点，不克隆子节点(默认)
*
* 【删除/替换节点】
*
* 1、.removeChild(需删除节点)：从父容器中，删除指定节点；
* 2、.replaceChild():需替换点
[表格属性]
* 1、rows属性：返回表格中的所有行、数组；
* 2、insertRow(index):在表格的第index+1行，插入一个新行
* 3、deleteRow(index):删除表格的第index+1行
*
* [表格的行对象]
* 1、cells属性：返回当前行中的所有单元格，数组；
* 2、rowIndex属性：返回当前行，在表格中索引顺序，从0开始
* 3、insertCell(index):在当前行的第index+1处插入一个<td>
* 4、deleteCell(index):删除当前行的第index+1个<td>
*
* [表格的单元格对象]
* 1、cellIndex属性：返回单元格在改行的索引顺序，从0开始
* 2、innerHTML属性：返回或设置当前单元格中的HTML代码
* 3、align属性：设置当前单元格的水平对齐方式
* 4、className属性：设置单元格的class名称
[JS中的事件分类]
* 1、鼠标事件：
* click/dbclick/mousedown/mousemove/mouseout/mouseover/mouseup
*
* 2、键盘事件
* keydown:键盘按下去触发
* keypress:键盘按下并松开的瞬间
* keyup:键盘抬起时触发
*
* [注意事项：(了解)]
* ①执行顺序：keydown-keypress-keyup
* ②长按时，会循环不断执行keydown-keypress
* ③有keydown事件时，不一定有keyup事件(事件触发过程，鼠标移开，就不触发 )
* ④keypress只能捕获字母、数字、符号键，不能捕获功能键；keydown/keyup基本可以捕获所有功能键(特殊除外)
* ⑤keypress区分大小写，keydown和keyup不区分
* ⑥keydown/keyup区分主键盘和小键盘，keypress不区分；
*
* [确定键盘触发按键]
* ①在触发函数中传入参数e，代表按键事件
* ②通过e.keyCode,确定按键Ascii码值，进而确定按键；
* ③所有浏览器系统的写法(一般不必要)；
* var evn=e||event;//取到键盘事件
var code=evn.keyCode||evn.which||evn.charCode;//取到按键编码
[JS中的事件流]
*
* 1、事件冒泡：当某DOM元素触发某事件时，会从当前DOM元素开始，逐个触发其祖先元素的同类型事件，直到DOM根节点；
* DOM0模型，均为事件冒泡；
* IE中使用.attachEvent()添加的事件，均为冒泡；
* 其他浏览器，.addEventListener添加的事件，当第三个参数为false时，为冒泡；
*
* 2、事件捕获：当某DOM元素触发某事件时，会从DOM根节点开始，逐个触发其祖先元素的同类型事件，直到触发到当前元素为止；
* 只有使用.addEventListener添加事件，并设置第三个参数为true时，才进行捕获；
*
* ↓ 当前元素 ↑
* ↓ ↑
* 冒 父元素 捕
* ↓ ↑
* 泡 爷爷元素 获
* ↓ ↑
* DOM根节点
*
* 3、阻断事件冒泡：
* IE浏览器中：将e.cancelBubble属性设为true；
* 其他浏览器：调用e.stopPropagation();方法
* 兼容写法：function myParagraphEventHandler(e) {
* e = e || window.event;
* if (e.stopPropagation) {
* e.stopPropagation(); //IE以外
* } else {
* e.cancelBubble = true; //IE
* }
* }
*
* 3、阻止默认事件：
* IE浏览器中：将e.returnValue属性设为false；
* 其他浏览器：调用e.preventDefault();方法
* 兼容写法：function eventHandler(e) {
* e = e || window.event;
* // 防止默认行为
* if (e.preventDefault) {
* e.preventDefault(); //IE以外
* } else {
* e.returnValue = false; //IE
* }
* }
