首页 JavaScriptJS知识点正文

前端笔试题集锦_①

景先 JS知识点 2016-07-16 1279 1

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

下面我就来点干货。

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

二.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("获取失败")

}









版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。

评论

精彩评论