前端面试题(2)(成都 粗略版)

问答题

一、html

  1. h5新标签
    答:
    标签 说明
    video 视频
    audio 音频
    canvas 位图区域
    source 为video和audio提供数据源
    track 为video和audio提供字幕
    svg 定义矢量图
    code 代码段
    figure 和文档有关的图例
    figcaption 图例的说明
    time 日期和时间值
    mark 高亮的引用文字
    output 计算值
    progress 进度条
    menu 菜单
    menuitem 用户可点击的菜单项
    embed 嵌入的外部资源
    section 文档中的区段,相当于div
    nav 导航
    aside 文章的侧栏
    article 规定独立的自包含内容
    footer 底部
    header 头部
  2. section、article和div的区别
    答:div,section,article语义是从无到有,article元素可以看成是一种特殊类型的section元素,section元素强调分段或分块,article强调独立性,而在h5中div元素变成了一种容器,当使用css样式的时候,可以对容器进行一个总体的css样式的套用。
    https://blog.csdn.net/qq_22855325/article/details/72877285
  3. meta中name=‘viewport’时content里面的属性
    答:<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    属性名 备注
    width 设置viewport的宽度,可以指定一个值,如600,或者使用字符串“device-width”表示设备宽度
    height 和width相对应,device-height为设备的高度
    initial-scale 初始缩放比例
    maximum-scale 允许用户缩放到的最大比例,范围是0到10.0,可以有小数
    minimum-scale 允许用户缩放到的最小比例,范围从0到10.0
    user-scalable 用户是否可以手动缩放,值为yes/true允许缩放,值为no/false不允许缩放

二、css

  1. css向内绘制
    答:box-sizing:border-box;即所设置的宽高度包含padding和border
    默认值为content-box,即所设置的宽高度不包含border和padding
  2. css子级选择器执行顺序是从左到右还是从右到左  为什么
    答:从右到左,可以更快速匹配到指定元素
    http://www.cnblogs.com/zhaodongyu/p/3341080.html
  3. 绘制三角形的方法都有哪些
    答:向下的三角形
    (1)等腰三角形
    {
      0;
      height:0;
      border-left:10px solid transparent;
      border-right:10px solid transparent;
      border-top:10px solid#000;
    }
    等边三角形
    {
      0;
      height:0;
      border-left:5px solid transparent;
      border-right:5px solid transparent;
      border-top:10px solid#000;
    }
    (2)使用正方形旋转
    {
       10px;
      height: 10px;
      background-color: #000;
      transform: rotate(45deg);

    }
    (3)使用字符 ▼
    https://blog.csdn.net/hk2291976/article/details/52595290
  4. 行内元素和块元素水平和垂直居中的方法有哪些
    答:
    https://www.cnblogs.com/lzbk/p/6035755.html
  5. px,%,em,rem,vh,vw,pt的用法和区别
    https://blog.csdn.net/jyy_12/article/details/42557241
  6. backgroud-size中值的类型

  7. 对弹性布局的理解和css属性
    https://www.cnblogs.com/jerehedu/p/7358329.html
    https://blog.csdn.net/baidu_25343343/article/details/80498973

