zoukankan      html  css  js  c++  java
  • 面试题

    1. js的window.onload事件和$(document).ready函数有什么区别?

    在js中:
    window.onload=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;
    300px;
    height: 300px;
    background: yellow;
    }
    .child {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    100px;
    height: 100px;
    background: red;
    }

    (2)定位+margin-left+margin-top
    注意:兼容性好;缺点:必须知道元素的宽高
    .parent {
    position: relative;
    300px;
    height: 300px;
    background: yellow;
    }
    .child {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
    100px;
    height: 100px;
    background: red;
    }

    (3)定位+transfrom
    这是css3里的样式;缺点:兼容性不好,只支持IE9+的浏览器
    .parent {
    position: relative;
    300px;
    height: 300px;
    background: yellow;
    }
    .child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    100px;
    height: 100px;
    background: red;
    }

    (4)弹性盒子
    移动端首选
    .parent {
    display: flex;
    justify-content: center;
    align-items: center;
    300px;
    height: 300px;
    background: yellow;
    }
    .child {
    100px;
    height: 100px;
    background: red;
    }

    (5)flex+margin: auto
    .parent {
    display: flex;
    300px;
    height: 300px;
    background: yellow;
    }
    .child {
    margin: auto;
    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()搭配使用

  • 相关阅读:
    十大排序算法
    SQL优化指南
    Python基础-类与对象
    Python基础-函数
    Python基础-字典
    Python基础-字符串
    Python基础-列表
    以太坊智能合约开发框架Truffle
    比特币钱包搭建与使用
    矩阵的压缩存储
  • 原文地址:https://www.cnblogs.com/wdp888/p/11219845.html
Copyright © 2011-2022 走看看