前端笔试题总结

前端开发面试知识点大纲：

HTML&CSS：
    对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应 

JavaScript：  
    数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化、自定义事件、内存泄漏、事件机制、异步装载回调、模板引擎、Nodejs、JSON、ajax等。

其他：
   HTTP、安全、正则、优化、重构、响应式、移动端、团队协作、可维护、SEO、UED、架构、职业生涯

作为一名前端工程师，无论工作年头长短都应该必须掌握的知识点：

    1、DOM结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。

    2、DOM操作  ——如何添加、移除、移动、复制、创建和查找节点等。

    3、事件    —— 如何使用事件，以及IE和标准DOM事件模型之间存在的差别。

    4、XMLHttpRequest —— 这是什么、怎样完整地执行一次GET请求、怎样检测错误。

    5、严格模式与混杂模式 —— 如何触发这两种模式，区分它们有何意义。

    6、盒模型 —— 外边距、内边距和边框之间的关系，及IE8以下版本的浏览器中的盒模型

    7、块级元素与行内元素 —— 怎么用CSS控制它们、以及如何合理的使用它们

    8、浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。

    9、HTML与XHTML——二者有什么区别，你觉得应该使用哪一个并说出理由。

    10、JSON  —— 作用、用途、设计结构。

HTML

一.Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

（1）、<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器的解析器，
      用什么文档类型 规范来解析这个文档。 

（2）、严格模式的排版和 JS 运作模式是  以该浏览器支持的最高标准运行。

（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

（4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

二.行内元素有哪些？块级元素有哪些？空(void)元素有那些？

行内：a b(粗体，不推荐) span img i(斜体) em(强调) strong(粗体强调)  input select textarea br

块级：div p ul(无序列表) ol(有序列表) li dl(定义列表) dt dd h1~h6 hr(水平分割线) table

注：button是可变元素(即根据上下文语境决定是块状元素还是内联元素)

空元素：<img> <br> <hr> <link> <meta> <input> <area> <embed>

空元素，即没有内容的元素，一般是单标签

三.link和@import的区别是？

（1）link属于XHTML标签，而@import是CSS提供的;

（2）import只在IE5以上才能识别，而link是XHTML标签，无兼容问题;

（3）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

（4）link方式的样式的权重 高于@import的权重. 比如需要引入多个css时，可以先用link引入其中一个css，然后在这个css里面用@import引入其他几个css，便于管理

四.浏览器的内核分别是什么?

IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera内核原为Presto，现为Blink；

五.form中的input可以设置为readonly和disable，请问2者有什么区别？

两者都不可编辑

readonly:可以选择，可以复制，值可以传到后台

disable:不能选择不能复制，值不能传到后台

六.超链接的属性target的可选值：_blank,_parent, _self, _top和框架名称有什么区别？

_blank 在新窗口打开链接
_top 在顶层WINDOW对象中打开,一般用于多层框架嵌套的情况
_parent 在父窗口打开,一般用于框架内的窗口改变父窗口页面
_self 默认,即在当前窗口(或当前框架)打开

七.

.innerHTML，innerText，outerHTML，innerText的区别？

CSS

一.介绍一下CSS的盒子模型？

（1）有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 pading;

（2）盒模型四个属性： 内容(content)、填充(padding)、边界(margin)、 边框(border).

二.CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？

    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）

    可继承的样式： font-size font-family color, UL LI DL DD DT;

    不可继承的样式：border padding margin width height ;

    优先级就近原则，同权重情况下样式定义最近者为准;

    important 比 内联优先级高

    载入样式以最后载入的定位为准;

CSS3新增伪类举例：

p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type  选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type  选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child    选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。
:enabled  :disabled 控制表单控件的禁用状态。
:checked        单选框或复选框被选中。

三.如何居中一个浮动的元素

相对定位，top和left各50%，上边距为自身高度一半的负值，左边距为自身宽度一半的负值

一. js延迟加载的方式有哪些？

defer和async、动态创建DOM方式（用得最多）、按需异步载入js

二.[typeof null;null instanceof Object]运行结果是？

