前端面试题

前端面试题

个人解题答案,错误肯定不少,求review。

第一套:
题目1

:CSS实现垂直水平居中,HTMl结构如下:

<div class="box">
    <div class="con"></div>
<div>

解:

.con{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}
题目2:写出原生js或者JQ循环下面的
  • 内容
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

解:

    var li=document.getElementsByTagName('li');
    for (var i = 0; i < li.length; i++) {
        console.log(li[i].innerHTML);
    }

var li=$("li");
    for (var i = 0; i < li.length; i++) {
        console.log(li.eq(i).html());
    }
题目3:ajax请求的时候get和post方式的区别,用jQ写出ajax请求。

解:
get-请求服务器资源,不会在http上显示
post-向指定的资源提交要处理的数据,在http上面进行字符串拼接

$.ajax({
    url:url,
    data:data,
    success:success,
    dataType:dataType
});

POST:
$.ajax({
    type:'POST',
    url:url,
    data:data,
    success:success,
    dataType:dataType
});

Get:
$.ajax({
    url:url,
    data:data,
    success:success,
    dataType:dataType
});
题目4:js中函数split(),join()区别

解:
split()把一个字符串分割成数组
join()把数组中的元素放入一个字符串
两者可以理解为相反的过程
题目5:熟悉微信小程序吗?什么是微信小程序?
不熟悉…
微信小程序是微信推出的新能够,不需要按照,扫描二维码即可使用。
大题:
如图所示有一个对象为树形结构,每个节点结构为:
node:{id=‘xxx’,name=‘xxx’,children:[node,node,node,…]},每个id唯一,当没有子节点时,children为false

WX20170414-122826.png

现有一需求,给出id输出node信息,请完成方法getNodeById。

var data={id='xxx',name='xxx',children:[node,node,node,...]};
var id='aaa';
var node=getNodeById(data,id);
console.log(node);

答题要求,先写出解题思路,在进行编码。
解:

第二套:

1.HTTP状态码及其含义
2Xx:请求成功
3xx:重定向
4xx:客户端错误
5xx:服务器错误
2.设置元素浮动后,该元素的display值是多少?
display:blcok
3.请描述cookies、sessionStorage和localStorage的区别

特性
Cookie
sessionStorage
localStorage

数据的生命周期
一般由服务器生成,可以设置失效时间,如果在浏览器端生成Cookie,默认关闭浏览器后失效
仅在当前会话下有效,关闭页面或浏览器后被清除
除非被清除,否则永久保存

存放数据大小
4k左右
一般为5m
一般为5m

与服务器端通信
每次都会携带在HTTP头中,如果保存过多数据,会带来性能问题
仅在客户端(即浏览器)中保存,不参与和服务器的通信
仅在客户端(即浏览器)中保存,不参与和服务器的通信

易用性
需要程序员自己封装,源生的Cookie接口不友好
源生接口可以接受,亦可再次封装来对Object和Array有更好的支持
源生接口可以接受,亦可再次封装来对Object和Array有更好的支持

4.请解释你对盒模型的理解,以及如何在css中告诉浏览器使用不同的盒模型。
标准盒子模型:
总宽度 = width + border(左右) + padding(左右) + border(左右)

14921478211030.jpg

怪异盒子模型:
总宽度 = width + margin(左右)

14921478076474.jpg

box-sizing:border-box;
box-sizing:content-box;

5.下面语句返回值是什么?

var a=6;
setTimeout(function(){
    
    console.log(a);
    a=666;

},1000)
a=66;

解:
66
理解:setTimeout()在xx毫秒之后调用一次,setInterval()在xx毫秒之后调用多次

var a = 6;
function b() {

    console.log(a);
    a = 666;
}
b();
var a = 66;
//结果:6

var a = 6;

function b() {
    a = 666;
    console.log(a);
    
}
b();
var a = 66;
//结果:666

这题考察的是函数作用域的问题,原题目执行顺序是:

var a=6;
a=66;
setTimeout(function(){
    
    console.log(a);
    a=666;

},1000)

在变量a在全局作用域中已经变成了66,在函数中,因为a在前面调用,所以就会向全局作用域寻找a,找到66.如果是这样:

var a=6;
a=66;
setTimeout(function(){
    a=666;
    console.log(a);
},1000)

