JavaScript 面试题集锦(一)

最新推荐文章于 2024-07-17 15:26:15 发布

wanghao191996155

最新推荐文章于 2024-07-17 15:26:15 发布

阅读量2.2k

点赞数 2

分类专栏： JavaScript 文章标签： javascript 面试 xhtml ViewUI

本文链接：https://blog.csdn.net/wanghao191996155/article/details/84162405

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一选择题

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之间的空白距离是（）：

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

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

</style>

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

答案：C。

9.阅读下面HTML代码，下面选项中增加的样式各异使两个DIV不再同一行显示的是（）：

div {float:right;}

</style>

...

...

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>

</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" οnclick="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>

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样式是（）：

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外边缘的距离是（）：

...

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

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

</style>

...

</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

wanghao191996155

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 面试题集锦(一)

一选择题1.关于XHTML 1.0规定的级别声明，下面选项中属于严格类型的是（）： A.Strict B.Trasitional C.Frameset D.Mobile 答案：A。XHTML1.0有三种文档类型：Strict严格类型，Trasitional过渡类型，Frameset框架类型。 2.下面HTML标签中，默认占据整行的是（）： A.&lt...
复制链接

扫一扫