当前位置: 代码迷 >> JavaScript >> JavaScript 面试题汇总(一)
  详细解决方案

JavaScript 面试题汇总(一)

热度:820   发布时间:2012-11-23 22:54:33.0
JavaScript 面试题集锦(一)

一 选择题

1.关于XHTML 1.0规定的级别声明,下面选项中属于严格类型的是():

?

A.Strict B.Trasitional C.Frameset D.Mobile

?

答案:A。XHTML1.0有三种文档类型:Strict严格类型,Trasitional过渡类型,Frameset框架类型。

?

2.下面HTML标签中,默认占据整行的是():

?

A.<h1> B.<div> C.<span> D.<a>

?

答案:AB。h1和div都是块级元素,默认占据整行。

?

3.下面HTML代码片段中符合XHTML使用规范的是():

?

A. <table><tr><td></tr></table>

B.?<input type="checkbox" checked/>

C. <img src="title.jpg" alt="Welcome">

D. <hr />

?

答案:D。XHTML的使用规范:1.有文件类型声明;2.小写的标签名和属性名;3.给所有的属性加上引号;4.所有标签,包括空标签都应闭合。

?

4.下面选项中,()可以设置网页中某个标签的左外边距为5像素:

?

A. margin:0 5px;

B. margin:5px 0 0 0;

C. margin:0 0 0 5px;

D. padding-left:5px;

?

答案:C。CSS的边距值的顺序是从上top开始围绕元素顺时针旋转的:

margin: top right bottom left;

如果边距少于4个值按照下面规则进行值复制:

1.如果缺少左外边距的值,则使用右外边距的值。

2.如果缺少下外边距的值,则使用上外边距的值。

3.如果缺少右外边距的值,则使用上外边距的值。

?

5.在CSS中,为页面中的某个DIV标签设置以下样式,则该标签的实际宽度为():

div { width:200px; padding:0 20px; border:5px; }

?

A. 200px B. 220px C. 240px D. 250px

?

答案:D。实际宽度=外边距+边框+内边距+内容宽度,0+20px*2+5px*2+200px = 250px。

?

6.下面选项中,可以设置页面中某个DIV标签相对页面水平居中的CSS样式是():

?

A. margin:0 auto;

B. padding:0 auto;

C. text-align:center;

D. vertival-align:middle;

?

答案:A。

?

7.在HTML中,DIV默认样式下是不带滚动条的,若要是<div>标签出现滚动条,需要为该标签定义()样式:

?

A. overflow:hidden;

B. display:block;

C. overflow:scroll;

D.display:scroll;

?

答案:C。overflow当内容溢出元素框时发生的事情。

visible:默认值,内容不会发生修剪,会呈现在元素框之外。

hidden:内容会被修剪,并且其余内容是不可见的。

scroll:内容会被修剪,但是浏览器会显示滚动条查看其余内容,始终会有滚动条。

auto:如果内容被修剪,会出现滚动条,否则不会出现滚动条。

?

8.阅读下面HTML代码,在IE7.0及以上版本浏览器中,两个DIV之间的空白距离是():

<style type="text/css">