那么打印出来的就是666,因为在函数中已经声明了a=666;
第三套
题目1.css选择符有哪些?按照优先级进行排序。
id>class>tagname
题目2.前端页面有js行为层和另外2个层是什么?作用是什么。
HTML 结构层 前端页面结构
CSS 表现层 前端页面样式
题目3.你做的页面在哪些内核浏览器测试过?
Trident - ie内核
Gecko - firefox内核
Webkit - chrome safari
Presto - opera(前任),现在opera也使用webkit
题目4.在Jquery中被誉为工厂函数的是()
a)ready()
b)function()
c)$()
d)factory()
解:
选择:c
题目5.setTimeout(“buy()”,2000)表示的是:
解:
间隔2秒后,buy()函数被调用一次,且仅被调用一次
第四套

要动态改变层中内容可以使用的方法:innerHTML
当按键盘A时,使用oneKeyDown事件打印event.keyCode的结果是:13(这题好没意思)
在javascript里,不属于数组方法的是:length()
注:数组length是属性,调用方式arr.length,没有括号
检索被选定的选项的索引号:selectedIndex

希望图片具有“提交”按钮同样的功能,如何编写表单提交:在图片的onSubmit事件中手动提交(不确定)
ping基于什么协议:ICMP
注:ping在主机和服务器之间传递控制消息,属于ICMP协议,但是ICMP协议是TCP/IP的子协议。。。
C

var emp = newArray(3);
for(var i in emp)

==
for(var i=0;i<emp.length;i++)

制作级联菜单功能时调用的下拉列表框是什么事件:onChange

数组声明方式:

var arry=new Array;
var arry=new Array();

实现层的隐藏:display:none
太多了…略

第五套
1.写出以下值

alert(1&&2);
alert(1||2);

解:

alert(1&&2);//2
alert(1||2);//1

1、只要“||”前面为false,无论“||”后面是true还是false,结果都返回“||”后面的值。

2、只要“||”前面为true,无论“||”后面是true还是false,结果都返回“||”前面的值。

3、只要“&&”前面是false,无论“&&”后面是true还是false,结果都将返“&&”前面的值;

4、只要“&&”前面是true,无论“&&”后面是true还是false,结果都将返“&&”后面的值;

2.验证字符串的组成规则,第一个需为数字,后面可以是字母,数字,下划线,总长度为5-20;
解:

var c=/^[\d]{1}[/w]{4,19}/
c.test(string)

3.以下代码,alert值是多少?

window.val = 1;
var json = {
    val: 10,
    dbl: function() {
        this.val *= 2;
    }
};
json.dbl();
var dbl = json.dbl;
dbl();
json.dbl.call(window);
alert(window.val + json.val);

解:
值为:24

window.val = 1;
var json = {
    val: 10,
    dbl: function() {
        this.val *= 2;
    }
};

json.dbl();//通过json调用dbl方法,把json里面的val改为20
var dbl = json.dbl;//把dbl函数赋值给dbl
dbl();//全局作用域,调用dbl()函数,把window的val改为2
json.dbl.call(window);//同上,window的val改为4
alert(window.val + json.val);//4+20=24

4.以下代码,alert值是多少?

(function() {
    var val = 1;
    var json = {
        val: 10,
        dbl: function() {
            val *= 2;
        }
    };
    json.dbl();
    alert(json.val + val);
}());

解:
12

(function() {
    var val = 1;
    var json = {
        val: 10,
        dbl: function() {
            val *= 2;
        }
    };
json.dbl();//这里调用的是val=1,如果这里是this.val则指向json内部
alert(json.val + val);//10+2=12;

}());

6.以下代码,alert值是多少?

var foo = 'Hello';
(function() {
    var bar = 'World';
    alert(foo + bar);
})();
alert(foo + bar);

解:

var foo = 'Hello';
(function() {
    var bar = 'World';
    alert(foo + bar);//HelloWorld
})();
alert(foo + bar);//报错,因为bar未定义

7.foo.x的值是什么?

var foo={n:1};
var bar=foo;
foo.x=foo={n:2};

解:

undefined

解答
8.写出以下代码的输出内容

console.log('one');
setTimeout(function() {
    console.log('two');
}, 0);
console.log('three');

解:
❌:one,two,three
这题考察了setTimeout(Fn,time)的异步机制
参考资料:详解setTimeout(fn,0)
9.你对ES6的了解有哪些?
略…

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值