2018.04.11-面试知识点总结

一下今天面试前端岗位被面试官问到的知识点：

JS:

一、例如www.baidu.com?id=1&test=2&num=3,这样一个url 要获取其中参数test的值，怎么获取？这样截取会出现什么错误 

 方法一：正则表达式 match()

1 var keyword = getQueryString("keyword");
2     var id = getQueryString("id");
3     function getQueryString(name) {
4         var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
5         var r = window.location.search.substr(1).match(reg);
6         if (r != null) return decodeURIComponent(r[2]); return null;
7     }

方法二：split()截取

 1  function GetRequest() {
 2         var url = location.search; //获取url中"?"符后的字串
 3         var theRequest = new Object();
 4         if (url.indexOf("?") != -1) {
 5             var str = url.substr(1);
 6             strs = str.split("&");
 7             for(var i = 0; i < strs.length; i ++) {
 8                 theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
 9             }
10         }
11         return theRequest;
12     }
13     var Request = GetRequest();
14     alert(Request["keyword"]);
15     alert(Request["id"]);

 

二、数组去重的方法

方法一：

1  var arr = [1,1,2,5,0];
2     var temp = [];
3     for(var i = 0;i < arr.length; i++){
4         if(temp.indexOf(arr[i])){
5             temp.push(arr[i]);
6         }
7     }
8     console.log(temp);输出结果：

 

方法二：

 

CSS:

pc端：

一、position:absolute和position:relative的区别

absolute绝对定位：

生成绝对定位元素。使元素脱离文档流，并相对于其包含块进行定位，包含块多是文档中的另外一个元素或者是初始包含块，

元素原先在正常文档流中所占的空间会会被后面元素占据；

不论是块级元素仍是行内元素，应用了position:absolute以后，display为block：

脱离文档流，容器（父）元素将得不到脱离普通流的子元素高度

relative相对定位：

二、垂直居中的几绝对定位种方法，外层是vertical-align 里面的内容真的就能居中吗？

vertical-align缺点

三、块级元素和行级元素的区别？

块级元素具备如下特色：

①老是在新行上开始，占据一整行；
②高度，行高以及外边距和内边距均可控制；
③宽带始终是与浏览器宽度同样，与内容无关；
④它能够容纳内联元素和其余块元素。

行内元素的特色：

①和其余元素都在一行上；
②高，行高及外边距和内边距部分可改变；
③宽度只与内容有关；
④行内元素只能容纳文本或者其余行内元素。

不能够设置宽高，其宽度随着内容增长，高度随字体大小而改变，内联元素能够设置外边界，可是外边界不对上下起做用，只能对左右起做用
 

四、两个div块级元素都有margin:20px;上下两个div之间的margin值，

若这两个div是浮动float的，这是的margin又是多少？

给span元素margin:10px 20px;多个span下，有左右边距20px 上下无边距，若为span元素加float 上下左右都有margin值。

 

 

 

五、get和post的区别

• GET 请求可被缓存
• GET 请求保留在浏览器历史记录中
• GET 请求可被收藏为书签
• GET 请求不该在处理敏感数据时使用
• GET 请求有长度限制
• GET 请求只应当用于取回数据

• POST 请求不会被缓存
• POST 请求不会保留在浏览器历史记录中
• POST 不能被收藏为书签
• POST 请求对数据长度没有要求

六、jq ajax提交数据，用什么方法接受返回的内容？

用success error

七、提交表单，显示loading的层，在何时关闭loading层？

使用complete事件 在此事件中关闭loading层

八、例如ul 里有不少个li,用jq方法获取li排第几个？

 

九、给ul绑定点击事件，又给li绑定点击事件，怎么知道是触发ul的事件仍是li的事件？

点击li元素，先触发li绑定事件，再触发ul绑定的事件，

十、一个遮罩层，若遮罩层中间包含一个显示内容div，点击遮罩层会关闭弹窗，因为事件冒泡，点击显示内容div(包含在遮罩中)，则也会致使弹窗关闭，如何解决这问题？

十一、 委托和on区别？

自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品

使用 on() 方法添加的事件处理程序适用于当前及将来的元素（好比由脚本建立的新元素）

移除对IE6/IE7/IE8的支持

jQuery 2.0将支持与jQuery 1.9相同的API，并没有多大的特性增长，但会移除对IE 6/7/8的支持。正由于支持相同的API1.9和2.0之间是能够互换的。jQuery 2.0更小，更快捷，不会有IE 6/7/8带来的问题，若是须要支持IE 6/7/8，就选择1.9。你能够经过条件注释在使用IE 6/7/8时选择jQuery 1.9。

<!--[if lt IE 9]>
    <script src="jquery-1.9.0.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
    <script src="jquery-2.0.0.js"></script>
<!--<![endif]-->

十二、var let声明的特色 做用域？

1三、一个外层中有一个图标和文字，若是让文字和图标垂直居中？

面试时我回答了第一种,面试官问，margin就目测去写吗？

当时想不起来能够用背景图。。

 

1四、ES6使用过吗？箭头函数的好处？（面试官问好处时说 出现的新写法新的东西 都要弄明白这样写为何会更好？）

1五、你从哪里了解到前端最新技术？

1六、一个div元素<div style="position:absolute;width:100px;height:100px;"></div>在浏览器中会显示出来吗？  会

移动端：

一、display:flex特色 好处？

二、line-height在手机上 能让文字居中吗？(兼容性)

三、手机上 左边label如用户名：右边是文本框，lable固定值，文本框若是让其自适应？