前端面试题

篇一：前端面试题整理js篇

1.列举BOM中常用的几个全局变量和全局方法

全局对象：window

全局变量：document location history navigator screen

全局方法：alert() confirm() prompt() open() close()

2.在js中如何创建一个对象

var p1 = {name:”Tom”,age:12}

function Person(name,age){

this.name = name;

this.age = age;

}

var p2 = new Person(“jack”,14);

3.在js中获取对象属性

var age = p1.age;

var age = p1[‘age’];

4.谈谈ajax技术

Ajax 的原理简单来说通过 XmlHttpRequest 对象来向服务器发异步请求，从服

务器获得数据，然后用 javascript 来操作 DOM 而更新页面的局部显示。

Ajax优点：

1.最大的一点是页面无刷新，给用户的体验非常好。

2.使用异步方式与服务器通信，不需要打断用户操作，具有更加迅速的响应能力。

3.ajax 的原则是“按需取数据”，最大程度的减少冗余请求，减少服务器的负荷。 Ajax缺点：

1.破坏浏览器后退按钮的正常行为。在动态更新页面后，用户无法回到前一个页面的状态.

2.使用 JavaScript 作 Ajax 的引擎，JavaScript 的兼容性和 Debug 本身就让人头大。

5.你觉得jquery有哪些好处

jQuery 是轻量级的 javascript 框架 强大的选择器

出色的 DOM 操作的封装

可靠的事件处理机制

完善的 ajax 封装

出色的浏览器的兼容性

支持链式操作，隐式迭代

支持丰富的插件

jquery的文档也非常的丰富

6.jquery对象和dom对象如何转换

1. jquery 转 DOM 对象: jQuery对象是一个数组对象，可以通过[index]的丰富得到 DOM 对象还可以通过 get[index]去得到相应的 DOM 对象。

2. DOM 对象转 jQuery 对象: $(DOM 对象)

7.jquery中$.get()提交和$.post()提交的区别

1. $.get() 方法使用 GET 方式提交请求,而$.post()使用 POST 方式。

2. GET 方式传输的数据大小不能超过 2KB 而 POST 要大的多

3. GET 方式请求的数据会被浏览器缓存起来，因此有安全问题。

8.$(document).ready()方法和window.onload区别

两个方法有相似的功能，但是在实行时机方面是有区别的。

1 window.onload 方法是在网页中所有的元素(包括元素的所有关联文件)完全加 载到浏览器后才执行的。

2 $(document).ready() 方法可以在 DOM 载入就绪时就对其进行操纵，并调用执 行绑定的函数

9.xml有哪些解析技术

有DOM,DOM4j,SAX,PULL 等

DOM: 一次性将整个文档加载到内存中, 生成一个对象树, 在处理大型文件时其性 能下降的非常厉害。

DOM4J: 对 DOM 的进一步封装, API 使用更简洁

SAX:基于事件驱动的方法回调机制。每读取一小部分数据时就会回调事件处理 器对象的方法, 但解析一旦开始就不能停止.

PULL: 也是基于事件驱动, 只是需要手动控制读取下一部分数据,这样得到想要的 数据后就可以停止解析.

10.你在项目中用到了xml技术的哪些方面？如何实现的？

用到了数据存贮，信息配置两方面。在做数据交换平台时，将不能数据源的数据组装成 XML 文件，然后将 XML 文件压缩打包加密后通过网络传送给接收者，接收解密与解压缩后再同 XML 文件中还原相关信息进行处理。在做软件配置时，利用 XML 可以很方便的进行，软件的各种配置参数都存贮在 XML 文件中。

11.说说你对json的理解

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。它基于标准JavaScript的一个子集，是一个js对象或数组结构的字符串

JSON有三类数据

1.单个数据

有number,string,boolean,null四种类型数据

2.多个有序的数据：数组

用[]包含起来, 其元素可以是三类数据中的任意一种, 元素之间用,号隔开

3.多个无序的数据: 对象用{}包含起来, 其元素必须由 key-value 组成, key 是一个字符串, value 可以是 任意类型数据, key 与 value 之间用:号隔开, 两个 key-value 之间用,号隔开。

12.javascript的typeof返回哪些数据类型

Object number string boolean underfind

13.例举3种强制类型转换和2种隐式类型转换?