.header {margin-bottom:10px; border:1px solid #f00;}

.container {margin-top:15px; border:1px solid #f00;}

</style>

?

<div><div>

<div class="container"><div>

?

A. 0px B.10px C.15px D.25px

?

答案:C。

?

9.阅读下面HTML代码,下面选项中增加的样式各异使两个DIV不再同一行显示的是():

<style type="text/css">

div {float:right;}

</style>

...

<div class="box1"></div>

<div class="box2"></div>

...

?

A. .box2 {clear:left;}

B. .box2 {clear:both;}

C. .box1 {clear:right;}

D. .box2 {clear:right;}

?

答案:BD。因为都是右浮动,所以不再同一行,应该清除第二个div的右浮动。

clear:right;在右侧不允许出现浮动元素。

clear:left;在左侧不允许出现浮动元素。

clear:both;两侧都不允许出现浮动元素。

clear:none;默认值,允许两侧出现浮动元素。

?

10.阅读下面HTML代码,若要使<dt>和<dd>标签在同一行显示,下面选项中的CSS书写正确的是():

<dl>

<dt>用户名:</dt>

<dd><input type="text" name="userName" size="12" /></dd>

</dl>

?

A. dl dt {float:left;}

B. dl dd {float:left;}

C. dl dt, dl dd {float:left;}

D. dl {display:inline;}

?

答案:AC。

?

11.某页面中有一个1行3列的表格,其中表格行<tr>的id为row1,下列选项中能在表格中增加一列,并且这一列显示在最后的是():

?

A. document.getElementsById("row1").Cells(3);

B. document.getElementsById("row1").insertCell(2);

C. document.getElementsById("row1").insertCell(3);

D. document.getElementsById("row1").insertCell(0);

?

答案:C。

?

Table对象:代表一个HTML表格。

tableObject.deleteRow(index) 从表格删除指定位置的行。

tableObject.insertRow(index) 从表格指定位置插入一个新行。

TableRow对象:代表一个HTML表格行。

tablerowObject.deleteCell(index) 删除表格行中的单元格。

tablerowObject.insertCell(index) 在表格行中插入一个新单元格。

?

eg:

?

<html>
<head>
<script type="text/javascript">
function insRow()
  {
  var x=document.getElementById('myTable').insertRow(0)
  var y=x.insertCell(0)
  var z=x.insertCell(1)
  y.innerHTML="NEW CELL1"
  z.innerHTML="NEW CELL2"
  }
</script>
</head>

<body>
<table id="myTable" border="1">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
<tr>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
</tr>
</table>
<br />
<input type="button" onclick="insRow()" value="插入行">

</body>
</html>
?

?

12.下列用来处理表格及其元素的方法中,书写正确并且可以删除行中指定的单元格的是():

?

A. deleteCell()

B. deleteRow()

C. delCell()

D. delRow()

?

答案:A。

?

13.下列正则表达式中,可以匹配首位是小写字母或数字,其它位数是小写字母的最少两位的字符串:

?

A. /^\w{2,}$/

B. /^[a-z0-9][a-z]+$/

C.?/^[a-z0-9][a-z]*$/

D. /^[a-z0-9]\d+$/

?

答案:B。

?

正则表达式

^ 开始位置

$ 结束位置

* 零次或多次

+ 1次或多次

{n} 匹配n次

{n,} 至少匹配n次

{n,m} 至少匹配n次,最多匹配m次

\w 匹配包括下划线的任何单词字符,等价于[A-Za-z0-9_]

\d 匹配一个数字

?

14.下列选项中可以正确的匹配一个正整数的是:

?

A. ^[1-9]\d*$

B. ^[1-9]+$

C. ^[0-9]\d*$

D. ^[1-9]\d+$

?

答案:A。

?

15.关于HTML中的表格和样式,下面说法错误的是:

?

A.表格的边框可以使用CSS来控制

B.单元格的尺寸可以使用CSS来控制

C.单元格的背景颜色可以使用CSS来控制

D.单元格的跨行或跨列可以使用CSS来控制

?

答案:D。

?

16.CSS样式background-position:5px -10px代表的意义是:

?

A.背景图片向左偏移5px,线下偏移10px

B.背景图片向左偏移5px,线上偏移10px

C.背景图片向右偏移5px,线下偏移10px

D.背景图片向右偏移5px,线上偏移10px

?

答案:D。

?

background-position

xpos ypos 第一个值是水平位置,第二值是垂直位置。左上角是0 0。如果你仅规定了一个值,另一个值将是50%。

x% y% 左上角是 0% 0%,右下角是 100% 100%

top/center/bottom left/center/right 默认值是:0% 0%,如果您仅规定了一个关键词,那么第二个值将是center。

?

17.下面CSS Hack中,能够被IE6识别的是():

?

A. +width:10px;

B. _width:10px;

C. width:10px\0;

D. @width:10px;

?

答案:B。

?

CSS Hack:

?

background-color:blue; /* all */

background-color:blue\9; /*ie */

background-color:blue\9\0; /*ie9 */

background-color:blue\0; /*ie8 ie9*/

+background-color:blue; /*ie6 ie7*/

_background-color:blue; /*ie6*/

background-color:blue !important; /*ie7 firefox*/

*background-color:blue; /*ie6 ie7*/

?

?

<!DOCTYPE html>  

<html>  

<head>  

    <title>Css Hack</title>  

    <style>  

    #test   

    {   

        width:300px;   

        height:300px;   

          

        background-color:blue;      /*firefox*/

        background-color:red\9;      /*all ie*/

        background-color:yellow\0;    /*ie8*/

        +background-color:pink;        /*ie7*/

        _background-color:orange;       /*ie6*/

    }  

    :root #test { background-color:purple\9; }  /*ie9*/

    @media all and (min-width:0px){ #test {background-color:black\0;} }  /*opera*/

    @media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }  /*chrome and safari*/

    </style>  

</head>  

<body>  

    <div id="test">test</div>  

</body>  

</html>
?

?

18.当为一个向左或向右浮动的元素设置左或右边距时,在IE6浏览器中就会出现一个双倍边距的BUG,解决双倍边距BUG的常用方法是在浮动元素上添加()样式:

?

A. display:inline

B. display:none

C. float:none

D. overflow:hidden

?

答案:A。

?

19.在HTML中,<ol>、<ul>、<dl>、<dd>、<form>等标签,在IE与Firefox浏览器中的外边界、填充的默认值会存在差异,解决这个差异的办法是为各标签设置()样式:

?

A. margin:0;padding:0;

B. border:0;

C. display:inline;

D.width:100%;

?

答案:A。

?

上述标签在Firefox下有个padding值,却没有margin值,而IE却相反,所以都设置为margin:0;padding:0;就不会存在差异。

?

20.在W3C规范中,下面关于HTML标签的描述错误的是():

?

A. <html>标签在页面中只能有1个

B. <body>标签在页面中只能有1个

C. 内嵌框架是自身闭合的标签,写法是<iframe/>

D. <textarea>标签的value属性用来设置多方文本框中的默认文本

?

答案:CD。

?

<textarea>多行文本标签,没有value属性。<textarea row="3" col="20">多行文本内容</textarea>

<iframe>内框架标签,不是自身闭合的标签。把需要的内容放置在<iframe></iframe>之前。

?

21.阅读下面CSS代码,下面选项中与该代码下次熬过等同的是():

.box {margin:10px 5px; margin-right:10px; margin-top:5px;}

?

A. .box{margin:5px 10px 10px 5px;}

B. .box{margin:5px 10px 0px 0px;}

C. .box{margin:5px 10px;}

D. .box{margin:10px 5px 10px 5px;}

?

答案:A。后面会覆盖前面的值,不会产生累加效果。

?

22.在CSS中,下面关于样式"#container, .main{font-size:12px;}"与"#container .main{font-size:14px;}"的说法正确是是:

?

A.前者表示同时设置两个选择器的样式,后者表示只设置main选择器的样式

B.前者表示只设置main选择器的样式,后者表示同时设置两个选择器的样式

C.二者中间的逗号或者空格都可以省略

D.二者作用是相同的

?

答案:A。

?

23.在CSS中,下面关于定义字体类型的用法正确的是:

A. font-family:宋体,Arial Black,Times New Roman;

B.?font-family:宋体,"Arial Black","Times New Roman";

C. font-family:"宋体",Arial Black,Times New Roman;

D. font-family:"宋体","Arial Black","Times New Roman";

?

?

答案:BD。font-family属性:规定元素的字体系列,使用逗号分隔,如果浏览器不支持第一个字体,则会尝试下一个。如果字体名称中间出现空格,必须用引号引起来。没有空格,可以用引号,也可以不用。

?

24.阅读下面HTML代码,如果期望tabs位于box容器的右下角,则需要添加的CSS样式是():

<div id="box"><div id="tabs"></div></div>

?

A. #tabs {position:absolute;right:0;bottom:0;}

B. #tabs {position:relative;right:0;bottom:0;}

C. #box {postion:relative;}#tabs{position:absolute;right:0;bottom:0;}

D. #box {position:relative;}#tabs{position:right bottom;}

?

答案:C。

?

25.在HTML页面中,调用外部样式表的方法是():

?

A. <style rel="stylesheet" type="text/css" href="外部样式表地址"/>

B. <link rel="stylesheet" type="text/css" href="外部样式表地址"/>

C. <style rel="stylesheet" type="text/css" link="外部样式表地址"/>

D. <link rel="stylesheet" type="text/css" style="外部样式表地址"/>

?

答案:B。<link rel="stylesheet" type="text/css" href="mystyle.css" />

?

26.阅读下面的HTML及CSS代码,图片据最外面的DIV外边缘的距离是():

...

<style type="text/css">

#outbox{border:10px solid #ff0000; width:400px;}

#inbox{border:20px solid #ff0000; margin:10px;padding:10px;}

</style>

...

<div id="outbox">

<div id="inbox"><img src="flower.jpg"/><div>

</div>

?

A. 10px B.30px C.40px D.50px

?

答案:D。(10px+20px+10px)+10px=50px

?

27.在HTML网页添加如下CSS样式,鼠标不再连接上面时,网页中的链接呈现的颜色为():

body{color:red;}

a{color:black;}

a:link, a:visited{color:green;}

a:hover,a:active{color:blue;}

...

?

A.红色 B.绿色 C.蓝色 D.黑色

?

答案:B。

?

?

a:link {color: #FF0000}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接(鼠标点击点击不松开) */

?

?

注意:a:hover必须置于a:link和a:visited之后才是有效的;a:active必须置于a:hover之后才是有效的。

?

28.下面关于外部样式表的说法错误的是:

?

A 文件扩展名为.css

B 外部样式表内容以<style>标签开始,</style>标签结束

C CSS属性值不可以包含汉字

D 使用外部样式表可以使网站更加简洁,风格保持统一

?

答案:BC。外部样式表直接开始写样式不需要<style>标签。CSS属性值可以包含汉字,如字体font-family:宋体;

?

29. 下面选项中是合法的类样式的是:

?

A .Word

B #Word

C .2A

D #A2

?

答案:A。类样式(类选择器)以.开头,第一个位置不能是数字,不能包含空格、符号、下划线。

?

30.以下哪条语句会产生运行错误():

?

A. var obj = ();

B. var obj = [];

C. var obj = {};

D. var obj = //;

?

答案:A。

?

?

? ? ? ? // var obj = (); 语法错误

? ? ? ? var obj1 = [];//object?

? ? ? ? var obj2 = {};//object?

? ? ? ? var obj3 = //;//undefine?

? ? ? ? alert(typeof(obj1));?

? ? ? ? alert(typeof(obj2));?

? ? ? ? alert(typeof(obj3));?

?

?

31.以下哪个单词不属于javascript保留字:()

?

A.with B.parent C.class D.void

?

答案:B。

?

32.请选择结果为真的表达式:()

?

A. null instanceof Object

B. null === underfined

C. null == underfined

D. NaN == NaN

?

答案:C。

?

null是基本类型;

?

?

先说 ===,这个比较简单。下面的规则用来判断两个值是否===相等:?

1、如果类型不同,就[不相等]?

2、如果两个都是数值,并且是同一个值,那么[相等];(!例外)的是,如果其中至少一个是NaN,那么[不相等]。

3、如果两个都是字符串,每个位置的字符都一样,那么[相等];否则[不相等]。?

4、如果两个值都是true,或者都是false,那么[相等]。?

5、如果两个值都引用同一个对象或函数,那么[相等];否则[不相等]。?

6、如果两个值都是null,或者都是undefined,那么[相等]。?

?

再说 ==,根据以下规则:?

1、如果两个值类型相同,进行 === 比较。?

2、如果两个值类型不同,他们可能相等。根据下面规则进行类型转换再比较:?

a、如果一个是null、一个是undefined,那么[相等]。?

b、如果一个是字符串,一个是数值,把字符串转换成数值再进行比较。?

c、如果任一值是 true,把它转换成 1 再比较;如果任一值是 false,把它转换成 0 再比较。?

d、如果一个是对象,另一个是数值或字符串,把对象转换成基础类型的值再比较。对象转换成基础类型,利用它的toString或者valueOf方法。js核心内置类,会尝试valueOf先于toString;例外的是Date,Date利用的是toString转换。

e、任何其他组合,都[不相等]。?

?

?

判断一个值是否是NaN,只能用isNaN()来判断

?

function f1() {}

alert(f1 instanceof Function);//true

alert(f1 instanceof Object);//true

alert(Function instanceof Object);//true

alert(Object instanceof Function);//true

?

32.请选择对就avascript理解有误的:()

?

A. JScript是javascript的简称

B. javascript是网景公司开发的一种Java脚本语言,其目的是为了简化Java的开发难度

C. FireFox和IE存在大量兼容性问题的主要原因在于他们对javascript的支持不同上

D. Ajax技术一定要使用javascript技术

?

答案:ABCD。

?

33.foo对象有att属性,那么获取att属性的值,以下哪些方法是可以的:()

?

A. foo.att

B. foo("att")

C. foo["att"]

D. foo{"att"}

E. foo["a"+"t"+"t"]

?

答案:ACE。

?

34.在不指定特殊属性的情况下,哪几种HTML标签可以手动输入文本:()

?

A. <textarea></textarea>

B. <input type="text"/>

C. <input type="hidden"/>

D. <div></div>

?

答案:AB。

?

35.以下哪些是javascript的全局函数:()

?

A. escape

B. parseFloat

C. eval

D. setTimeout

E. alert

?

答案:ABC。

?

全局函数:

decodeURI() 解码某个编码的 URI。
decodeURIComponent() 解码一个编码的 URI 组件。
encodeURI() 把字符串编码为 URI。
encodeURIComponent() 把字符串编码为 URI 组件。
escape() 对字符串进行编码。
eval() 计算 JavaScript 字符串,并把它作为脚本代码来执行。
getClass() 返回一个 JavaObject 的 JavaClass。
isFinite() 检查某个值是否为有穷大的数。
isNaN() 检查某个值是否是数字。
Number() 把对象的值转换为数字。
parseFloat() 解析一个字符串并返回一个浮点数。
parseInt() 解析一个字符串并返回一个整数。
String() 把对象的值转换为字符串。
unescape() 对由 escape() 编码的字符串进行解码。

?

36.关于iframe表述正确的是:()

?

A.通过iframe,网页可以嵌入其他网页内容,并可以动态更改

B.在相同域名下,内嵌的iframe可以获取外层网页的对象

C.在相同域名下,外层网页脚本可以获取iframe网页内的对象

D.可以通过脚本调整iframe的大小

?

答案:ABCD。

?

37.关于表格表述正确的有:()

?

A.表格中可以包含tbody元素

B.表格中可以包含caption元素

C.表格中可以包含多个tbody元素

D.表格中可以包含colgroup元素

E.表格中可以包含col元素

?

答案:ABCDE。

?

38.关于IE的window对象表述正确的有:()

?

A.window.opener属性本身就是指向window对象

B.window.reload方法可以用来刷新当前页面

C.window.location="a.html"和window.location.href=""a.html的作用都是把当前页面替换成a.html页面

D.定义了全局变化g;可以用window的方式来存取该变量

?

答案:ACD。 应该是:window.location.reload()。

?

二判断题

1.在CSS中,border:1px 2px 3px 4px表示设置某个HTML元素的上边框1px、右边框2px、下边框3px、左边框4px。

?

(错误)

?

border-width:1px 2px 3px 4px;

?

2.在HTML中,<iframe>标签的frameborder属性用来设置内嵌框架的边框宽度,属性值设为2表示边框宽度为2像素。

?

(错误)

?

frameborder属性有两个值0或1,时候显示框架周围的边框。

?

3.在CSS中,padding和margin的值都可以为负数。

?

(错误)

?

padding不允许使用负值。

?

4.在HTML中,单元格的rowspan属性用来设置单元格的跨行。

?

(正确)

?

5.在CSS中,设置display属性为none可以用来隐藏页面中的元素。

?

(正确)

?

6.在HTML DOM中,TableCell对象的cellindex属性可以返回单元格内部数据的水平排列方式。

?

(错误)

?

align属性:设置或返回单元格内部数据的水平排列方式。

cellindex属性:返回单元格在某行的单元格集合中的位置。

?

7.在HTML DOM中,当deleteRow(index)方法的参数index等于1时,标识删除第一行。

?

(错误)

?

8.正则表达式中,“*”匹配前一项0次或1次,也就是说前一项是可选的,等价于{0,1}.

?

(错误)

?

*:0次或多次。

?

9.在正则表达式中,符号$匹配字符串的结束。

?

(正确)

?

10.DOM由三部分组成,分别是Core DOM、XML DOM和HTML DOM。

?

(正确)

?

三填空题

1.在HTML DOM中,Table对象的______方法可以从表格中删除一行。

?

deleteRow(index)

?

2.在HTML DOM中,TableRow对象的______方法用于在一行中的指定位置插入一个空的<td>标签。

?

insertCell(index)

?

3.正则表达式的字符_____可以匹配前一项1次或多次,等价于{1,}.

?

+

?

4.写出匹配一个电子邮件地址的正则表达式_____。

?

^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$

?

5.JavaScript中String对象的正则表达式方法_____用于找到一个或多个正则表达式的匹配。

?

match

?

6.在CSS中,font:16px/20px Arial表示的意义是行高_____、字体大小____。

?

20px 16px

?

7.在CSS中,____属性可以用来设置列表前面的列表标记类型。

?

list-style-type

?

8.在CSS中,_____属性可以用来设置元素的叠放顺序。

?

z-index

?

9.样式background-color:#f00;background-repeat:repeat-y;background-image:url(banner.jsp);background-position:left top;可以合写为__________。

?

background:#foo url(banner.jpg)?repeat-y?left top ;

?

background可以按顺序设置如下的属性:background-color>background-image>background-repeat>background-attachment>background-position。

如:background:#00ff00 url(bgimage.gif) no-repeat fixed top;

?

10.在CSS中,控制图片周围的文本相对于图片垂直居中,需要为图片添加______样式。

?

vertical-align

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

  相关解决方案