这周真的绝望了,睡了一觉起来感觉啥都忘了,这感觉让人抓狂,无措,那又能怎么办呢,上了贼穿就没有跳船这一说。
第一天:
1、ES5:
(1)保护对象:保护对象的成员(属性和方法)
如何保护:
①四大特性:
Object.defineProperties(obj,{
"属性名":{
value:实际保存值,
writable:true/false, //控制这个属性是否被修改
enumerable:true/false, //控制这个属性是否被for in 循环遍历
configurable:true/false, //控制这个属性是否被删除 总开关,一旦设置false,其他特征不允许被修改,一旦设置false,不可逆。
}
})
②三大级别:
a、防扩展:禁止给对象添加新属性:Object.preventExtensions(obj);
b、密封:禁止给对象添加新属性和删除属性:Object.seal(obj);
c、冻结:禁止给对象添加、删除、修改属性:Object.freeze(obj);
(2)数组的新API:
①判断:结果是一个布尔值
every:每一个,要求每一个元素都要满足,结果才为true,只要有一个不满足就为false,类似于&&
语法:
var bool = arr.every(function(val,i,arr){
return 判断条件;
})
some:某一个,要求每一个元素都不满足,结果才为false,只要有一个满足就为true,类似于||
语法:
var bool = arr.some(function(val,i,arr){
return 判断条件;
})
②遍历:将数组中每个元素取出来执行相同或相似的操作
forEach:遍历数组,直接修改原数组
语法:
arr.forEach(function(val,i,arr){
直接做操作;
})
map:遍历数组,不修改原数组,返回一个新数组
语法:
var newArr = arr.map(function(val,i,arr){
return 操作结果;
})
③过滤和汇总
过滤:筛选出自己想要的,但是不会修改原数组
语法:
var subArr = arr.filter(function(val,i,arr){
return 判断条件;
})
汇总:把数组中的每个元素汇总在一起
语法:
var sum = arr.reduce(function(prev,val,i,arr){
return prev+val;
},基础值);
(3)Object.create(); //根据父对象创建子对象,继承已经设置好了
语法:
var 子对象 = Object.create(父对象,{
"自有属性名":{四大特性},
.................
})
(4)面试时:严格模式
开启:在任何作用域的顶部加:"use strict";
功能:①禁止给未声明的变量赋值--解决全局污染的问题
②静默失败升级为报错
(5)call/apply/bind:不是自己的方法也能使用
①call / apply :临时替换了函数中的this---借用(相当于立刻调用函数,立刻执行)
语法:函数名.call(借用的对象,实参,。。。); ----单独传入每一个实参
函数名.apply(借用的对象,arr); ---只能传入一个数组实参,apply会将数组打散成为单个元素
②bind :永久替换了函数中的this
a:创建了一个和原函数完全相同功能的新函数
b:将新函数中的this永久绑定为了指定的对象,别人借不走
c:将新函数中的部分参数永久固定
用法:var 新函数 = 原函数.bind(指定对象,永久实参,。。。); //不是立刻执行,需要自己调用
强调:bind绑定的新函数没有办法被call apply借走
固定套路:
①Math.max/min.apply(Math.arr);
②Object.prototype.toString.call/apply(arr);
③类数组转为普通数组:类数组名 = Array.prototype.slice.call/apply(类数组);
2、ES6 简化EMCAScript
(1)模板字符串:可以在字符串中放入变量--不需要再做字符串拼接,在字符串中实现了一个简单的js环境
语法:`我的名字叫${name}`
(2)块级作用域:
let 变量名 = 值;
作用:①禁止声明提前
②添加了块级作用域,一个{}是一个块,变量只能在定义中使用
③记录着当前触发事件的元素的下标
(3)箭头函数
公式:去掉function,()和{}之间用=>,若形参只有一个,则省略掉(),若函数体只有一句话,省略{},函数体只有一句话且是return,return和{}都省略
千万不要简化事件
第二天
1、什么是DOM:Document Object Model(文档对象模型)
将每一个标签/元素/属性/文本/注释,看作了一个DOM节点/元素/对象,提供了一些操作元素的属性和方法。
2、DOM树:document,一个页面只有一个document对象,由浏览器的JS解释器自动生成,可以通过树根找到每一个DOM元素,节点,对象,提供了很多APT
3、每个DOM元素都有三大属性
(1)xx.nodeType:描述节点的类型
document节点:9;element节点:1;attribute:2;text节点:3
(2)xx.nodeValue:属性节点的值,获取属性值
(3)xx.nodeName:节点的名称--判断xx是什么标签
注意:返回的是一个全大写得标签名
(4)递归:函数中又一次调用了函数自己,迟早会停下来
何时使用:遍历DOM树,专门用于遍历层级不明确的情况
如何使用:
function 函数名(){
①第一层要做什么操作直接做;
②判断它有没有下一级,如果有下一级再次调用此函数,只不过传入的实参是它的下一次;
}
缺点:同时开启大量的函数调用,浪费内存
4、遍历层级不明确的API:TreeWalker:一个在DOM树上行走的人,
缺点:专门为遍历层级不明确的DOM准备
如何:
固定公式:
①创建tw:
let tw=document.createTreeWalker(根元素,NodeFilter.SHOW-ELEMENT);
②反复调用nextNode方法找到每一个元素-》找不到为null
while((node=tw.nextNode())!=null){
node要做什么操作;
}
5、API直接查找元素
(1)通过HTML的一些特点去找元素
①id:var elem=document.getElementById("id"); - 找到了是单个元素,没找到null
②tagname/class/name:
var elems=document.getElementsByTagName/ClassName/Name("标签名/class名");- 找到了是集合,没找到空集合
建议:表单控件元素尽量可以不用写class,因为必写name
(2)通过css选择器去获取元素:
① 单个元素:var elem=document.querySelector("任意css选择器");
②多个元素:var elems=document.querySelectorAll("任意css选择器");
面试题:getXXX 和 querySelectoXXX 有什么区别?
返回结果不同:
1、getXXX,获取到返回的是一个动态集合HTMLCollection
2、querySelectoXXX,获取到返回的是一个静态集合NodeList
动态集合 vs 静态集合
1、动态集合:根据DOM树的改变,是动态集合也一起改变,每一次修改DOM树,都会悄悄的再次查找DOM
缺点:每次都会悄悄重新查找,效率较低,不能使用forEach
2、静态集合:每一次修改DOM树,静态集合不会发生变化,只会认准你找的时候的第一次找到的结果
优点:每次不会悄悄重新查找,效率较高,可以使用forEach
第三天
1、元素的内容:
*1、elem.innerHTML:获取或设置开始标签到结束标签之间的HTML代码,没有兼容性问题,可以识别标签
获取:elem.innerHTML
设置:elem.innerHTML="新内容"
2、elem.textContent:获取或设置开始标签到结束标签之间的纯文本,具有兼容性问题,不能识别标签
获取:elem.textContent
设置:elem.textContent="新内容"
*老IE:elem.innerText;//第一次碰到小三上位,原本是只有老IE才可以使用的,但是随着各个浏览器的发展,IE没有将就大家,反而是其他主流浏览器去将就了老IE
*3、input.value:获取或设置单标签(能写内容的单标签)的内容的
获取:input.value;
设置:input.value="新内容"
2、元素的属性:
*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("属性名");
真的想要判断,更推荐:
if(elem.getAttribute("class")=="d1"){
使用获取的方式能判断出具体是什么class
}
强调:HTML DOM确实简单,但是需要注意:
1、class写为className
2、只能操作标准属性,不能操作自定义属性
3、删除的时候,删不干净,有的属性删不干净依然具有功能,比如href没有属性值默认为刷新、disabled就算没有属性值依然是禁用操作...,跟推荐删除的时候使用核心DOM
3、元素的样式:
1、内联样式:优先级最高,一定会覆盖其他的样式
仅仅当前元素可用,不会牵一发动全身
获取样式:elem.style.css属性名
设置样式:elem.style.css属性名="css属性值"
唯一的缺点:获取样式时,也只能获取内联样式
2、样式表:
//1、获取你想要操作的样式表
var sheet=document.styleSheets[1];
//2、获取这个样式表中所有的样式规则
var rules=sheet.cssRules;
//3、数出你想要操作的那个样式规则
var rule=rules[30];
//4、操作:获取和设置
console.log(rule.style.background);
rule.style.background="purple"
第四天:
1、BOM:Browser Object Model:浏览器对象模型:专门用于操作浏览器的API,没有标准(大部分浏览器还是统一的实现了API,除了老IE),BOM使用较少
重点:定时器、事件对象event
2、window对象介绍:扮演着2个角色
1、代替了ES中的global,充当全局对象
2、自己也带有一些属性和方法,指代当前窗口本身
3、window对象提供的东西:
1、网页打开新链接的方式:4种
1、替换当前页面,可以后退:
HTML:<a href="url">内容</a>
JS:open("url","_self");
2、替换当前页面,禁止后退: - 场景:电商网站:付款后,禁止后退
history对象:记录着当前窗口的历史记录,只有有了历史才能前进后退
location对象:记录着当前窗口的正在打开的url,他有一个方法叫做替换,不会产生历史记录
JS: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,新打开的窗口会将就的窗口给替换掉,_self->自己窗口的名字,_blank->新建一个随机的名字
总结:
1、HTML能做的,JS都能做,JS能做的,HTML不一定可以
2、不同的跳转方式,可以提升用户的体验感
扩展:a标签的作用:
1、跳转
2、锚点
3、下载:<a href="xx.安装后缀/压缩包后缀">内容</a>
4、打开:<a href="xx.txt/图片后缀">内容</a>
5、直接书写javascript:<a href="javascript:js语句;">内容</a> - 可以不用绑定点击事件
2、window提供的属性和方法:
属性:获取浏览器的完整大小:outerWidth/Height;
*获取到浏览器的文档显示区域的大小:innerWidth/Height; - body的大小
获取到屏幕的完整大小:screen.width/height;
方法:1、打开窗口:var newW=open("url","target/自定义","width=,height=,left=,top=");
注意:1、第三个配置参数没有传入时,大小和浏览器一样,并且粘在浏览器上面的,但是如果有了第三个参数,脱离浏览器
2、宽高不能设置的太小了
2、关闭窗口:window/newW.close();
3、修改窗口的大小:newW.resizeTo(newW,newH);
4、修改窗口的位置:newW.moveTo(x,y);
扩展:***获取鼠标的位置:2步
1、在事件函数中的小括号里传入一个形参e,自动获取到事件对象event
2、获取坐标:
e.screenX/Y - 鼠标相对于屏幕的坐标:鼠标就算在最上面也是70px左右
e.clientX/Y - 鼠标相对于文档显示区域的坐标:网页不管多长多大,始终顶部是0,底部是900多
*e.pageX/Y - 鼠标相对于整个页面的坐标 - 跟随我们的网页变化
完成鼠标跟随动画:
1、window/document.onmousemove - 在页面的任何位置移动鼠标都会触发
2、js的加载速度比图片的加载速度快,使用加载事件:onload
3、*****定时器:2种
*1、周期性定时器:每过一段时间,会执行一次定时器中的操作
开启:timer=setInterval(callback,间隔毫秒数)
停止:clearInterval(timer);
2、一次性定时器:等待一段时间,执行一次定时器之中的操作就停止了
开启:timer=setTimeout(callback,等待毫秒数)
停止:clearTimeout(timer);
注意:一次性和周期性底层都是一样的,甚至可以相互转换,所以到底用哪个都可以
总结:函数 和 循环 和 定时器 都能反复执行,区别?
1、函数 - 用户触发绑定事件
2、循环 - 一瞬间基本就结束了
3、定时器 - 等一段时间做一次