typeof和instanceof都可以用来判断js变量类型
区别是typeof用来返回一个基本数据类型，而instanceof用来验证一个对象是否属于某个类
对象(obj)、数组、json、null都属于object，null是js中用来表示空引用的一个特殊值，但本质上null值不是以Object为原型创建出来的，null instanceof 任何类型 都是false
所以结果是["object",false]

三.

(function(){

return typeof arguments;

})();

A."object" B."array" C."arguments" D."undefined"

typeof：返回变量类型
字符串、number、布尔值、object、undefined、function
arguments：实参的集合，是一个类数组，他有数组的长度，可以循环，但是他没有数组的方法，如sort()等
答案：A

四.

var f=function g(){return 23;};

typeof g();

A."number" B."undefined" C."function" D."Error"

function g(){return 23;};
typeof g;
输出就是function

function g(){return 23;};
typeof g();
输出就是number

var f=function g(){return 23;};
typeof f;
输出就是function

var f=function g(){return 23;}
这是一个命名函数表达式，命名函数表达式的函数名只有在函数作用域内有效，规范规定了标识符不能在外围的作用域内有效
var f=function g(){return typeof g}
f();
输出是function
所以在外部引用会报错，g is not defined(注：在ie下会返回number)
若改为typeof g;则显示undefined

五.

(function(x){

delete x;

return x;

})(1);

A.1 B.null C.undefined D.Error

delete只能删除对象的属性，不能删除变量或参数
结果：1
注：对象预定义的属性、通过prototype指定的属性也是不能delete的

六.

var y=1,x=y=typeof x;

A.1 B."number" C.undefined D."undefined"

typeof返回都是字符串类型，有引号
所以c不对
答案：d

七.

(function f(f){

return typeof f();

})(function(){return 1;});

A."number" B."undefined" C."function" D.error

参数f实际是传了一个函数进去，return typeof f();等于执行函数返回类型
即使参数名称f和函数名冲突，但是参数的优先级更高
答案：a

八.

var f=(function f(){return "1";},function g(){return 2;})();

type f;

A."string" B."number" C."function" D."undefined"

涉及到分组选择符，如
var a=(1,2,3)
alert(a);
弹出的是3
所以分组选择符，执行的是最后一位
答案：b

九.

var x=1;

if(function f(){}){

x+=typeof f;

}

A.1 B."1function" C."1undefined" D.NaN

函数声明不能写到运算符的运算过程中(比如if、for语句的括号中)，写进去后这个名字就找不到了
但是虽然不允许这样写，但是if中返回为真，只有false、空对象、NaN、空的字符串和0会返回假
答案：c，ie下答案是b

十.

var x=[typeof x,typeof y][1];

typeof typeof x;

A."number" B."string" C."undefined" D."object"

无论x值是什么，typeof x返回的是一个字符串，那么typeof 字符串，依然是string
var x=[typeof x,typeof y];       ==>执行结果是[undefined,undefined]
var x=[typeof x,typeof y][1]       ==>没有这种定义方法，返回值是undefined
答案：b

十一.

(function(foo){

return typeof foo.bar;

})({foo:{bar:1}});

A."undefined" B."object" C."number" D.Error

foo这个形参指的是{foo:{bar:1}}这个集合
这个整体下只有一个属性foo，没有bar属性
答案：a

如果改成
(function(foo){  
    return typeof foo.foo;  
})({ foo: { bar: 1 } }); 
则返回object

如果改成
(function(foo){  
    return typeof foo.foo.bar;  
})({ foo: { bar: 1 } });
则返回number

十二.

with(function(x,undefined){}) length;

A.1 B.2 C.undefined D.Error

with用的很少，使用with语句的js代码很难优化，运算速度也很慢，它用于暂修改作用域链的或者通常用来缩短特定情形下必须写的代码量，而且在with语句中的函数定义和变量初始化可能会产生令人惊讶的、
相抵触的行为，因此我们避免使用with语句
语法：
with(object){}，大括号里可以使用object属性而不使用object.attr这种形式
这里with接收了一个对象，这个对象是函数，函数有length属性(省略了大括号)
看一个例子
function test(num1,num2,num3){
}
test.length;
返回的是3
所以length是函数的形参集合，而arguments是函数的实参集合
所以答案：b

