day09
扩展 如何使用js创建DOM元素
1.创建空标签
var 标签名 = document.creatElement("标签名");
2.为标签设置必要的属性或事件
标签名.innerHTML = "内容" ....
3.将元素放在DOM树上
父元素.appendChild(标签名);
Math对象 专门提供了数学计算的API
Math.PI = 3.141592...
API
1.取数
var num = Math.ceil(num);//向上取整 小数的为数不能超过15位 否则方法会失效
var num = Math.floor(num);//向下取整
var num = Math.round(num);/四舍五入取整 只算小数点后一个小数
另外的取整方式
parseInt(str) 能去掉单位
num.toFixed(d) d表示小数点位数
有两个优点：①传入自定义保留小数为数，也带有四舍五入的操作 ②解决浏览器带来的舍入误差。
缺点：结果是一个字符串，建议搭配parseFloat使用
面试题： 不适用toFixed()的情况下，由用户传输数字以及保留小数的为数进行四舍五入，返回一个数字
function toFixed(num,d){
num *=(10**d);
num = Math.round(num);
num /=(10**d);
return num;
}
var result = toFixed(数字,保留的小数位数)
2.乘方和开方
乘方 Math.pow(底数,幂) => 底数**幂
开方 Math.sqrt(数字) 仅仅只能开方
3.最大值和最小值
var max = Math.max(1,2,3,...);
var min = Math.min(1,2,3,...);
问题：本身不支持数组
解决：Math.max/min.apply(Math,arr); apply具有打散数据的功能
4.绝对值
Math.abs(负数)
5.随机数
Math.random();得到[0,1)的随机小数
Math.floor(Math.random(max-min+1)+min);生成min-max随机整数
Date 对象 日期对象,提供了操作日期和时间的API
创建：
创建一个当前时间
var now = new Date();
创建一个自定义时间
var now = new Date("YYYY-MM-DD hh:mm:ss")
创建一个自定义时间
var now = new Date(YYYY,MM,DD,hh,mm,ss) MM取值范围为0-11
复制一个时间
为什么：目前的所有API都是直接修改原日期的,无法获得修改之前的日期，所以在执行API之前先进行复制，然后再操作复制之后的日期
var end = new Date(new);
使用：2类
1.两个日期对象之间，可以相减，得到一个毫秒差，换算出自己想要的任何一部分，日期本质其实就是保存了一个毫秒数，做到计时的关键点
创建日期的最后一种方式 var data=new Data(毫秒数);计算机元年1970年1月1日8点整
2.API
分量：时间的单位
年月日星期：Fullear Month Date Day
时分秒毫秒：Hours Minutes Seconds Milliseconds
每一个分量都有一对getxxx/setxxx
getxxx负责获取一个分量的值 getDate();
setxxx负责设置一个分量的值 setDate();
取值范围
Fullyear
Month 0-11
Date 1-31
Hours 0-23
Minutes/Seconds 0-59
Day 0-6 0代表星期天
任何分量都有set，除了Day
希望对每个分量进行加减操作的话 date.setxxx(date.getxxx+/-n);
格式化本地时间 date.toLocaleString(),有兼容性问题，不同的浏览器显示出来的不同，用了此方法会失去日期的自动进制和日期的所有API，同时可以对其使用字符串的API进行操作
3.定时器
①周期性定时器
开启：timer=setInterVal(callback,间隔毫秒);
停止：clearInterVal(timer);
②一次性定时器
开启：timer=setTimeout(callback,间隔毫秒);
停止：clearTimeout(timer);
day10
BOM Broser Object Model 浏览器对象模型，专门用于操作浏览器
window对象：扮演两个角色
1.代替全局对象global，保存全局变量和全局函数
2.指当前窗口本身
属性：专门获取大小
获取浏览器完成大小 outerHeight/outerWidth
获取浏览器文本区域大小 innerHeight/innerWidth
获取屏幕的完整大小 screen。width/height
打开方式
自身窗口打开，可以前进后退
HTML:<a href="url">内容</a>
JS:open("url","_self");
自身窗口打开，不能够前进后退
HTML无法实现
js:location.replace("url");
新窗口打开，可以多个
HTML:<a href="url" target="_blank"></a>
js:open("url","_blank");
新窗口打开，只能一个
HTML:<a href="url" target="自定义name"></a>
js:open("url","自定义name");
跳转：任何标签都可以跳转,用js里的open("url","_self")实现
提升用户的体验感
a标签的其他用途
跳转
锚点
下载<a href="xx.exe/rar/zip/7z">内容</a>
打开图片和txt文件 <a href="xx.图片后缀/txt">内容</a>
直接写js不绑定事件<a href='JavaScript:js代码;'></a>
新窗口、新链接
var newW = open("url","targrt","width=?,height=?,left=?,top=?")
特殊
如果没有传入第三个参数，窗口和浏览器是一体的
如果传入了第三个参数，窗口和浏览器分离，独立存在
可以拿变量接住这个窗口，便于以后做其他操作
关闭窗口
window/newW.close()；
改变窗口的位置
newW.moveTO(新x,新y);
改变窗口大小
newW.resizeTO(新宽,新高);
window提供的三个框，不同浏览器，样式不同
警告框 alert("内容");
输入框 prompt("内容");
确认框 confirm("内容");
定时器
window的专属事件
window.onload事件 load加载等待其他所以的事执行完毕后才执行
window.onresize 事件 窗口大小如果发生改变，就会触发
window.onscroll 事件 一旦滚动就触发
获取滚动条当前位置 window.scrollY;
获取元素距离页面顶部有多远 window.offsetTop/offsetLeft
本地、客户端存储技术
cookie 存储太小，只有2kb 操作复杂，做多保存30天
webStorage：H5带来的一个新特性，存储大小8MB,永久保存
分为两种
1.seesionStorage 会话级 只要浏览器关闭数据就会死亡
2.localStorage 本地级 不清空就会一直存在
操作
1.添加 xxxStorage.属性名="属性值"；
2.读取 xxxStorage.属性名;
3.删除 xxxStorage.removeItem("属性名");
4.清空 xxxStorage.clear();//删除全部
day11
DOM 的常用对象
1.history对象 保存了当前窗口的历史记录
前进一步 history.go(1);
后退一步 history.go(-1);
刷新 history.go();
2.*** localtion 对象 保存着当前窗口正在打开的url
***程序员必备常识: 一个url由几部分组成？每个部分有什么？
由五部分组成
①协议：https(加密) http(不加密) ftp(传输文件) ws(直播) 前两个都属于请求-响应模式，专门用于实现网站开发
②主机号|ip地址|域名 域名是需要花钱购买的，主机号|ip地址是免费的
③端口号：https的端口号默认为443 http的默认端口号为80 只有端口号可以省略不写
④***文件的相对路径|路由：
⑤***查询字符串|请求消息 前端传输到后端的东西（form表单提交的东西）
属性：获取url的五个部分的内容
协议：location.protocol
域名：location.hostname
端口号：localtion.port
路由:location.pathname
请求消息：location。search
方法：
跳转：location="新url"
跳转后，禁止后退 location.replace("新url")
刷新：location。reload
DOM：原本DOM是可以操作一切结构化文档的，升级后分为了3部分
1.核心DOM，是无敌的，既可以操作HTML又可以操作XML，但语法相对复杂
2.HTMLDOM：只能操作HTML。不能访问一切自定义的东西，但是语法简单
3.XMLDOM：是能操作XML数据格式（淘汰）被JSON数据格式代替了
查找元素
①通过关系查找 至少要找到一个元素，才能调用关系
父：xx.parentNode
子：xx.children;
第一个子：xx.firstElementChild;
最后一个子：xx.lastElementChild;
前一个兄弟：xx.previousElementSIbling;
后一个兄弟：xx.nextElementSibling;
②直接找元素
1.var elems = document.getElementsByxxxxx();返回一个动态集合 HTMLcollection
2.var elem = document.querySelector("任意css选择器")
缺点：只能找到单个元素，如果匹配到多个，也只会返回第一个，没有找到返回null
var elems = document.querySelectorAll()("r任意CSS选择器")
找到是一个集合，没找到是一个空集合，复杂查找时非常简单，返回的是一个静态集合Nodelist 可以使用forEach
面试题 document.getxxx和document.queryxxx 的区别
1.后者更适合复杂查找
2.动态集合和静态集合的区别
动态集合：每一个DOM发生变化，都会悄悄的再次查找页面元素，让页面和数据保持一致，效率低下，不支持forEach
静态集合：每一次DOM发生变化，不会再次查找页面，页面元素和数据就不一致，效率就提高了，支持forEach
操作样式
内联样式
获取：elem.style.css属性名;只能获取内联样式
设置：elem.style.css属性名="css属性值"
2.样式表（不用，太麻烦了）
var sheet = document.styleSheets[i]; //获取想要操作的样式表
var rules = document.cssRules;//获取样式表中所有的样式
var rule = rules[i];
//操作
console.log(rule.style.background)
rule.style.background("red")
操作属性
获取属性
核心DOM：elem.getAttribute("属性名");
HTMLDOM：elem.属性名
设置属性
核心DOM：elem.setAttribute("属性名","属性值");
HTMLDOM：elem.属性名="属性值"
删除属性：
设置属性值为空字符串，某些属性可以算删除，但是只是删除了属性值，属性名还在，而有的属性哪怕只有一个属性名，也会具有作用（checked，href）
核心DOM：elem.removeAttribute("属性名");
HTMLDOM：elem.属性名=""
如何创建元素以及上树
1.创建空标签
var e = document.creatElement("标签名")
2.为其设置必要的样式
3.上树
父元素.appendChild(elem)；在父元素末尾追加一个子元素elem
父元素.insertBefore(elem,已有子元素)；在父元素已有子元素后放上elem
父元素.replaceChild(elem,已有子元素)；在父元素追加一个子元素elem，但会替换掉已有子元素
删除元素
elem.remove()；
let 变量名=值；
作用：
1.解决了申明提前一定要先创建再使用
2.带来了块级作用域，一个{}就是一个块，此变量只能在那个{}里使用
3.如果用let去当下标绑定事件，那么会记录着你当前元素的下标，不需要再自定义下标
将类数组对象变为普通数组
var arr = Array.from(类数组);
day12
1.递归:简单来说就是在函数中再次调用自己，迟早有一天会停下来
何时使用，专门用于【遍历层级不明确的情况】的DOM树和数据
如何使用
function 函数名(root){
1.第一层要做什么直接做
2.判断有没有下一层，如果有下一层再次调用方法，只不过传入的实参是自己的下一层
}
函数名(实际的根元素)
算法：深度优先，优先遍历当前节点的子节点，子节点遍历完成才会跳到兄弟节点
缺陷：不要过多使用，性能相对较差，同时开启大量的函数调用，浪费内存
递归VS纯循环
递归
优点：简单易用
缺点：性能低
纯循环
优点：几乎不占用内存
缺点：难度高
扩展
select&option 只要他们创建元素&上树可以简化
select.add(new Option("innerHTML",value))
绑定事件
1.在HTML页面上书写事件属性
<e on事件名="函数名()"><e>
缺点
不符合内容与样式与行为的分离
无法动态绑定，一次只能绑定一个元素
不支持绑定多个函数对象
2.在JS中使用事件处理函数属性
e.on事件名=function(){
操作
}
优点
符合内容与样式与行为的分离
可以动态绑定
缺点
不支持绑定多个函数对象
3.在js中使用事件API。不考虑老IE是不错的
主流
e.addEventListener("事件名",callback);
老IE
e.attachEvent("on事件名",callback);
兼容
if(e.addEventListener){
e.addEventListener("事件名",callback);
}else{
e.attachEvent("on事件名",callback);
}
优点
符合内容与样式与行为的分离
可以动态绑定
支持绑定多个函数对象
day13
event(事件对象)
1.事件周期：从事件发生，到事件发生到事件处理函数执行完毕的全过程
3个阶段
捕获阶段 由外向内，记录着要发生的事件有哪些
目标优先触发：目标元素->当前点击的实际发生事件的元素
冒泡触发：由外向内，依次执行我们之前记录着的要发生的事件
2.获取事件对象event
主流：会自动作为事件处理函数的第一个形参传入e
老IE：event---老ie全局有这个变量
兼容 event
得到事件对象event可以做什么呢？
1***.获取鼠标的坐标/位置
相对于屏幕的位置 e.screenX/Y
相对于浏览器、文档显示区域的位置 e.clientX/Y
相对于网页的坐标 e.pageX/Y
2.阻止事件冒泡--笔试中
主流：e.stopPropagetion();
老IE：e.cancelBubble=true;
兼容：e.cancelBubble=true;
3.把事件函数简化为箭头函数，但简化后，this就用不了了，需要一个元素来代替this
目标元素：target 实际触发事件的元素
主流：e.target;
老IE：e.stcElement;
兼容：e.strElement;
4.阻止浏览器的默认行为：比如a标签默认就可以跳转，提交按钮可以提交表单，右键自带一个弹出框
主流：e.preventDefault;
老IE：e.returnValue=false;
兼容：e.returnValue=false;
新事件
1.右键事件 window.oncontextmenu
2.键盘事件
window.onkeydown 按下和按住都会触发，任何按键都会触发
window.onkeypress 按下和按住都会触发，但是只有数字，字母，回车，空格可以触发
window.onkeyup 松开按键才会触发 任何按键都可以触发
5.获取键的键码
e.keyCode 可以获取到你按了哪个键，每个键都有自己对应的键码
如果事件委托
脱字符串的衣服，eval(str) 会悄悄的脱掉字符串的衣服再运算
如何判断目标元素是什么标签xx.nodeName 得到的标签名是全大写
事件处理函数可以写为箭头函数-->this会失效，所以必须使用目标元素target
this的指向
单个事件绑定事件this-->当前元素
多个元素绑定事件this-->当前元素
箭头函数this-->外部对象