强制（parseInt,parseFloat,number）

隐式（== – ===）

14.split() join() 的区别

前者是切割成数组的形式，后者是将数组转换成字符串

15.数组方法pop() push() unshift() shift()

push()尾部添加 pop()尾部删除

unshift()头部添加 shift()头部删除

16.IE和标准下有哪些兼容性的写法

var ev = ev || window.event

document.documentElement.clientWidth || document.body.clientWidth

var target = ev.srcElement||ev.target

17.ajax请求的时候get 和post方式的区别

一个在url后面 一个放在虚拟载体里面 请求头里面

有大小限制

安全问题

应用不同 一个是论坛等只需要请求的，一个是类似修改密码的

18.call和apply的区别

Object.call(this,obj1,obj2,obj3)

Object.apply(this,arguments)

19.ajax请求时，如何解释json数据

使用eval parse 鉴于安全性考虑 使用parse更靠谱

20.写一个获取非行间样式的函数

function getStyle(obj,attr,value){

if(!value){

if(obj.currentStyle){

return obj.currentStyle(attr)

}else{

obj.getComputedStyle(attr,false)

}

}else{

obj.style[attr]=value

}

}

21.闭包是什么，有什么特性，对页面有什么影响

闭包就是能够读取其他函数内部变量的函数。

22.添加 删除 替换 插入到某个接点的方法

obj.appendChidl()

obj.innersetBefore()

obj.replaceChild()

obj.removeChild()

23.javascript的本地对象，内置对象和宿主对象

本地对象为array obj regexp等可以new实例化

内置对象为gload Math等不可以实例化的

宿主为浏览器自带的document,window等

24.document.load 和document.ready的区别

Document.onload 是在结构和样式加载完才执行js

Document.ready原生种没有这个方法，jquery中有 $().ready(function)

25.”==”和“===”的不同

前者会自动转换类型

后者不会

26.Javascript的语法

1.区分大小写

2.弱类型变量 var age=10 var name=”dd”

3.每行结尾的分号可有可无，但建议还是加上

4.注释与java相同

27.变量

变量是通过var关键字来声明的。（variable）

变量的命名规则与java一致

注释有三种：///**/ <!-- --> 这个只能注释单行

28.javascript的Hello world

document.write()是写在文档的最前面

29. slice()、substring()、subtr

Slice和substring (2,5) 指的是从第3为开始，取（5-2）=3个数，其中slice的参数可以为负 substr（2,5）指的是从第3为开始，取5个数。但ECMAscript 没有对该方法进行标准化，因此尽量少使用该方法

30. indexOf()和lastIndexOf(),isNan,typeOf

indexOf（”i”） //从前往后,i在第几位

indexOf（”i”,3）可选参数，从第几个字符开始往后找

lastIndexOf（”i”）//从后往前,i在第几位

lastIndexOf (”i”,3) //从后往前,i在第几位

如果没找到，则返回-1

String类型的变量，在Java中，用“”符号表示字符串，用’’表示单个字符。而在javascript中这两种都可以

Nan（not a number）

Alert(nan ==nan)返回false,因此不推荐使用nan本身，推荐函数isNan

Alert(isNan(“ab”));//返回false

typeof运算符

var stmp = “test”;

alert(typeof stmp); //输出string

alert(type of 1);//输出number

此外：还有boolean,undefined,object(如果是引用类型或者null值,null值返回object，这其实是ecmascript的一个错误)

当声明的变量未初始化的时候，它的值就是undefined.当没有这个变量的时候，typeof 变 返回的值也是undefined。但是没声明的变量是不能参与计算的。

当函数无明确返回值时，返回的也是undefined

function a(){

}

Alert(a() == undefined) //返回true

Alert(null == undefined)//返回true

31.数值计算

var mynum1 = 23.345;

var mynum2 = 45;

var mynum3 = -34;

var mynum4 = 9e5; //科学计数法 为 9*10五次方

var fNumber = 123.456;

alert(fNumber.toExponential(1));//保留的小数点数 1.2e+2

alert(fNumber.toExponential(2));//1.23e+2

32.布尔值

var married = true;

alert("1." + typeof(married));//Boolean

married = "true";

alert("2." + typeof(married));//String

33.类型转换

转换成string类型有三种方式

