1. js的window.onload事件和$(document).ready函数有什么区别?
在js中:
window.οnlοad=function(){
alert("000")
}
等同于在jQuery中:
$(window).load(function(){
alert("000");
})
相同点:
(1)它们都是用于当前页面的所有元素,包括外部引用文件,图片都加载完毕时运行函数的alert函数。
(2)它们都是用于当前页面的标准DOM元素被解析成DOM树后就执行内部alert函数。
不同点:
(1)load方法只能执行一次,如果js文件里写了多个,只能执行最后一个。
(2)$(document).ready()函数在HTML结构加载完后就可以执行,不需要等大型文件加载或者不存在的连接等耗时工作完成才执行。
2. Promise的基本使用和原理
作用:
(1)解决回调地狱问题
(2)可以实现在多个请求发送完成后,再得到或者处理某个结果
原理:
promise有三种状态:
Pending Promise 对象实例创建时候的初始状态;
Fulfilled 可以理解为成功的状态;
Rejected可以理解为失败的状态;
(1)构造一个Promise实例需要给Promise构造函数传入一个函数。传入的函数需要有两个形参,两个形参都是function类型的参数。分别是resolve和reject。
(2)Promise上还有then方法,then 方法就是用来指定Promise 对象的状态改变时确定执行的操作,resolve 时执行第一个函数(onFulfilled),reject时执行第二个函数(onRejected)
(3)当状态变为resolve时便不能再变为reject,反之同理
3.下列html结构中,如何让子元素在父元素中垂直、水平居中。
<div class="parent">
<div class="child"></div>
</div>
一共有七种方法:
(1)定位+margin:auto
注意:兼容性较好,缺点:不支持IE7以下的浏览器
.parentr {
position: relative;
width: 300px;
height: 300px;
background: yellow;
}
.child {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 100px;
height: 100px;
background: red;
}
(2)定位+margin-left+margin-top
注意:兼容性好;缺点:必须知道元素的宽高
.parent {
position: relative;
width: 300px;
height: 300px;
background: yellow;
}
.child {
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
width: 100px;
height: 100px;
background: red;
}
(3)定位+transfrom
这是css3里的样式;缺点:兼容性不好,只支持IE9+的浏览器
.parent {
position: relative;
width: 300px;
height: 300px;
background: yellow;
}
.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 100px;
height: 100px;
background: red;
}
(4)弹性盒子
移动端首选
.parent {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 300px;
background: yellow;
}
.child {
width: 100px;
height: 100px;
background: red;
}
(5)flex+margin: auto
.parent {
display: flex;
width: 300px;
height: 300px;
background: yellow;
}
.child {
margin: auto;
width: 100px;
height: 100px;
background: red;
}
4.列举2个IE与标准浏览器对事件处理的区别?(监听、阻止冒泡、阻止默认等)
(1)阻止(取消)默认事件
DOM中:event.preventDefault() 阻止默认行为;
IE中: event.returnValue=false 返回值=false
(2)取消冒泡事件
标准浏览器下 DOM中 : event.stopPropagation() 停止传播;
IE8及以下:event.cancelBubble=true 取消冒泡
(3)事件侦听和删除侦听(又叫绑定事件)
ie9以上:添加事件:element.addEventListener(‘事件名’,事件函数名,事件冒泡/捕 获);
ie8及以下:添加事件:element.attachEvent(‘on开头的事件名’,事件函数名);
5.指出for、for...in、for...of的区别
(1)for循环:
for循环可以有多层嵌套;
for循环中的变量生存周期为一次循环迭代;
循环条件时每次循环执行一次,而且是在循环最开始时判断条件;
(2)for...in循环:
for..in是 ES5出现的, 循环遍历的是属性,并且自定义属性(attribute)也会被遍历,而且遍历还不一定按照顺序
作用于数组的for-in会循环遍历数组元素
(3)for...of循环:
for...of 是ES6出现的 循环遍历的是值
for...of不能循环普通的对象,需要通过和Object.keys()搭配使用