二十道前端面试题

原创 2015年11月19日 20:33:59

一、如何添加html元素的事件,有几种方法?

1.直接书写在HTML代码里。
<input id=”button1″ type=”button” onclick=”do something here”>
“do something here”,
可以包含很多语句,比如说”alert (‘botton is clicked‘);“,
或者”check(this.form);returnfalse;”check 是已经定义的一个函数,this这里指的是这个button,this.form就是包含这个按钮的表单。(关于this这个东西,比较复杂,得好好看看犀牛书)

2.JavaScipt中给元素的onclick,onselect,onfocus等属性赋值。
the_button = document.getElementById(‘button1″);
the_button.onclick = fucntionname;
这里我们不能用在HTML代码直接写的形式,我们给它赋的值是一个函数,不加引号,也不能加上括号。我们也可以使用匿名函数来执行多个语句。
the_button.onclick = function( ) { somefunciotn( ); do_somthing_else;another_fucntion(); };
3.
使用事件监听。
obj.addEventListener(whichEvent, handler, direction)(MOZ/N6+,DOM2)
obj.attachEvent(whichHandler, **theFunction**) (IE5+)
由于IE不支持DOM2标准,所以为了浏览器兼容,我们一般采用下面的形式。( DOM2的函数中direction是一个bool值,表示冒泡(false)还是捕获(true)
try{ the_botton.addEventListener(‘click’,handler_function,fasle;}
catch(e) { the_botton.attachEvent(‘onclick’,hanler_fucntion);}
还有一点要注意DOM2中的函数第1参数是whichEvent,’click’,而IE中是whichHandler,”onclick”。有带不带”on”之分。

二、innerText 和 innerHTML的区别?

<div id="test">
    <span style="color:red">test1</span> test2
</div>

test.innerHTML :

  也就是从对象的起始位置到终止位置的全部内容,包括Html标签。

  上例中的test.innerHTML的值也就是“<span style="color:red">test1</span> test2 ”。

test.innerText:

  从起始位置到终止位置的内容, 但它去除Html标签

  上例中的text.innerTest的值也就是“test1 test2”, 其中span标签去除了。

另外:

test.outerHTML:

   除了包含innerHTML的全部内容外, 还包含对象标签本身。

  上例中的text.outerHTML的值也就是<div id="test"><span style="color:red">test1</span> test2</div>

特别说明:

   innerHTML是符合W3C标准的属性,而 innerText只适用于IE浏览器,因此,尽可能地去使用innerHTML,而少用innerText,如果要输出不含HTML标签的内容,可以使 用innerHTML取得包含HTML标签的内容后,再用正则表达式去除HTML标签。

下面是一个简单的符合W3C标准的示例: 

 <a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>


三、js的基础对象有那些, window和document的常用的方法和属性列出来

基础对象有三种:

1.ECMAScript原生对象: Array、String、RegExp、Global、Math、Date、Number、Boolean、Error(+六种)、Object;

2.BOM对象:window;

3.DOM对象:document.

其中window的常用方法有:

1、alert(msg):这就不用说了吧。
   2、blur():把被引用的窗口放到所有其它打开窗口的后面。

3、clearInterval(intervalID):关掉以setInterval()方法开始的周期循环,参数为setInterval()返回的ID。
   4、close():关闭浏览器窗口
   5、confirm(msg): 显示一个带OK和Cancel按钮的确认对话框
   6、focus():把被引用的窗口放到所有其它打开窗口的前面。
   7、open("URL","Name"[,"Features"]):打开一个新窗口。第三个参数用于设定新打开窗口的一些窗口属性,是字符串方式表示,它由一系列由逗号间隔的赋值表达式列表组成。主要包括:toolbar(是否加工具按钮)、location(是否加URL地址栏)、memubar(是否加菜单栏)、status(是否加状态栏)、scrollbars(是否自动加滚动)、resizable(是否可改变大小)、width(设定宽度)、height(设定高度),这些参数除最后两个为数值外都为布尔值。
   8、prompt(msg,defVal):打开用户交互对话框,返回用户输入值。
   9、setInterval("fun",msecDelay[,arg1,...]):设定一个需在固定时间重复执行的任务。从第三个参数开始的参数为要执行任务的参数值。
   10、setTimeout(("fun",msecDelay[,arg1,...]):设定一个需在指定时间间隔后要执行的任务。参数含意同setInterval。

window的常用属性有:

1、closed:用于判断一个指向window对象的引用是否已关闭。

2、defaultStatus:用于在状态栏中显示一个字符串,默认是空字符串。这个属性值的显示优先级较链接对象或图片对象要低。用法为在网页加载中加入 window.defaultStatus = "Welcome to www.52its.com"。

3、frames:框架集合,在多框架窗口中,顶层或父窗口包含多个独立的框架时,可以使用该属性,是通过数组实现的。(但此属性只能深入到第二层,而不能进再下的层次中。假设现有A、B、C三个框架,且A为父框架,B、C为子框架,现要由B得到C的文档标题可以这样写:parent.frames[2].document.title。如果你给每个框架定义了名称也可以直接使用,在此假设你定义C子框架名为CFrame,则刚才那句也可以这样写:parent.CFrame.document.title。)

4、opener:指向打开当前窗口的父窗口的引用。经常可用来做一些关联窗口互动操作。如在窗口A中通过window.open()打开了窗口B,则在B中可以使用此属性操作A窗口。如关闭A窗口:window.opener.close()。

5、parent及top:如果当前窗口为一个多框架中的一部分时,可以使用该两个属性。parent属性指向上一层框架,而top属性指向顶层框架。使用top防止被其它网页加载的方法: if (top != self) top.location = location

6、self:此属性代表和窗口一样的对象,默认的对象也就是窗口对象。例如想得到一个单框架窗口的文档标题可有这三种方法:
      window.document.title == self.document.title == document.title

7、status:在浏览器的状态栏显示临时信息。

8、prompt(msg,defVal):打开用户交互对话框,返回用户输入值。

9、setInterval("fun",msecDelay[,arg1,...]):设定一个需在固定时间重复执行的任务。从第三个参数开始的参数为要执行任务的参数值。
   10、setTimeout(("fun",msecDelay[,arg1,...]):设定一个需在指定时间间隔后要执行的任务。参数含意同setInterval。

document的属性有:

document.title                 //设置文档标题等价于HTML的<title>标签
document.bgColor               //设置页面背景色
document.fgColor               //设置前景色(文本颜色)
document.linkColor             //未点击过的链接颜色
document.alinkColor            //激活链接(焦点在此链接上)的颜色
document.vlinkColor            //已点击过的链接颜色
document.URL                   //设置URL属性从而在同一窗口打开另一网页
document.fileCreatedDate       //文件建立日期,只读属性
document.fileModifiedDate      //文件修改日期,只读属性
document.fileSize              //文件大小,只读属性
document.cookie                //设置和读出cookie
document.charset               //设置字符集 简体中文:gb2312


常用方法有:

document.write()                      //动态向页面写入内容
document.createElement(Tag)           //创建一个html标签对象
document.getElementById(ID)           //获得指定ID值的对象
document.getElementsByName(Name)      //获得指定Name值的对象
document.body.appendChild(oTag)

四、前端开发的优化的问题

(1) 减少http请求次数:css spirit,data uri
(2) JS,CSS源码压缩
(3) 前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数
(4) 用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能
(5) 用setTimeout来避免页面失去响应
(6) 用hash-table来优化查找
(7) 当需要设置的样式很多时设置className而不是直接操作style
(8) 少用全局变量
(9) 缓存DOM节点查找的结果
(10) 避免使用CSS Expression
(11) 图片预载
(12) 避免在页面的主体布局中使用table,table要等其中的内容完全下载之后才会显示出来,显示比div+css布局慢


五、如何控制网页在网络传输过程中的数据量

1.启用GZIP压缩;

2.保持良好的编程习惯,避免重复的css,js代码,多余的HTML标签和属性。

六、JS的本地对象、内置对象、宿主对象分别写出几个

1.本地对象有:Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError。

2.内置对象:Global和Math这两个对象又被称为“内置对象”,这两个对象在脚本程序初始化时被创建,不必实例化这两个对象。

3.宿主对象:可以理解为浏览器提供的对象,所有的BOM和DOM对象。


七、document.load和document.ready的区别


页面加载完成有两种事件,一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件),二是onload,指示页面包含图片等文件在内的所有元素都加载完成。

八、简述border:none以及border:0的区别,并给出使用建议

性能差异:

【border:0;】把border设为“0”像素效果等于border-width:0,浏览器依然对border-width、border-color进行了渲染,即已经占用了内存值。

【border:none;】把border设为“none”,实际效果等同于border-style:none,浏览器解析“none”时将不作出渲染动作,即不会消耗内存值。

兼容性差异:

IE6、IE7中,border为“none”时,标签button、input边框依然存在。

1.对比border:0;与border:none;之间的区别在于有渲染和没渲染,感觉他们和display:none;与visibility:hidden;的关系类似,而对于border属性的渲染性能对比暂时没找测试的方法,虽然认为他们存在渲染性能上的差异但也只能说是理论上。
2.如何让CSS 中border:none;实现全兼容?
只需要在同一选择符上添加背景属性即可
对于border:0;与border:none;个人更向于使用,border:none;,因为border:none;毕竟在性能消耗没有争议,而且兼容性可用背景属性解决不足以成为障碍。


九、指出{}+[]与[]+{}的值,为什么

     1、首先[] 就是 new Array() , 且{} 就是 new Object()


十、form中的input可以设置为readonly和disable,请问2者有什么区别?


Readonly只针对input(text / password)和textarea有效,而disabled对于所有的表单元素都有效,但是表单元素在使用了disabled后,当我们将表单以POST或GET的方式提交的话,这个元素的值不会被传递出去,而readonly会将该值传递出去(readonly接受值更改可以回传,disable接受改但不回传数据)。



十一、在JavaScript程序中,获得一个元素并将其隐藏,有哪两种设置其style属性的方法?并说出区别



用JavaScript隐藏控件的方法有两种,分别是通过设置控件的style的“display”和“visibility”属性。

当style.display="block"或style.visibility="visible"时控件或见,当style.display="none"或style.visibility="hidden"时控件不可见。不同的是“display”不但隐藏控件,而且被隐藏的控件不再占用显示时占用的位置,而“visibility”隐藏的控件仅仅是将控件设置成不可见了,控件仍然占俱原来的位置。


十二、firefox嵌套div标签的居中问题的解决方法

假定有如下情况:
<div id="a">??? <div id="b"> </div></div>
如果要实现b在a中居中放置,要如何实现?


如果要实现b在a中居中放置,一般只需用CSS设置a的text-align属性为center。这样的方法在IE里看起来一切正常;但是在Firefox中b却会是居左的。 解决办法就是除了需要在a中设置text-align属性为center之后,还需要设置b的横向margin为auto。例如设置b的CSS样式为:margin: 0 auto;

十三、简述一下Ajax的工作原理。

Ajax的定义:
         (不严格)客户端与服务器端进行交互,而无需刷新当前页面的技术.
        作用:
        可以实现同步交互所不能完成的功能,提高同步实现的效果。

十四、JavaScript中获取某个元素有哪几种方式?


分别可以使用id、name、class、数组加下标、getElementById、getElementsByName、getElementsByTagName

十五、CSS+DIV开发Web页面的优势有哪些?

1、表现和内容相分离 将设计部分单独分离出来放在一个独立样式文件中,HTML文件中只存放文本信息。
2、提高搜索引擎对网页的索引效率 利用只包含结构化内容的HTML代替嵌套的标签,搜索引擎将更有效地搜索到你的网页内容,并可能给你一个较高的评价。 
3、提高页面浏览速度 对于同一个页面的视觉效果,采用CSS+DIV重构的页面容量要比TABLE编码的页面文件容量小得多,前者一般只有後者的1/2大小。
4、易于维护和改版 只要简单的修改几个CSS文件就可以重新设计整个网站的页面。



十六、在HTML页面布局中,position的值有哪几种?默认值又是什么?



position:static/relative / absolute/fixed

Static:静态定位。如果你没有设置position属性,那么缺省默认值就是static。top,left,bottom,right等属性,在static的情况下是无效的,要使用这些属性,必须把position设置为其他三个值之一。

Relative:相对定位。元素将按照静态定位时的位置进行调整,在静态定位中分配给元素的空间仍然会分配给它,它两边的元素不会向它靠近来填充那个空间,但它们也不会从元素的新位置被挤走。

Absolute:绝对定位。元素将按照包含它的元素的位置进行调整,比如它嵌套在另一个绝对定位的元素中,那么就相对于那个元素定位。

Fixed:固定定位。元素将被设置在浏览器上一个固定位置上,不会随其他元素滚动。形象点说,上下拉动滚动条的时候,fixed的元素在屏幕上的位置不变。需要注意的是IE6并不支持此属性。

十七、JavaScript中的数据类型有几种?分别是什么?



JavaScript中的数据类型:

(1)值类型:  number   string  boolean

(2)特殊类型:  null   undefined

(3)引用类型:  object(....)   function





十八、HTML里一些标签里面不能放区块元素


比如:<p>
<div></div>  <!--语义上的限制:p中不能添加区块元素-->
</p>
解决方法是什么?

像p、span、a等等这种内联元素内部是不能容纳区块元素的,这是语义规则。
如果要添加的话,应该把p元素的display属性设为block或者inline-block,或者设置div的display为inline-block

十九、Number( )和parseInt( )的区别


parseInt ( cString )从字符串cString非空字符开始转换得到的整数,遇到小数点或其他0-9外的字符就停止,如“-1234a”,“-1234.0”都将返回 -1234;如果除第一个符号外一个0-9字符都不是,将返回NaN,如“-a”、“abc”等;
Number( cString )从字符串cString转换得到的数字,包括Int和Float类型,如:“-123”返回-123,“123”和“00123”都返回 123,“234。56”返回234。56等。cString必须是合法的数字串,否则返回NaN;如“.123”、“1.23.45”、 “--123”、“123a"都返回NaN.
总之Number( )更象parseFloat( ),Number对参数更挑剔,稍有不是数字就返回NaN。parseFloat支持第一个非空字符为小数点,如parseFloat(".123" )返回0.123。而Number(".123" )返回NaN。空字符串或完全空格串健壮的parseFloat()返回NaN,而Number()返回0,这有点让人费解。除了不支持无前导0小数 (如.123、-.123)和支持多余的前导0(如-00123返回-123)多少不符合常规外,Number能用来验证数字串!


二十、XHTML1.0对HTML4.0的改进


XHTML是符合XML标准的Web一种开发语言。它是参考HTML语法,在HTML4.0基础上,修改而来的。可以称其为XHTML1.0。

 xhtml中: 
1.所有的标记都都要闭合  
    所有的标记都要闭合,如果是单独不成对的标签,在标签最后加一个"/"来关闭它。例如: 


2.所有标签的元素和属性的名字都必须使用小写 
?
1
2
3
<h6>close tag </h6>
<img src="../avg.png" alt=’avg’/>
<br />
与HTML不一样,XHTML对大小写是敏感的,<title>和<TITLE>是不同的标签。XHTML要求所有的标签和属性的名字都必须使用小写。 

例如:

?
1
<BODY>必须写成<body> <DIV> 要写成 <div>
3.所有的XML标记都必须合理嵌套  
?
1
<p><b> </p></b> 必须修改为: <p> <b> </b> </p>
就是说,一层一层的嵌套必须是严格对称。 


4.所有的属性必须用引号(单或双)包括  
在HTML中,你可以不需要给属性值加引号,但是在XHTML中,它们必须被加引号。 
?
1
<height=80> 必须修改为: <height="80″>

5.把所有<和&特殊符号用编码表示  
任何小于号(<),不是标签的一部分,都必须被编码为& l t ; 任何大于号(>),不是标签的一部分,都必须被编码为& g t ; 任何与号(&),不是实体的一部分的,都必须被编码为& a m p; 
注:以上字符之间无空格。 


6.给所有属性赋一个值  
XHTML规定所有属性都必须有一个值,没有值的就重复本身。 
?
1
2
3
<input type="checkbox" name="shirt" value="medium" checked>
必须修改为:
<input type="checkbox" name="shirt" value="medium" checked="checked">


7.不要在注释内容中使"- -"  
"- -"只能发生在XHTML注释的开头和结束,也就是说,在内容中它们不再有效。 
?
1
2
3
<!- -这里是注释———–这里是注释- ->
需要用等号或者空格替换内部的虚线。
<!- -这里是注释============这里是注释- ->
注:- – 之间无空格 


8.图片必须有说明文字 每个图片标签都必须有ALT说明文字。  
?
1
<img src="ball.jpg" alt="large red ball" />
















版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

2017年前端面试题整理汇总100题

2017年前端面试题整理汇总100题
  • kebi007
  • kebi007
  • 2017年02月05日 18:14
  • 83933

前端面试题小集

web前端 微信号 vipweb8 功能介绍 分享Web前端相关的技术文章、工具资源、精选课程、热点咨询、个人干货 一、一个页面上两个div左右铺满...
  • likeuzi
  • likeuzi
  • 2017年06月22日 16:44
  • 360

web前端经典面试题

web前端面试题   其他问题 1、请谈谈你对性能优化的认识? 网页内容 减少http请求次数 80%的响应时间花在下载网页内容(images, stylesheets, javascri...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

超级有用的前端基础技术面试问题收集

说说你对闭包的理解 使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染,缺点是闭包会常驻内存,会增大内存使用量,使用不当很容易造成内存泄露。 闭包有三个特性: ...

前端面试题

HTML&CSS: 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应。 JavaScript: 数据类型...
  • kongjiea
  • kongjiea
  • 2015年06月03日 10:16
  • 34580

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

web前端面试题

1、请将冒泡排序和快速排序的算法写出来 实现冒泡排序: [html] view plain copy var times=0;  var bubbleSort=function(arr){ ...

web前端面试题-各大公司面试题(百度)

马上要换工作了,感觉自己很多东西都只知道怎么弄,不会查百度,不知道原理,网上整理了面试题,作为复习资料。首先是各大公司的面试题原始地址 http://www.jackpu.com/2016ge-d...
  • sugarf
  • sugarf
  • 2017年01月07日 17:23
  • 7123

前端面试题整理

  • 2017年10月26日 08:58
  • 548KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:二十道前端面试题
举报原因:
原因补充:

(最多只允许输入30个字)