三、js

  1. 对js闭包的深刻了解及闭包为什么存在
    答:保护函数内的变量安全,通过保护变量的安全实现js私有属性和私有方法
    http://www.cnblogs.com/sikewang/p/5604297.html
  2. jquery和js对象的转换
    答:js转换成jquery
    var div1 = document.getElementById('#div');  var $div1 = $(div1)
    jquery转换成js
    var div1 = $('#div1')[0]   或   var div1 = $('#div1').get(0);
  3. js中this的指向问题 怎么让this指向对象
    this的指向是由运行时的执行环境来决定的
    https://www.jb51.net/article/103611.htm
  4. es6引入外部文件
  5. var和let和const区别
    https://www.jb51.net/article/116491.htm
  6. 如何理解js中的 继承 多态 等
    面向对象的好处就是可扩展性更强一些,解决了代码重用性的问题
    https://www.cnblogs.com/Leo_wl/p/5734794.html
    https://www.cnblogs.com/chris-oil/p/6140237.html
  7. js原型(添加和查看)和原型链
    节省内存
    https://www.cnblogs.com/wyaocn/p/5815761.html
  8. 将伪数组转换为正规数组
    https://www.cnblogs.com/NTWang/p/6280447.html
  9. function a(){}和let a=(这里是个剪头函数)  的区别
    https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001438565969057627e5435793645b7acaee3b6869d1374000
  10. 事件流  遵循的是冒泡还是捕获
    事件冒泡
    阻止冒泡 stoppropagation()
    阻止事件默认行为  preventDefault() 
    addeventlistener('click',function(){},true)   true  捕获  false  冒泡
    https://www.jb51.net/article/42492.htm
  11. 原型存在的目的
    节省内存  提高方法的复用性  便于继承
  12. 数据类型分为哪两种
    基本数据类型:number,string,Boolean,null、undefined
    引用数据类型:object,array,function,data
    一个存在栈里面,值直接存在变量访问的位置,复制变量相互独立
    一个存在堆里面,存储的是变量出值的指针,复制变量会相互影响,指向同一个对象
    https://www.cnblogs.com/cxying93/p/6106469.html
  13. js如何复制对象
    浅层拷贝  var b = object.assign({},a)
    json数据对象深拷贝  var b = JSON.parse(JSON.stringify(a));
    http://www.cnblogs.com/wangyulue/articles/7684515.html
  14. js绑定事件的方法
    在dom元素中直接绑定 <button onclick="a()"></button>
    js获得dom元素绑定  document.getElementById("#div").onclick = function(){}
    绑定事件监听函数  addEventListener("click",function(){},false)  (冒泡)
    https://www.jb51.net/article/95705.htm
  15. js获得dom元素的方法
    ...ById('id名'),...sByName('name属性值'),...sByTagName('标签名'),...sByClassName('类名')
    https://www.cnblogs.com/diasa-fly/p/7054660.html
  16. localstorage不能存什么数据

  17. 写一个简单的promise
    var p = new Promise(function(resolve,reject){
      setTimeout(resolve,1000);
    })
    p.then(function(){
      console.log('success');
    },function(){
      console.log('fail');
    })
    https://www.cnblogs.com/liuzhenwei/p/5235473.html
  18. promise和ajax异步分别在什么场景应用
    用同步的方式写异步代码
    https://www.jianshu.com/p/c613c0198430
  19. js原生请求怎么写

  20. typeof返回类型
    string,number,boolean,object(array,null),function,undefined
    https://blog.csdn.net/GreyBearChao/article/details/77914261
  21. apply和call的用途及区别

  22. js是单线程还是多线程,如果是单线程,ajax异步是如何实现的

四、jq

  1. jquery可以链式选择的原因

  2. jq中的extend作用
    为jquery类添加方法
    https://www.cnblogs.com/yuqingfamily/p/5775950.html
  3. 事件委托和事件绑定的区别
    https://www.cnblogs.com/wufangfang/p/5333007.html
  4. jq里面常用的方法
    https://www.jianshu.com/p/b01ba05f04eb?utm_campaign
  5. 字符串和数组常用方法及方法里面的参数
    http://www.cnblogs.com/songzk/p/6081883.html
    https://www.cnblogs.com/YYvam1288/p/6973252.html
  6. ajax请求类型有哪些、默认请求为同步还是异步,ajax内参数都有哪些
    https://blog.csdn.net/com360/article/details/6538102
  7. options、put、delete等请求方法如何应用及应用场景
    http://www.cnblogs.com/yin-jingyu/archive/2011/08/01/2123548.html
  8. ajax参数error里面如果有错误,应如何解决(这个函数里面有自身的方法)
  9. jq给动态添加的元素添加绑定事件
    jq添加绑定事件的方法有on(),bind().live(),delegate()其中不能给动态添加的元素绑定事件的只有bind()
    https://blog.csdn.net/xiaozhi_2016/article/details/52184328

