今天公司要招聘前端，因此整理一份公司前端的笔试题，包括答案奉献给大家，基础知识还是比较重要的。

下面我就来点干货。

一.请动手划一份盒子模型图，并标明各项属性。

二.html的块元素和行内元素都有哪些，请举例说明。

块元素：div h1-h6 p ul li ol dl dt dd header footer section nav ...

行内元素：span strong i em a...

三.请举例说出5个html5和css3新增的标签，样式。

html5：header footer section time nav mark...

css3:box-sizing transtion transform filter box-shadow text-shadow ...

四：data-的作用是什么，怎么用？

官方提供的标签的自定义属性，主要是向后兼容，规范化。

通过dataset来获取自定义的值，一般用来存放数据。

五.描述css选择器的优先级别顺序。

id > class > tag >*  （注意坑）

六.请书写一个3列布局，中间自适应，左右200px.

<div class="box">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>
<style>
.box{
    position:releative;
}
.left {
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
}
.right {
    position: absolute;
    right: 0;
    top: 0;
    width: 200px;
}
.center {
    margin: 0 200px;
}
</style>

七、谈一谈js中的冒泡机制。

多个元素嵌套，元素点击后会根据DOM树自上而下的顺序依次触发，直到目标元素被触发后停止

常用的取消冒泡的处理方式：

jquery：  元素进行绑定on

js：obj.onclick = function(ev){

    //代码区

    ev.preventDefault();

    ev.cancelBubble();

}

八、谈一谈“==”和“===”的区别。

相同点：都是比较运算符，返回值为布尔类型

不同点：

==比较的是值

===比较的不仅是值还有数据类型

九、window.foo || (window.foo="bar")返回的值是什么？

bar

分析：

||进行进行计算是如果左侧为真则不计算右侧，如果左侧为假，则进行右侧，上述window.foo返回undefined,为假，右侧window.foo="bar",把bar赋值给了window.foo,返回的是bar

十、请优化jquery选择器$(".foo div#bar:eq(0)")。

$("#bar");

十一、请解释jquery中end()的用途。

十二、写一段正则，注册账号时包含字母数字下划线的正则。

/^[a-zA-Z]\w+$/

十三、请举例说明怎样减少页面加载时间，至少三种。

压缩图片，js,css

进行图片懒加载

合并文件 http

script放在文档尾部

十四、"I'm lasagna hog".split("").reverse().join(""); 语句的返回值是什么？

goh angasal m'I

十五、$(function(){console.log(1)}); 和 window.onload = function(){console.log(2)};

先1 后2

window.onload资源全部加载完毕后执行

jquery的则是dom加载完毕后执行，DOMContentLoaded

十六、请指出 JQuery中 ".bind()"、".live()" 和 "delegate()" 的区别？

绑定  委托 几年前jquery建议使用on

十七、请使用标准的 JSON 格式封装一组学生信息数据，内容包括：姓名、性别、住址（包括城市、街道、门牌号、地铁线）

{

    "name":"tobie",

    "sex":"1",

    "address":{

        "city":"beijing",

        "street":"chaoyang",

        "no":"123",

        "subway":"1"

    }

}

十八、客户查询手机消费清单要求：
实现 A、B、C 三个异步接口，A 接口需传参 user_name、mobi（用户姓名和手机号码），请求成功返回该用户此手机号码的消费清单信息，user_name 可通过接口 B 获取，mobi 可通过接口 C 获取，请使用 JQuery 写出具体的实现方法？

function getUserName(){

    return $.ajax("user_name");

}

function getMobi(){

    return $.ajax("mobi");

}

$.when(getUserName(),getMobi()).then(function(data1,data2){

    $.ajax({

        url:"list",

        data:{

            user_name:data1[0],

            mobi:data2[0]

        }

  }).success(function(){

       console.log("成功")

  })

}),function(){

    console.log("获取失败")

}