2020-05-13

今天的笔试题：

1、CSS选择器有哪些？哪些属性可以继承？优先级算法如何计算？

1.id选择器(# myid)
2.类选择器(.myclassname)
3.标签选择器(div, h1, p)
4.相邻选择器(h1 + p)
5.子选择器(ul > li)
6.后代选择器(li a)
7.通配符选择器( * )
8.属性选择器(a[rel = "external"])
9.伪类选择器(a: hover, li:nth-child)


可继承的样式：
1.font-size
2.font-family
3.color
4.text-indent

不可继承的样式：
1.border
2.padding
3.margin
4.width
5.height

优先级算法：
1.优先级就近原则，同权重情况下样式定义最近者为准;
2.载入样式以最后载入的定位为准;
3.!important > id > class > tag
4.important 比 内联优先级高，但内联比 id 要高
样式表、内联、important

2、超链接访可过后 hover样式就不出现的问题是什么?如何解決?

当超链接被点击后，经常会出现hover样式效果不显示的问题。解决这个问题其实很简单，只要对超链接的样式属性进行正确的排序即可。

排列顺序如下：

link -> visited -> hover ->action
1
参考设置：

a:link{
    color:red;
    text-decoration:none;
}
a:visited{
    color: blue;
    text-decoration: none;
}
a:hover{
    color: black;
    text-decoration:over line;
}
a:action{
    color:black;text-decoration:overline;
}
https://blog.csdn.net/qq_36801966/article/details/78425139

3、Css中可以让文字在垂直和水平方向上重叠的两个属性是什么?

垂直方向：line-height 水平方向：letter-spacing

4、div+css的布局较table布局有什么优点?

5、如果让你来优化web前端性能,你会从哪些方面进行优化?

6、如下代码输出结果是什么?解释原因

var a;
alert(typeof a);
alert(b);

结果：

VM98:3 Uncaught ReferenceError: b is not defined
    at <anonymous>:3:7

7、如下代码輸出的结果分别是什么?

undefined == null; //true
1 == true; //true
2 == true; //false
0 == false; //true
0 == ''; //true
NaN == NaN; //false
[] == false; //true
[] == ![] //true
[] == [] //false

8、如下代码輸出的结果是什么?

for (var i = 1; i <= 3; i++) {
    setTimeout(function () { console.log(i); }, 0);
}

// 4
// 4
// 4

9、如下代码輸出的结果是什么?

var obj = {
    a: 1,
    b: function() {console.log(this.a)}
}
var a=2;
var objb = obj.b;

obj.b(); // 1
objb(); // 2
obj.b.call(window); // 2

10、说出以下函数的作用是?空白区域应该填写什么?

//define 
(function(window){
    function fn(str){
        this.str=str;
    }
 
    fn.prototype.format = function(){
        var arg = ______;
        return this.str.replace(_____,function(a,b){
             return arg[b]||"";
      });
    }
    window.fn = fn;
})(window);
 
//use
(function(){
    var t = new fn('<p><a href="{0}">{1}</a><span>{2}</span></p>');
    console.log(t.format('http://www.alibaba.com','Alibaba','Welcome'));
})();

函数的作用是使用format函数将函数的参数替换掉{0}这样的内容，返回一个格式化后的结果；第一个空是：arguments 第二个空是：/\{(\d+)\}/ig

11、给 Object 扩展一个方法 clone ,实现深度克隆对象

12、javascript实现二分法查找

/* 不知道他什么意思，那就按照它要查找一个元素是否存在就ok了，按最简单的来处理*/

13、一次完整的HTTP事务是怎样的个过程?

域名解析
发起TCP的3次握手
建立TCP连接后发起http请求
服务器响应http请求
浏览器得到html代码
浏览器解析html代码，
并请求html代码中的资源（如js、css、图片等）
浏览器对页面进行渲染呈现给用户

14、想实现一个对页面某个节点的拖曳?如何做?(使用原生JS）

回答出概念即可，下面是几个要点给需要拖拽的节点绑定 mousedown, mousemove, mouseup 事件 mousedown 事件触发后，开始拖拽 mousemove 时，需要通过 event.clientX 和 clientY 获取拖拽位置，并实时更新位置 mouseup 时，拖拽结束需要注意浏览器边界的情况
参考

15、如果被录用,你期望从工作中获得什么?你觉得前端工程师的价值体现在哪?怎样去体现你对于组织的价值？

最后编辑于：2020.05.15 11:52:17