var a = 3;

var b = a + "";

var c = a.toString();

var d = "student" + a;

toString()

var a=11;

document.write(a.toString(2) + "<br>");//转成2进制

篇二：最全前端开发面试内容及答案

HTML+CSS

1.对WEB标准以及W3C的理解与认识

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性；

2.xhtml和html有什么区别

HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言 最主要的不同：

XHTML 元素必须被正确地嵌套。

XHTML 元素必须被关闭。

标签名必须用小写字母。

XHTML 文档必须拥有根元素。

3.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?

用于声明文档使用那种规范（html/Xhtml）一般为 严格 过度 基于框架的html文档 加入XMl声明可触发，解析方式更改为IE5.5 拥有IE5.5的bug

4.行内元素有哪些?块级元素有哪些?CSS的盒模型?

块级元素：div p h1 h2 h3 h4 form ul

行内元素: a b br i span input select

Css盒模型:内容，border ,margin，padding

5.CSS引入的方式有哪些? link和@import的区别是?

内联 内嵌 外链 导入

区别 ：同时加载

前者无兼容性，后者CSS2.1以下浏览器不支持

Link 支持使用javascript改变样式，后者不可

6.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?

标签选择符 类选择符 id选择符

继承不如指定 Id>class>标签选择

后者优先级高

7.前端页面有哪三层构成，分别是什么?作用是什么?

结构层 Html 表示层 CSS 行为层 js

8.css的基本语句构成是?

选择器{属性1:值1;属性2:值2;……}

9.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?

Ie(Ie内核) 火狐（Gecko） 谷歌（webkit） opear(Presto)

10.写出几种IE6 BUG的解决方法

1.双边距BUG float引起的 使用display

2.3像素问题 使用float引起的 使用dislpay:inline -3px

3.超链接hover 点击后失效 使用正确的书写顺序 link visited hover active

4.Ie z-index问题 给父级添加position:relative

5.Png 透明 使用js代码 改

6.Min-height 最小高度 ！Important 解决’

7.select 在ie6下遮盖 使用iframe嵌套

8.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用

over:hidden,zoom:0.08 line-height:1px）

11.标签上title与alt属性的区别是什么?

Alt 当图片不显示是 用文字代表。

Title 为该属性提供信息

12.描述css reset的作用和用途。

Reset重置浏览器的css默认属性 浏览器的品种不同，样式不同，然后重置，让他们统一

13.解释css sprites，如何使用。

Css 精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量

14.浏览器标准模式和怪异模式之间的区别是什么?

盒子模型 渲染模式的不同

使用 window.top.document.compatMode 可显示为什么模式

15.你如何对网站的文件和资源进行优化?期待的解决方案包括：

文件合并

文件最小化/文件压缩

使用CDN托管

缓存的使用

16.什么是语义化的HTML?

直观的认识标签 对于搜索引擎的抓取有好处

17.清除浮动的几种方式，各自的优缺点

1.使用空标签清除浮动 clear:both（理论上能清楚任何标签，，，增加无意义的标签）

2.使用overflow:auto（空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE）

3.是用afert伪元素清除浮动(用于非IE浏览器)

Javascript

1.javascript的typeof返回哪些数据类型

Object number function boolean underfind

2.例举3种强制类型转换和2种隐式类型转换?

强制（parseInt,parseFloat,number）

隐式（== – ===）

3.split() join() 的区别

前者是切割成数组的形式，后者是将数组转换成字符串

4.数组方法pop() push() unshift() shift()

Push()尾部添加 pop()尾部删除

Unshift()头部添加 shift()头部删除

5.事件绑定和普通事件有什么区别

6.IE和DOM事件流的区别

1.执行顺序不一样、

2.参数不一样

3.事件加不加on

4.this指向问题

7.IE和标准下有哪些兼容性的写法

Var ev = ev || window.event

document.documentElement.clientWidth || document.body.clientWidth

Var target = ev.srcElement||ev.target

8.ajax请求的时候get 和post方式的区别

一个在url后面 一个放在虚拟载体里面

有大小限制

安全问题

应用不同 一个是论坛等只需要请求的，一个是类似修改密码的

9.call和apply的区别

Object.call(this,obj1,obj2,obj3)

Object.apply(this,arguments)

