前端模拟试题(javascript)讲解学习.doc

前端模拟试题(javascript)精品资料JavaScript模拟试题一、单选题1. 我们可以在下列哪个 HTML 元素中放置 Javascript 代码？A. B. C. D. 2. 写 Hello World 的正确 Javascript 语法是？A. (Hello World)B. Hello WorldC. response.write(Hello World)D. document.write(Hello World)3. 插入 Javacript 的正确位置是？A. 部分B. 部分C. 部分和 部分均可4. 引用名为 xxx.js 的外部脚本的正确语法是？A. B. C. 5. 外部脚本必须包含 标签吗？A. 是B. 否6. 如何在警告框中写入 Hello World？A. alertBox=Hello WorldB. msgBox(Hello World)C. alert(Hello World)D. alertBox(Hello World)7. 如何创建函数？A. function:myFunction()B. function myFunction()C. function=myFunction()8. 如何调用名为 myFunction 的函数？A. call function myFunctionB. call myFunction()C. myFunction()9. 如何编写当 i 等于 5 时执行一些语句的条件语句？A. if (i=5)B. if i=5 thenC. if i=5D. if i=5 then10. 如何编写当 i 不等于 5 时执行一些语句的条件语句？A. if =! 5 thenB. if 5C. if (i 5)D. if (i != 5)11. 在 JavaScript 中，有多少种不同类型的循环？A. 两种。for 循环和 while 循环。B. 四种。for 循环、while 循环、do.while 循环以及 loop.until 循环。C. 一种。for 循环。12. for 循环如何开始？A. for (i = 5; i+)B. for (i = 0; i = 5; i+)C. for (i = 0; i = 5)D. for i = 1 to 513. 如何在 JavaScript 中添加注释？A. This is a commentB. C. /This is a comment14. 可插入多行注释的 JavaScript 语法是？A. /*This comment has more than one line*/B. /This comment has more than one line/C. 15. 定义 JavaScript 数组的正确方法是？A. var txt = new Array=George,John,ThomasB. var txt = new Array(1:George,2:John,3:Thomas)C. var txt = new Array(George,John,Thomas)D. var txt = new Array:1=(George)2=(John)3=(Thomas)16. 如何把 7.25 四舍五入为最接近的整数？A. round(7.25)B. rnd(7.25)C. Math.rnd(7.25)D. Math.round(7.25)17. 如何求得 2 和 4 中最大的数？A. Math.ceil(2,4)B. Math.max(2,4)C. ceil(2,4)D. top(2,4)18. 打开名为 window2 的新窗口的 JavaScript 语法是？A. open.new(,window2)B. new.window(,window2)C. new(,window2)D. window.open(,window2)19. 如何在浏览器的状态栏放入一条消息？A. statusbar = put your message hereB. window.status = put your message hereC. window.status(put your message here)D. status(put your message here)20. 如何获得客户端浏览器的名称？A. client.navNameB. navigator.appNameC. browser.name21. 建立JavaScript函数库的目的是（A）A 减少重复编程B 统一编程风格C 节省装载JavaScript函数的时间D 以上都是22. 使用JavaScript识别浏览器时，应尽量使用（B）。A 浏览器信息对象的方法B 浏览器功能识别的方法C 以上两者结合的方法23. 使用window.open制作弹出窗口时， 控制弹出窗口的位置（A）。A 可以B 不可以24. 使用JavaScript 控制事件冒泡（A）。A 可以B 不可以25. JavaScript函数window.setTimeout(countDown();,1000); 表示（D）。A 每隔1分种调用countDown函数B 每隔1秒种调用countDown函数C 1分种后调用countDown函数D 1秒种后调用countDown函数26. 当表单中的“提交”按钮被图片代替后，并且图片还具备“提交”按钮同样的功能，该如何编写这样的表单提交？（A） A. 在图片上添加onClick事件B. 在图片上添加onSubmit事件C. 在事件中手动提交D. 在事件中自动提交27. 能够返回键盘上的按键所对应字符的事件是（B） A. onKeyDownB. onKeyPress C. onKeyUp D. onMouseOver28. 要动态改变层中的内容可以使用下列哪些方法？（A） A. 利用层的innerHTML改变内容B. 利用层的innerText改变内容C. 可以通过设置层的隐藏和显示来实现D. 可以通过设置层的样式属性的display属性来实现29. 制作级联菜单功能时调用的是下拉列表框的（B）事件。A. onClickB. onChangeC. selectedD.onBlur60. 在JavaScript中Array对象拥有的方法不包括（B）A. sort()数组排序B. length()计算数组长度C. concat()数组合并D. reverse()数组元素反转30. 以下哪条语句会产生运行错误：（A）A. var obj = ( );B. var obj = ;C. var obj = ;D. var obj = / /;31. 以下哪个单词不属于javascript保留字：（B）A. withB. parentC. classD. void32. 请选择结果为真的表达式：（C）A. null instanceof ObjectB. null = undefinedC. null = undefinedD. NaN = NaN二、多选题33. 请选择对javascript理解有误的：(ABCD) A. JScript是javascript的简称 B. javascript是网景公司开发的一种Java脚本语言，其目的是为了简化Java的开发难度 C. FireFox和IE存在大量兼容性问题的主要原因在于他们对javascript的支持不同上 D. AJAX技术一定要使用javascript技术34. foo对象有att属性，那么获取att属性的值，以下哪些做法是可以的：（ACE） A. foo.att B. foo(“att”) C. foo“att” D. foo“att” E. foo“a”+”t”+”t”35. 在不指定特殊属性的情况下，哪几种HTML标签可以手动输入文本：（AB） A. B. C. D. 36. 以下哪些是javascript的全局函数：（ABC） A. escape B. parseFloat C. eval D. setTimeout E. alert37. 关于IFrame表述正确的有：(ABCD) A. 通过IFrame，网页可以嵌入其他网页内容，并可以动态更改 B. 在相同域名下，内嵌的IFrame可以获取外层网页的对象 C. 在相同域名下，外层网页脚本可以获取IFrame网页内的对象 D. 可以通过脚本调整IFrame的大小38. 关于表格表述正确的有：（ABCDE） A. 表格中可以包含TBODY元素 B. 表格中可以包含CAPTION元素 C. 表格中可以包含多个TBODY元素 D. 表格中可以包含COLGROUP元素 E. 表格中可以包含COL元素39. 关于IE的window对象表述正确的有：（ACD）A. window.opener属性本身就是指向window对象B. window.reload()方法可以用来刷新当前页面C. window.location=”a.html”和window.location.href=”a.html”的作用都是把当前页面替换成a.html页面D. 定义了全局变量g；可以用window.g的方式来存取该变量 三、程序题： 40. 如何获取表单域的选择部分的文本？参考答案： 1 2 3function _sel(obj)alert(显示文本： + obj.optionsobj.selectedIndex.text);alert(值： + obj.optionsobj.selectedIndex.value);41. 在JavaScript中定时调用函数 foo() 如何写？参考答案：function foo()alert(aaaa);a = setTimeout(foo(),100);foo();8：你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些？怎么会出现？解决方法是什么？点评：css的兼容性也是大家关注的热点。大家一定要注意多测试。Javascript 多浏览器兼容性问题及解决方案兼容性处理要点 1、DOCTYPE 影响 CSS 处理 2、FF: 设置 padding 后， div 会增加 height 和 width， 但 IE 不会， 故需要用 !important 多设一个 height 和 width 3、FF: 支持 !important， IE 则忽略， 可用 !important 为 FF 特别设置样式 4、div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行 5、在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法： divmargin:30px!important;margin:28px; 注意这两个margin的顺序一定不能写反，!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样： divmaring:30px;margin:28px 重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important; 浏览器差异 1、ul和ol列表缩进问题 消除ul、ol等列表的缩进时，样式应写成：list-style:none;margin:0px;padding:0px; 其中margin属性对IE有效，padding属性对FireFox有效。 注 经验证，在IE中，设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点，设置padding对样式没有影响；在 Firefox 中，设置margin:0px仅仅可以去除上下的空白，设置padding:0px后仅仅可以去掉左右缩进，还必须设置list- style:none才 能去除列表编号或圆点。也就是说，在IE中仅仅设置margin:0px即可达到最终效果，而在Firefox中必须同时设置margin:0px、 padding:0px以及list-style:none三项才能达到最终效果。 2、CSS透明问题 IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。 FF：opacity:0.6。 注 最好两个都写，并将opacity属性放在下面。 3、CSS圆角问题 IE：ie7以下版本不支持圆角。 FF： -moz-border-radius:4px，或者-moz-border-radius-topleft:4px;-moz- border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz- border- radius- bottomright:4px;。 注 圆角问题是CSS中的经典问题，建议使用JQuery框架集来设置圆角，让这些复杂的问题留给别人去想吧。不过jQuery的圆角只看到支持整个区域的圆角，没有支持边框的圆角，不过这个边框的圆角可以通过一些简单的手段来实现，下次有机会介绍下。 4、cursor:hand VS cursor:pointer 问题说明：firefox不支持hand，但ie支持pointer ，两者都是手形指示。 解决方法：统一使用pointer。 5、字体大小定义不同 对字体大小small的定义不同，Firefox中为13px，而IE中为16px，差别挺大。 解决方法：使用指定的字体大小如14px。 并列排列的多个元素（图片或者链接）的div和div之间，代码中的空格和回车在firefox中都会被忽略，而IE中却默认显示为空格（约3px）。 6、CSS双线凹凸边框 IE：border:2px outset;。 FF： -moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080; 浏览器bug 1、IE的双边距bug 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。 解决方案：在这个div里面加上display:inline; 例如： 相应的css为 以下为引用的内容： 复制代码代码如下:#IamFloat float:left; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/ #IamFloat float:left; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/ 关 于CSS中的问题实在太多了，甚至同样的CSS定义在不同的页面标准中的显示效果都是不一样的。一个合乎发展的建议是，页面采用标准XHTML标准编写， 较少使用table，CSS定义尽量依照标准DOM，同时兼顾IE、Firefox、Opera等主流浏览器。很多情况下，FF和 Opera的CSS解释标准更贴近CSS标准，也更具有规范性。 2、IE选择符空格BUG 今天在给博客的段落样式设置首字符样式的时候发现，原来一个空格也可以使样式失效。 请看以下代码： 复制代码代码如下: 对于世界而言，你是一个人；但是对于某个人，你是他的整个世界。纵然伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。 /code 复制代码代码如下: 对于世界而言，你是一个人；但是对于某个人，你是他的整个世界。纵然伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。 这 段代码对的首字符样式定义在IE6上看是没有效果的（IE7没测试），而在p:first-letter和font- size:300%加上空格，也就是p:first-letter font-size:300%后，显示就正常了。但是同样的代码，在FireFox下看是正常的。按道理说，p:first- letterfont-size:300%的写法是没错的。那么问题出在哪里呢？答案是伪类中的连字符”-”。IE有个BUG，在处理伪类时，如果伪 类的名称中带有连字符”-”，伪类名称后面就得跟一个空格，不然样式的定义就无效。而在FF中，加不加空格都可以正常处理。对css缩写的支持问题：不论是ie 还是ff对css的缩写都有一小点问题比如border: 0xp solid #fff;两个浏览器支持都没有问题但对于四个边的magin不同情况下，就不能用这种缩写了，无论是ie还是ff又会出现边界解释错误，而导致页面变形正确缩写：border-width:0px 1px 2px 3px;border-style:solid;border-color:#fff;第二点是ie对于css的magin padding 等默认值为0px，但ff却不一样，为了保持外观的统一性，即使padding为0你也要写上，以免ff在浏览中的错位。IE与Firefox的CSS兼容大全1.DOCTYPE 影响 CSS 处理2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width5.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式，值得注意的是，一定要将xxxx !important 这句放置在另一句之上6.div 的垂直居中问题: vertical-align:middle;将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行7.cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以8.FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。9.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：divmargin:30px!important;margin:28px;注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：divmaring:30px;margin:28px重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;10.IE5 和IE6的BOX解释不一致IE5下divwidth:300px;margin:0 10px 0 10px;div 的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以 300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改divwidth:300px!important;width :340px;margin:0 10px 0 10px关于这个是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持，如果有人理解的话，请告诉我一声，谢了！：）11.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义ulmargin:0;padding:0;就能解决大部分问题注意事项：1、float的div一定要闭合。例如：(其中floatA、floatB的属性已经设置为float:left;)这里的NOTfloatC并不希望继续平移，而是希望往下排。这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。在之间加上这个div一定要注意声明位置，一定要放在最恰当的地方，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。并且将clear这种样式定义为为如下即可：.clearclear:both;此外，为了让高度能自动适应，要在wrapper里面加上overflow:hidden;9.如何居中一个浮动元素?设置容器的浮动方式为相对定位然后确定容器的宽高 比如宽500 高 300 的层然后设置层的外边距DivWidth:500px ;height:300px; Margin: -150px 0 0 -250px;position: absolute;left:50%;top:50%;10.有没有关注HTML5和CSS3?如有请简单说一些您对它们的了解情况！在HTML 5平台上，视频，音频，图象，动画，以及同电脑的交互都被标准化。那么我们来看一下HTML5的技术概览有哪些： HTML5新增和移除的元素HTML5新增了很多多媒体和交互性元素如video, audio，在HTML4当中如果要嵌入一个视频或是音频的话需要引入一大段的代码，还有兼容各个浏览器，而HTML5只需要通过引入一个标签就可以，就像img标签一样方便。HTML5对表单的支持HTML5 提供了强大的控件类型如url, email, date, tel等，强大的约束属性，如required表示必填，文件上传的accept属性，以及一些表单重复元素模型的支持，HTML5在提交表单的时候还可 以设置提交的方式为XML提交方式，这样服务器端接收到的数据将是XML格式，HTML5的表单被定义为“Web Forms 2.0”，目前opera9.5+对Web Forms 2.0的支持较为完美。HTML5 DOM变化HTML5的Javascript APIsHTML5在Javascript上面新增了哪些API呢？Video/Audio: HTML5为Video和Audio提供了API来让开发者控制他们自己的用户界面，如可以播放或暂停媒体内容。CSS3CSS3对于我们Web开发者来说不只是新奇的技术，更重要的是这些全新概念的web应用给我们带来更多无限的可能性，也极大地提高了我们的开发效率。我们将不必再依赖图片或者Javascript 去完成圆角、多背景、用户自定义字体、3D动画、渐变、盒阴影、文字阴影、透明度等提高Web设计质量的特色应用。CSS3对于动画的支持CSS3 支持的动画类型有：transform(变换)、transition(过渡)和animation(动画)。你可以对特定的属性设置 transition，transiton和animation的区别不大，animation的动画是自己定义的，面向的更多的是脚本开发者，往往更加 复杂。11.你怎么来实现下面这个设计图,主要讲述思路 （效果图省略）13:如果让你来制作一个访问量很高的大型网站，你会如何来管理所有CSS文件、JS与图片？14：你对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？Javascript1：js是什么，js和html 的开发如何结合？2.怎样添加、移除、移动、复制、创建和查找节点3.怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别4.面向对象编程:b怎么继承a5.看看下面alert的结果是什么view sourceprint?1.function b(x, y, a) .arguments2 = 10; .alert(a); b(1, 2, 3);如果函数体改成下面，结果又会是什么？a = 10; alert(arguments2 );6.请编写一个JavaScript函数 parseQueryString，它的用途是把URL参数解析为一个对象var obj = parseQueryString(url); alert(obj.key0)/ 输出07.ajax是什么?ajax的交互模型? 同步和异步的区别? 如何解决跨域问题?ajax(动态网站静态化)伴随的goole 的推动，越来越多的站点开始使用了，在开大ajax(动态网站静态化)程序的时候会遇到很多的问题，主要有以下几个方面： 1.跨浏览器问题 2.历史后退状态问题 3.跨域问题 跨浏览器的问题因为现在有很多的开元的框架已经解决了，我们无需为此而烦恼。 历史后退状态问题我们可以使用一个数组来保存历史纪录，然后把这些数据村到历史对象中去，中的也可以解决，并且还有很多的开元框架给与支持，这样问题就不是很大。 跨域的问题就不是很好的解决，但是还是有办法的，一下给出一些基本的解决方案供大家选择： 1.使用代理，你可以使用web端的程序编写代理程序，把所有的ajax(动态网站静态化)请求的数据进行转发，web程序可以使php(做为现在的主流 开发语言)，jsp(SUN企业级应用的首选)，asp等所有的编程语言。相信大家对这种方式一定很熟悉，这里就不详细的介绍了。 2.使用iframe的方式来定势的刷新叶面，这种方式只是取得数据来显示，并不能真正的和求得的数据进行交互，转化成本页面的动态数据，不是很可取，应用也不是很多，我也忽略不去讨论了。 3.使用apache(Unix平台最流行的WEB服务器平台)的代理功能，主要就是apache(Unix平台最流行的WEB服务器平台)的方向代理， 或者是url从定向，你也可以把其他的站点直接的挂在自己的网站上，这样的方式可能会友邦权的问题，多的九部介绍了，有兴趣的本有可以自己实践以下。 4.使用script标签的方式，这样的话就可以保正使用真正的ajax(动态网站静态化)来跨域，并且可以使用返回来的数据，发誓很简单，在我们的后台程序处理后的到的结果都直接的用javascript 的方式返回，在我们的html中直接的使用返回数据的变量就可以了一个简单的例子 8.什么是闭包？下面这个ul，如何点击每一列的时候alert其index? 这是第一条这是第二条这是第三条 9.最近看的一篇Javas cript的文章是？10.常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件？pageSpeed .Yslow,Fiddler、fireBug11.说说YSlow(可以详细一点) 这个插件可以分析网站的页面，并告诉你为了提高网站性能，如何基于某些规则而进行优化。网页制作方向的题目1.什么是网站重构？div+css的布局较table布局有什么优点？2.如何理解css盒模型？3.平时做网页经常使用哪些hack?4.如何理解表现与内容相分离？5.如何解决ie6的双边距问题？6. 如何定义高度为1px的容器？heigh：1px; width:10px; background:#000; overflow:hiddenie6下这个问题是默认行高造成的，overflow:hidden|zoom:0.08|line- height:1px这样也可以解决7.如何实现一个层在浏览器中垂直左右居中？margin：auto8.如何解决ie6的3像素问题？_zoom:1;margin-left: value; _margin-left: value-3px;9.为什么FF下文本无法撑开容器的高度?如何解决？ 清楚浮动10. 怎么样才能让层显示在FLASH之上呢?解决的办法是给FLASH设置透明属性或者1、 答：把未采用CSS，大量使用HTML进行定位、布局，或者虽然已经采用CSS，但是未遵循HTML结构化标准的站点变成让标记回归标记的原本意 义。通过在HTML文档中使用结构化的标记以及用CSS控制页面表现，使页面的实际内容与它们呈现的格式相分离的站点。的过程就是网站重构网站为什么要进行重构（网站重构的好处）a、使页面加载得更快速；b、降低带宽带来的费用：节约成本；c、让你在修改设计时更有效率而代价更低；d、帮助你的整个站点保持视觉的一致性；e、更利于搜索引擎的检索（符合SEO的规范）；f、令站点更容易被各种浏览器和用户访问（包括手机、PDA和残障人士使用的文字浏览器）；g、兼容不容忽视的Mozilla系浏览器（Firefox份额）；h、提高你的职场竞争实力(事实上也就是降低失业的风险)。div+css的布局较table布局有什么优点:1、改版的时候更方便 只要改css文件。2、页面加载速度更快、结构化清晰、页面显示简洁。3、表现与结构相分离。4、易于优化（seo）搜索引擎更友好，排名更容易靠前。答：2.如何理解css盒模型 ：