今天公司要招聘前端,因此整理一份公司前端的笔试题,包括答案奉献给大家,基础知识还是比较重要的。
下面我就来点干货。
一.请动手划一份盒子模型图,并标明各项属性。
二.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("获取失败")
}
版权声明
本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。
评论
景先
回复11