五、ag2

  1. 子父级组件数据通信
    https://blog.csdn.net/u010730126/article/details/68080139
  2. angular2创建模块  模块里面的参数
    https://www.jb51.net/article/95092.htm
  3. promise和obsevable的区别和理解
    https://blog.csdn.net/napolunyishi/article/details/51339006
  4. ngif和ngshow的区别及应用场景
    https://blog.csdn.net/liuxufeijidian/article/details/78209890
  5. 数据双向绑定是如何实现的
  6. ag2中的双向数据绑定是什么模式,是如何实现的
    https://blog.csdn.net/fen747042796/article/details/58249745
  7. angular的数据绑定采用什么机制?如何实现?
  8. ag2如何封装指令和常用指令有哪些

七、混杂

  1. 对前端模块化的理解
    https://blog.csdn.net/lxcao/article/details/52774825
  2. 前后端分离 和后台联调的问题
  3. 如果使用代理还是存在非同源跨域怎么解决
    https://blog.csdn.net/qq_32177809/article/details/79740500
  4. git和svn回退版本的语句
  5. 写出你了解的设计模式,有哪些地方曾经用到过这些设计模式
    https://www.cnblogs.com/xianyulaodi/p/5827821.html
  6. 百度地图、高德地图和超图的区别
  7. bootstrap和amazeui的区别
    https://zhidao.baidu.com/question/588381255811959005.html
  8. vue和angular的区别
    https://blog.csdn.net/qq_21859119/article/details/70598938
  9. ie8+的兼容问题
    https://www.cnblogs.com/ruomeng/p/5332814.html
  10. 页面优化方案有哪些
    https://www.cnblogs.com/coober/p/8078847.html
  11. 在工作期间遇到的最难的问题及如何解决的

计算题

  1. 数组去重的方法
  2. 只出现一次的数字
    给定一个非空整数数组,除了某个元素只出现一次以外,其余每个元素均出现量词,找出那个只出现一次的元素。
    示例1: 输入:[2,2,1]  输出:1
    示例2: 输入:[4,1,2,1,2] 输出:4
  3. 构造一个正则表达式,判断字符串是否是这样组成的:第一个必须是大写字母,后面可以使字母、下划线或数字,总长度为5-20
  4. js中要得到一个大于等于20且小于30的随机整数
  5. 从1到500的和
  6. 在还有字母和数字的js数组中查找能够整除2的数的方法(不使用for循环的方式)
  7. 分别输出a的值
    (1)  let a; a=4;
    (2)  var a; a=4;
    (3)  a=4; let a;
    (4)  a=4; var a;
  8. function foo(){
      getName = function(){
        alert(1);
      }
      return this;
    }

    foo.getName = function(){
      alert(2);
    }

    foo.prototype.getName = function(){
      alert(3);
    }

    var getName = function(){
      alert(4);
    }

    问以下均输出什么
    (1) foo.getName()
    (2) .....

选择题

  1. 在设置了宽度为高度的块元素上,要使padding属性作用域宽高区域以外(即撑大边框),可以使用属性()
    A、box-sizing   B、resize  C、box-orient  D、outline  E、padding-out
  2. 要控制文字间的距离可以使用()属性
    A、white-space  B、font  C、word-spacing  D、letter-spacing  E、text-wrap
  3. 要让鼠标指针变为手型,可以设置cursor属性值为()
    A、default  B、hand  C、pointer  D、wait  E、move
  4. 在js中要删除数组中指定位置的元素,可以使用()
    A、slice()  B、splice()  C、shift()  D、pop()  E、unshift()
  5. 在js中更改id为‘text’的对象文字颜色,正确的方法是()
    A、document.getElementByName('text').text.color='#00ff00';
    B、document.getElementById('text').style.color='#00ff00';
    C、document.getElementById('text').style.color('#00ff00');
    D、document.getElementById('#text').style.color('#00ff00');
    E、document('text').color='#00ff00';
    F、body('text').style.color='#00ff00';
原文地址:https://www.cnblogs.com/wzy1569178479/p/9488131.html