10.ajax请求时，如何解释json数据

使用eval parse 鉴于安全性考虑 使用parse更靠谱

11.b继承a的方法

12.写一个获取非行间样式的函数

function getStyle(obj,attr,value)

{

if(!value)

{

if(obj.currentStyle)

{

return obj.currentStyle(attr)

}

else

{

obj.getComputedStyle(attr,false)

}

}

else

{

obj.style[attr]=value

}

}

13.事件委托是什么

让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！

/?p=78 例子可见此链接

14.闭包是什么，有什么特性，对页面有什么影响

闭包就是能够读取其他函数内部变量的函数。

http://blog.csdn.net/gaoshanwudi/article/details/7355794 此链接可查看（问这个问题的不是一个公司）

15.如何阻止事件冒泡和默认事件

canceBubble return false

16.添加 删除 替换 插入到某个接点的方法

obj.appendChidl()

obj.innersetBefore

obj.replaceChild

obj.removeChild

17.解释jsonp的原理，以及为什么不是真正的ajax

动态创建script标签，回调函数

Ajax是页面无刷新请求数据操作

18.javascript的本地对象，内置对象和宿主对象

本地对象为array obj regexp等可以new实例化

内置对象为gload Math 等不可以实例化的

宿主为浏览器自带的document,window 等

19.document load 和document ready的区别

Document.onload 是在结构和样式加载完才执行js

Document.ready原生种没有这个方法，jquery中有 $().ready(function)

20.”==”和“===”的不同

前者会自动转换类型

后者不会

21.javascript的同源策略

一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协

篇三：前端面试题(2016含答案)

2016 前端面试题1) 下列哪个样式定义后,内联(非块状)元素可以定义宽度和高度a. display:inline b. display:none c. display:block d. display:inherit2) css 属性 overflow 属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都 会提供一种滚动机制。True False 3) 新窗口打开网页，用到以下哪个值（）。a. _self b. _blank c. _top d. _parent 4) 下面有关 jquery 事件的响应，描述错误的是？ a. b. c. d. onclick 鼠标点击某个对象 onfocus 元素失去焦点 onload 是某个页面的 css js html 文档结构和图像被完成加载 onmousedown 某个鼠标按键被按下5)元素的 alt 和 title 有什么异同，选出正确的说法？不同的浏览器，表现一样a. alt 和 title 同时设置的时候，alt 作为图片的替代文字出现，title 是图片的解释文字 b. alt 和 title 同时设置的时候，title 作为图片的替代文字出现，alt 是图片的解释文字 c. 以上说法都不正确6) 下列 js 可以让一个 input 的背景颜色变成红色的是？A. inputElement.style.backgroundColor = 'red'; b. inputElement.backgroundColor = 'red';

c. inputElement.style.backgroundColor = '#0000'; d. inputElement.backgroundColor = '#0000';7) 下面有关 html5 标签说法错误的有？ a. <audio> 标签定义声音，比如音乐或其他音频流 b. <canvas> 比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦 或是来自其他外部源内容 c. <menu> 标签定义菜单列表。当希望列出表单控件时使用该标签 d. <command> 标签定义命令按钮，比如单选按钮、复选框或按钮 8) 下述有关 css 属性 position 的属性值的描述，说法错误的是？ a. b. c. d. static：没有定位，元素出现在正常的流中 fixed：生成绝对定位的元素，相对于父元素进行定位 relative：生成相对定位的元素，相对于元素本身正常位置进行定位。 absolute：生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素进行定位。9) 下面符合一个有效的 javascript 变量定义规则的是？ a. b. c. d. _$te$t2 with a bc 2a10) 下面有关 JavaScript 中 call 和 apply 的描述，错误的是？ a. b. c. d. call 与 aplly 都属于 Function.prototype 的一个方法，所以每个 function 实例都有 call、apply 属性 两者传递的参数不同，call 函数第一个参数都是要传入给当前对象的对象，apply 不是 apply 传入的是一个参数数组，也就是将多个参数组合成为一个数组传入 call 传入的则是直接的参数列表。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对 象。11) 什么会被打印在控制台上？ b 是局部变量还是全局变量(function() { var a = b = 5; })(); console.log(b);12) 执行这段代码，输出什么结果。 function test() { console.log(a); console.log(foo()); var a = 1; function foo() { return 2; } } test();