十三.

100['toString']['length']

A.100 B.3 C.1 D.SyntaxError

一个常见的错误：
2.toString();    //报错，SyntaxError
在js中读到"2."这个点不知道该作为小数点还是"."操作符
而02.toString()、false.toString()、0x20.toString()都是可以的
变通方法：
2..toString();
2 .toString();
(2).toString();

这里['length']就是计算形参的个数
数字调用toString的时候，会有一个参数radix，其他如function、array、string调用的话，结果会是0
答案：c

十四.

var a=10;

function aaa(){

alert(a);

}

function bbb(){

var a=20;

aaa();

}

bbb();

结果是？

执行到bbb里面的aaa();时，并不是函数aaa挪到这个位置，而是在外面调用他，他只能找到全局的a
注：函数调用就是回过头去执行这个函数，无论位置在哪
所以答案：返回10

十五.

function s(){

var a=b=10;

}

s();

alert(a);

alert(b);

结果是？

a is not defined
10

但如果题目改成

var a=b=10;

alert(a);

alert(b);

结果是：

10
10

有函数的时候相当于

function s(){

var a;

b=10;

}

故函数内定义的局部变量，外面找不到，但是外部定义的变量，函数内可以找到

十六.

var a=10;

function aaa(){

alert(a);

var a=20;

}

aaa();

变量查找是就近原则去寻找(注:有var的),就近没有找到再去找外层
所以返回undefined

十七.

var a=[1,2,3];

var b=a;

b.push(4);

alert(a);

返回[1,2,3,4]
对象之间存在引用关系
但是变量赋值不会有这种关系
如
var a=[1,2,3];
var b=a;
b=[1,2,3,4];
alert(a);
返回的就是[1,2,3]

十八.在IE中要想获得当前窗口的位置可以使用window对象的()方法

A.windowX B.screenX C.screenLeft D.windowLeft

window对象是js中最大的对象，他描述的是一个浏览器窗口,一般引用他的属性和方法时,不需要用"window.xxx"这种形式，而是直接使用"xxx"，没有windowX和windowLeft这种属性
只有screenX和screenLeft
ie、safari、opera支持screenLeft
ff、safari支持screenX
所以答案：c

十九.下面对于JavaScript中的单选按扭（Radio）的说法正确的是（）

A.单选按钮可以通过单击"选中"和"未选中"来进行切换

B.单选按钮没有checked属性

C.单选按钮支持onClick事件

D.单选按钮的length属性返回一个选项组中单选项的个数

A.只有复选框才能进行"选中"和"未选中"切换
B.所有类型的input标签都有checked属性
C.几乎任何html元素都支持onclick事件
D.单选按钮没有length属性
所以答案为c

二十.

x=3;
y=2;
z=(x+2)/y;
alert(z);

A.2 B.2.5 C.32/2 D.16

js里除法是有小数的
所以答案:B

二十一.

某页面中有一个1行3列的表格，其中表格行<tr>的id为row1，下列选项中能在表格中增加一列，并且这一列显示在最后面的是（）。

A．document.getElementById("row1").Cells(3);

B．document.getElementById("row1"). insertCell (2);

C．document.getElementById("row1").insertCell(3);

D．document.getElementById("row1").insertCell(0);

新单元格插入位置是index之前，所以如果index等于行中单元格数，即插到最后
答案：C

二十二.

9．CSS样式background-position:5px -10px代表的意义是（）。

A．背景图片向左偏移5px，向下偏移10px

B．背景图片向左偏移5px，向上偏移10px

C．背景图片向右偏移5px，向下偏移10px

D．背景图片向右偏移5px，向上偏移10px

左上角是(0,0)，右下角是(max,max)
所以答案：D

二十三.

判断：在CSS中，border:1px 2px 3px 4px表示设置某个HTML元素的上边框为1px、右边框为2px、下边框为3px、左边框为4px。（）

没有这种写法，只有border-1px 2px 3px 4px;
所以是错的

二十四.

判断：在HTML中，<iframe>标签的frameborder属性用来设置内嵌框架的边框宽度，属性值设为2表示边框宽度为2像素。（）

