大乱炖

目录

HTML

CSS

JS

JQuery

VUE

---

一、HTML

1. 行内元素有哪些？u，b，i，a，sub，sup，img，em，span，input，select
2. 块级元素有哪些？h1-6，div，p，ul，li，ol，dl，table，form
3. css引入的方式有哪些？
   内联（行内），内嵌（标签），外链（link），导入（import）
   
   拓展：link和import的区别？

   (1)从属关系区别
   @import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。

   (2)加载顺序区别
   加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。

   (3)兼容性区别
   @import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。

   (4)DOM可控性区别
   可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。

   (5)权重区别(该项有争议，下文将详解)
   link引入的样式权重大于@import引入的样式。

4. h5的新特性？
   (1)增加语义化标签：header，nav，footer，canvas，article，aside，hgroup；
   (2)本地存储。提供了sessionStorage、localStorage和indexedDB；
   (3)离线web应用；
   (4)表单新增功能：placeholder，autofocus（页面只能有一个），type为email、number等；
   (5)css3；
   (6)地理定位；

二、CSS

1. display:none;和visibility:hidden;的区别？
2. style标签写在body前和写在body后有什么区别？
3. css3的新特性？
   (1)半透明属性：rgba；
   (2)background-image(多背景图)；ps.以前只支持一个图片；
   (3)border-image；
   (4)圆角；
   (5)box-shadow，text-shadow
   (6)新增css选择器；
   
   新增属性选择器：
   E[foo^='bar'] 匹配E元素，该元素包含foo属性，且foo属性值以bar开头
   E[foo$='bar'] 匹配E元素，该元素包含foo属性，且foo属性值以bar结尾
   E[foo*='bar'] 匹配E元素，该元素包含foo属性，且foo属性值包含bar字符串
   
   伪类选择器：
   E:root 匹配文档所在的根元素
   E:nth-child(n) 匹配E所在父元素第n个匹配E的元素，非E的子元素也参与排序，若第n个子元素不是E元素，则该语句没有效果（注意这里的n从1开始）
   E:nth-last-child(n) 匹配E所在父元素倒数第n个匹配E的元素
   E:nth-of-type(n) 匹配E所在父元素第n个匹配E的元素，非E的子元素不参与排序(n同样是从1开始）注意区别nth-child(n)
   E:last-child
   E:first-of-type
   E:last-of-type
   E:only-child
   E:only-of-type
   E:empty
        拓展：
        css3之前的选择器：id选择器，类选择器，包含选择器(.class .class)，伪类选择器(:link,visited,hover,active,focus,
        first-child)，伪元素选择器(::first-line,first-letter,before,after)，通配选择器(*)，属性选择器(input[name='a'])，子包含选择器
        (a > b)，相邻兄弟选择器(a+b)，
   (7)transform；
   (8)transition；
   (9)animation；
4. 清除浮动的方式？
   （1）给父级加浮动；
   （2）给父级加display:inline-block;
   （3）在浮动元素下加<div class="clear"></div>    .clear {height:0;font-size:0;clear:both;}
   （4）在浮动元素下加<br clear="all"/>
   （5）给浮动元素父级加{zoom:1;}      :after{content:''; display:block; clear:both;}
   （6）给浮动元素父级加overflow:hidden;
5. div水平居中、垂直居中的方法
   （1）div无固定宽高
   方法一：top: 50%; left: 50%; transform: translate(-50%,-50%);
   
   =>缺点：1> IE8以下不支持；2> 属性需要写浏览器厂商前缀；3> 可能干扰其他transform效果；4> 某些情形下会出现文本或元素边界渲染模糊的现象；
   
   方法二：flex
   
   （2）div有固定宽高
   方法一：margin 负间距
          .wrapper {
               width: 400px;
               height: 18px;
               padding: 20px;
               background: orange;
               color: #fff;
               position: absolute;
               top:50%;
               left:50%;
               margin-top: -9px;
               margin-left: -200px;
           }
   
   方法二：margin:auto实现绝对定位元素的居中（该方法兼容ie8以上浏览器）

          .wrapper {
               width: 400px;
               height: 18px;
               position: absolute;
               left:0;
               right:0;
               top: 0;
               bottom: 0;
               margin: auto;
           }

6.  

三、JS

1. JS的数据类型？
   ES5：string，number，boolean，null，undefined，object;
   ES6：symbol
   基本类型：string，number，boolean，null，undefined；
   引用类型：object；
   
   拓展：
   （1）undefined：没有初始化、定义的值；
   （2）null：不存在的对象；
   （3）NaN：number中的特殊数值，NaN!=NaN，判断NaN用isNaN；
   （4）number包括整数型和浮点型；
2. 判断数据类型？typeOf()
3. 判断是否是数组？Array.isArray();
4. 判断对象中是否有某属性？hasOwnProperty("")
5. 实现深拷贝？
   （1）JSON.parse(JSON.stringify())
   （2）递归函数
   function cloneObject(obj) {
     var newObj = {} //如果不是引用类型，直接返回
     if (typeof obj !== 'object') {
       return obj
     }
     //如果是引用类型，遍历属性
     else {
       for (var attr in obj) {
         //如果某个属性还是引用类型，递归调用
         newObj[attr] = cloneObject(obj[attr])
       }
     }
     return newObj
   }
6. 阻止冒泡？
   e.stopPropagation;  e.cancelBublle=true;
7. 阻止默认行为？
   e.preventDefault;    e.returnValue=false;
8. 严格模式怎么定义？use strict;
9. 字符串转JSON？JSON.parse();
10. Json转字符串？JSON.stringify();    arr.toLocalString();
11. 字符转number类型？parseInt();    parseFloat();等
12. 数组转字符串？join(",");
13. 字符串转数组？split(',');
14. 数组添加元素？
    尾部：push()；
    头部：unshift()；
     
15. 数组删除元素？
    删除第一个：shift()
    删除最后一个：pop()
    删除指定位置元素：splice(开始删除的位置下标，删除的个数，向数组添加的元素)
    备注：slice是返回选定的元素（开始位置，结束位置）
16. 数组排序？sort
17. 合并数组？concat()
18. es6声明变量的方法：let,const,var,function,import,class

19. 遍历键值对 
    （1）for(let [key, value] of ['a', 'b'].entries()){  console.log(key, value);  } // 0 "a" // 1 "b"
    （2）
    遍历键名 for(let key of ['a', 'b'].keys()){ console.log(key); } 
    遍历键值 for(let value of ['a', 'b'].values()){ console.log(value); }

20. 是否包含某个值：includes()   [1, 2, 3].includes(1); // true

21. 嵌套数组转一维数组 console.log([1 ,[2, 3]].flat()); // [1, 2, 3]

22. 先对数组中每个元素进行了的处理，再对数组执行 flat() 方法。
    // 参数1：遍历函数，该遍历函数可接受3个参数：当前元素、当前元素索引、原数组
    // 参数2：指定遍历函数中 this 的指向
    console.log([1, 2, 3].flatMap(n => [n * 2])); // [2, 4, 6]

23. 获取数组中的最大值的几种方法：
    var arr = [-1, 1, 101, -52, 10, 1001, 1001]
    （1）arr.reduce(function(a , b){ return b > a ? b : a; });
    （2）es6拓展运算符：Math.max(...lists.map(x => x.id));（对象数组）
    （3）es5 apply(与方法2原理相同)：Math.max.apply(null,arr)
    （4）for循环：
    let max = arr[0];
    for (let i = 0; i < arr.length - 1; i++) {
        max = max < arr[i+1] ? arr[i+1] : max
    }
    （5）arr.sort((num1, num2) => {  return num1 - num2 < 0 })      arr[0]

24.  

25.  

四、JQuery

1. $(document).ready() 是个什么函数。
   文档进入ready状态时执行代码。当DOM完全加载（HTML被完全解析DOM树构建完成时），执行代码。它适用与所有浏览器。
   拓展：window.onload和$(document).ready() 有什么不同？
   window.onload除了要等待DOM被创建还要等到包括大型图片、音频、视频在内的所有外部资源都完全加载。
   $(document).ready()只需对DOM树的等待，而无需对图像活外部资源加载的等待，执行起来更快。另一个优势是，在网页中多次适用，浏览器会按他们在HTML页面里出现的顺序执行他们。
2. 获取HTML中select标签的选中项？$('[name=selectname] :selected')
3. 如何设置属性的值？attr，prop
   拓展：attr与prop的区别？
   对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
   对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
   
   （1）添加属性名称该属性就会生效应该使用prop();
   （2）是有true,false两个属性使用prop();（如'checked','selected','disabled'等）
   （3）其他则使用attr();
4. 插入节点的方法？
   append：向匹配的元素内部追加内容；
   appendTo：将内容追加到指定的元素中；
   prepend：向匹配的元素内部前置添加内容；
   prependTo：将内容前置到指定的元素中；
   after：在匹配的元素之后插入内容；
   insertAfter：将内容插入到指定元素的后面；
   before：在匹配的元素之前插入内容；
   insertBefore：将内容插入到指定元素的前面；
5. 获取html内容？.html()
6. 获取文本内容？.text()
7. 判断是否有某个class？hasClass();
8. jq获取子元素的方法？
   children和find
   
   两者的区别是？
   children()方法：获取该元素下的直接子集元素
   find()方法：获取该元素下的所有子集元素

 

五、VUE

1. 父组件向子组件传递数据？props
2. 子组件调用父组件的方法？$emit
3. 如何让css只在当前组件起作用？scoped

   拓展：如何在scoped模式下修改element ui组件的样式？

   （1）使用深度作用选择器，vue-loader（需要先安装才能使用）。

    <style scoped> .a >>> .b {……} </style>

   （2）在less、sass预处理器中无法使用>>>，可以用/deep/组合器。

4. 如何新增自定义指令？directive
5. 如何自定义过滤器？
   html:

   <div id="app">
     <input type="text" v-model="msg" />
     {{msg| capitalize }}
   </div>

   js:

   var vm=new Vue({
     el:"#app",
     data:{ msg:'' },
     filters: {
       capitalize: function (value) {
         if (!value) return ''
         value = value.toString()
         return value.charAt(0).toUpperCase() + value.slice(1)
       }
     }
   })

6. vue中 key 值的作用？
   当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key的作用主要是为了高效的更新虚拟DOM。
7. 什么情况下使用computed？
   在模板中放入太多的逻辑会让模板过重且难以维护，在需要对数据进行复杂处理，且可能多次使用的情况下，尽量采取计算属性的方式。
   
   拓展：使用computed计算属性与使用methods方法计算属性有什么区别？
   （1）computed不能接收参数，methods方法可以接收参数；
   （2）依赖数据不变的时候computed从缓存中获取，不会重新计算，methods方法不管依赖的数据变不变都会重新计算；
8. vue-router 有哪些钩子函数?
   全局前置守卫 router.beforeEach
   全局解析守卫 router.beforeResolve
   全局后置钩子 router.afterEach
   路由独享的守卫 beforeEnter
   组件内的守卫 beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
9. vue的生命周期？
   beforeCreate和created
   beforeMount和mounted
   beforeUpdate和updated
   beforeDestory和destoryed
10. v-for 遍历对象
    <span v-for="(val, key, i) in obj"></span> val：值 key：键名  i：索引
11. 输入框的事件
    @input 适用于实时查询，每输入一个字符都会触发该事件
    @keyup.enter 点击回车键触发
    @change
    @blur 失焦
12. 监听对象中的某个值？
    watch: { 'addForm.startStopStake'(newVal) {} }
13.  

六、HTTP

1. 状态码
   200：请求已成功；
   400：（1）语义有误，当前请求无法被服务器理解。除非进行修改，否则客户端不应该重复提交这个请求。（2）请求参数有误。
   401：当前请求需要用户验证；
   404：请求失败，一般是地址错误；
   406：一般是请求头与后台接口请求格式不一致；
   408：请求超时；
   500：服务器错误，一般是后台代码报错；

七、其他

1. 前端优化的手段？
   （1）减少请求数量
   （2）减小资源大小
   （3）优化网络连接
   （4）优化资源加载
   （5）减少重绘回流
   （6）性能更好的API
   （7）webpack优化
2. 常用的浏览器有哪些？
   IE：Trident（遨游、世界之窗、腾讯TT），-ms-；
   Chrome/Safari：webkit(开源，苹果公司自己的内核)，-webkit-；
   Firefox：Gecko(开源，c++编写)，-moz-；
   Opera：presto，-o-；