13) 执行这段代码，输出什么结果。 var fullname = 'John Doe'; var obj = { fullname: 'Colin Ihrig', prop: { fullname: 'Aurelio De Rosa', getFullname: function() { return this.fullname; } } }; console.log(obj.prop.getFullname()); var test = obj.prop.getFullname; console.log(test()); 14) 下面这个 JS 程序的输出是什么： function Foo() { var i = 0; return function() { console.log(i++); } } var f1 = Foo(), f2 = Foo(); f1(); f1(); f2(); 15) 下面这个 JS 程序的输出是什么：<SCRIPT LANGUAGE="JavaScript"> var bb = 1; function aa(bb) { bb = 2; alert(bb); }; aa(bb); alert(bb); </SCRIPT>16) Doctype 作用? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义? 17) CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3 新增伪类有那些？ 18) 谈谈 This 对象的理解。 19）请用js 实现全选和取消全选的功能，只需要写出 js 代码（可以使用 jquery 框架）

<input type=”checkbox” id=”checkall” />全选 <div class=”list”> <input type=”checkbox” name=” type” value=”1” /> 这是 1 <input type=”checkbox” name=”type” value=”2” /> 这是 2 </div>20)面试官问你有没有女/男朋友?答案 1，C。内联元素加上 display：block;后被块级化。块级元素一般是其他元素的容器， 可容纳内联元素和其他块状元素， 块状元素排斥其他元素与其位于同一行，宽度(width)高度(height)起作用。因此，可以定义其宽度和高度。 ,2，TRUE。参数是 scroll 时候，必会出现滚动条。 参数是 auto 时候，子元素内容大于父元素时出现滚动条。 参数是 visible 时候，溢出的内容出现在父元素之外。 参数是 hidden 时候，溢出隐藏。, 3，选 B。在 html 中通过<a>标签打开一个链接，通过 <a> 标签的 target 属性规定在何处打开链接文档。 如果在标签<a>中写入 target 属性，则浏览器会根据 target 的属性值去打开与其命名或名称相符的 框架<frame>或 者窗口. 在 target 中还存在四个保留的属性值如下， 属性值 值 描述_blank在新窗口中打开被链接文档。_self默认。在相同的框架中打开被链接文档。_parent在父框架集中打开被链接文档。

_top在整个窗口中打开被链接文档。framename在指定的框架中打开被链接文档。4，选 b。onfocus 获得焦点 onblur 失去焦点 5，A 这两个属性是有些重复了。在不同浏览器里面表现有些不同。在 alt 和 title 同时设置的时候，alt 作为图片的替 代文字出现，title 是图片的解释文字。 6，A #0000 是不正确的写法，至少要为六位，应该是#FF0000 A 写法是正确的，有两种写法： document.getElementById("input").style.backgroundColor = "red"; inputElement.style.backgroundColor = "#FF0000"; 7， B 这里考察 HTML 标签的使用： <audio> 标签定义声音，比如音乐或其他音频流。 A 正确。 <canvas> 标签定义图形，比如图表和其他图像。<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。 B 错误， <article>标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来 自论坛的文本。亦或是来自其他外部源内容。 <menu> 标签定义命令的列表或菜单。<menu> 标签用于上下文菜单、工具栏以及用于列出表单控件和命令。 C 正确 command 元素表示用户能够调用的命令。<command> 标签可以定义命令按钮，比如单选按钮、复选框或按钮。只有当 command 元素位于 menu 元素内时，该元素才是可见的。否则不会显示这个元素，但是可以用它规定键盘快捷键。 D 正确。 8，B static 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元 素中。 relative 元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。 absolute 元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原 先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流 中生成何种类型的框。 fixed 元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。 9，A 正确; B 是关键字； C 有空格； D 开头为数字； 第一个字符必须是一个 ASCII 字母（大小写均可），或一个下划线(_)。注意第一个字符不能是数字。 后续的字符必须是字母、数字或下划线。 变量名称一定不能是 保留字。

《前端面试题》由：免费论文网互联网用户整理提供；
链接地址：http://www.csmayi.cn/meiwen/48317.html
转载请保留,谢谢!

• 上一篇：前端面试题及答案
• 下一篇：家有香椿树阅读答案