frameborder 属性规定是否显示框架周围的边框。
他只有两个值：0(无边框) 1(默认值，有边框)
从实用性角度，一般设置0，然然后通过css来设置边框
所以是错的

二十五.

列举浏览器对象模型BOM里常用的至少4个对象，并列举window对象的常用方法至少5个

对象：window,document,history,location,screen,navigator
方法：alert(),confirm(),prompt(),open(),close(),blur(),focus(),print()

二十六.

有语句“var x=0;while(____) x+=2;”，要使while循环体执行10次，空白处的循环判定式应写为：

A．x<10 B. x<=10 C.x<20 D.x<=20

while和for一样，都是先判断后执行，do{}while才是先执行后判断
所以答案：C

二十七.

以下( )表达式产生一个0~7之间(含0,7)的随机整数.

A.Math.floor(Math.random()*6)

B.Math.floor(Math.random()*7)

C.Math. floor(Math.random()*8)

D.Math.ceil(Math.random()*8)

Math.random()产生随机数的范围是>=0 , <1
所以*8的范围就是0<=x<8
floor(地板) 向下取整
ceil 向上取整
答案：C

二十八.

在使用Javascript实现省市级联菜单功能时，在添加城市列表前清空原来的下拉选项的代码是（）

A.document.myform.selCity.options.clear()

B. document.myform.selCity.options.deleteAll()

C. document.myform.selCity.options.length=0

D. document.myform.selCity.options.size=0

options没有size，select才有size
答案：C

二十九.

HMTL表单的首要标记是<form>,<form>标记的参数method表示表单发送的方法，可能为get或post，下列关于get和post的描述正确的是（）

A.post方法传递的数据对客户端是不可见的

B.get请求信息以查询字符串的形式发送，查询字符串长度没有大小限制

C.post方法对发送数据的数量限制在255个字符之内

D.get方法传递的数据对客户端是不可见的

get是从服务器上获取数据，post是向服务器传送数据
出于安全性，最好用post
答案：D

三十.

改变下拉列表框的选项时能显示当前选项的文本和值。

</select>

</form>

function _sel(vt){
    alert("显示文本："+vt.options[vt.selectedIndex].text);
    alert("值："+vt.value);
}

注：js中无法直接用.text .html .innerHTML .innerText等获取option的内容
jquery获取value和内容的方法
.val();
.text();

三十一.

在HTML文档对象模型中，history对象的（）用于加载历史列表中的下一个URL页面。

A．next() B.back() C.forward() D.go(-1)

history对象是window对象的一部分，包含用户访问过的url,有以下几种方法
back() 加载前一个URL
forward() 加载下一个URL
go() 加载某个具体页面
答案：C

三十二.

在HTML页面中包含如下所示代码，则编写Javascript函数判断是否按下键盘上的回车键正确的编码是（）
<input name=”password” type=”text” onkeydown=”myKeyDown()”>
A. function myKeyDown(){
if (window.keyCode==13)
  alert(“你按下了回车键”);
B. function myKeyDown(){
if (document.keyCode==13)
  alert(“你按下了回车键”);
C. function myKeyDown(){
if (event.keyCode==13)
  alert(“你按下了回车键”);
D. function myKeyDown(){
if (keyCode==13)

键盘事件调用，必须通过event.keyCode或者window.event.keyCode

三十三.

求y和z的值是多少？
<script type="text/javascript">
var x = 1;
var y = 0;
var z = 0;
function add(n){n=n+1;}
y = add(x);
function add(n){n=n+3;}
z = add(x);
</script>

因为没有返回值，所以输出都是undefined
如果给它返回值
var x = 1; 
var y = 0; 
var z = 0;  
function add(n){n=n+1;return n;} 
y = add(x);  
function add(n){n=n+3; return n;} 
z = add(x);
输出结果：4 4(同名函数覆盖)

三十四.

javascript怎样选中一个checkbox，怎样设置它无效?

document.getElementsByTagName("input")[0].checked=true;
document.getElementsByTagName("input")[0].disabled=true;

三十五.

程序中捕获异常的方法

前端笔试题总结

相关推荐