【www.zhuodaoren.com--专题】
第一篇:《Web前端开发笔试题集锦(已读)》
Web前端开发笔试题集锦
来源:过来人求职网 时间:2011-12-06
以下为Web前端开发笔试题集锦之Javascript篇，移步HTML/CSS篇
1, 判断字符串是否是这样组成的，第一个必须是字母，后面可以是字母、数字、下划线，总长度为5-20
var reg = /^[a-zA-Z][a-zA-Z_0-9]{4,19}$/;
reg.test("a1a__a1a__a1a__a1a__");
2，截取字符串abcdefg的efg
var str = "abcdefg";
if (/efg/.test(str)) {
var efg = str.substr(str.indexOf("efg"), 3);
alert(efg);
}
3，判断一个字符串中出现次数最多的字符，统计这个次数
//将字符串的字符保存在一个hash table中，key是字符，value是这个字符出现的次数
var str = "abcdefgaddda";
var obj = {};
for (var i = 0, l = str.length; i < l; i++) { var key = str[i];
if (!obj[key]) {
obj[key] = 1;
} else {
obj[key]++;
}
}
/*遍历这个hash table，获取value最大的key和value*/ var max = -1;
var max_key = "";
var key;
for (key in obj) {
if (max < obj[key]) {
max = obj[key];
max_key = key;
}
}
alert("max:"+max+" max_key:"+max_key);
4，IE与FF脚本兼容性问题
(1) window.event：
表示当前的事件对象，IE有这个对象，FF没有，FF通过给事件处理函数传递事件对象
(2) 获取事件源
IE用srcElement获取事件源，而FF用target获取事件源
(3) 添加，去除事件【HTML前端开发笔试题目及前端知识分享】
IE：element.attachEvent(“onclick”, function) element.detachEvent(“onclick”, function)【HTML前端开发笔试题目及前端知识分享】
FF：element.addEventListener(“click”, function, true) element.removeEventListener(“click”, function, true)
(4) 获取标签的自定义属性【HTML前端开发笔试题目及前端知识分享】
IE：div1.value或div1[“value”]
FF：可用div1.getAttribute(“value”)
(5) document.getElementByName()和document.all[name]
IE;document.getElementByName()和document.all[name]均不能获取div元素
FF：可以
(6) input.type的属性
IE：input.type只读
FF：input.type可读写
(7) innerText textContent outerHTML
IE：支持innerText, outerHTML
FF：支持textContent
(8) 是否可用id代替HTML元素
IE：可以用id来代替HTML元素
FF：不可以
这里只列出了常见的，还有不少，更多的介绍可以参看JavaScript在IE浏览器和Firefox浏览器中的差异总结
5，规避javascript多人开发函数重名问题
(1) 可以开发前规定命名规范，根据不同开发人员开发的功能在函数前加前缀
(2) 将每个开发人员的函数封装到类中，调用的时候就调用类的函数，即使函数重名只要类名不重复就ok
6，javascript面向对象中继承实现
javascript面向对象中的继承实现一般都使用到了构造函数和Prototype原型链，简单的代码如下：
function Animal(name) {
this.name = name;
}
Animal.prototype.getName = function() {alert(this.name)} function Dog() {};
Dog.prototype = new Animal("Buddy");
Dog.prototype.constructor = Dog;
var dog = new Dog();
7，FF下面实现outerHTML
FF不支持outerHTML，要实现outerHTML还需要特殊处理
思路如下：
在页面中添加一个新的元素A，克隆一份需要获取outerHTML的元素，将这个元素append到新的A中，然后获取A的innerHTML就可以了。 SPANDIV
SPAN
P
8，编写一个方法 求一个字符串的字节长度
假设：
一个英文字符占用一个字节，一个中文字符占用两个字节
function GetBytes(str){
var len = str.length;
var bytes = len;
for(var i=0; i
if (str.charCodeAt(i) > 255) bytes++;
}
return bytes;
}
alert(GetBytes("你好,as"));
9，编写一个方法 去掉一个数组的重复元素
var arr = [1 ,1 ,2, 3, 3, 2, 1];
Array.prototype.unique = function(){
var ret = [];
var o = {};
var len = this.length;
for (var i=0; i
var v = this[i];
if (!o[v]){
o[v] = 1;
ret.push(v);
}
}
return ret;
};
alert(arr.unique());
10，写出3个使用this的典型应用
(1)在html元素事件属性中使用，如
(2)构造函数
function Animal(name, color) {
this.name = name;
this.color = color;
}
(3)
(4)CSS expression表达式中使用this关键字
div element
12，如何显示/隐藏一个DOM元素?
el.style.display = "";
el.style.display = "none";
el是要操作的DOM元素
13，JavaScript中如何检测一个变量是一个String类型?请写出函数实现
String类型有两种生成方式：
(1)Var str = “hello world”;
(2)Var str2 = new String(“hello world”);
function IsString(str){
return (typeof str == "string" || str.constructor == String);
}
var str = "";
alert(IsString(1));
alert(IsString(str));
alert(IsString(new String(str)));
14，网页中实现一个计算当年还剩多少时间的倒数计时程序，要求网页上实时动态显示“××年还剩××天××时××分××秒”
15，补充代码，鼠标单击Button1后将Button1移动到Button2的后面
16，JavaScript有哪几种数据类型
简单：Number，Boolean，String，Null，Undefined
复合：Object，Array，Function
第二篇:《前端开发笔试题》
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
5、盒子模型概述
Css盒模型: margin、border、padding、content
盒子模型分为了w3c盒子和ie盒子,两者的区别在于w3c盒子的
width和height仅指content部分，没有包含padding和border部分，但是ie盒子模型的width和height包含padding和border部分
5.CSS引入的方式有哪些? link和@import的区别是?
内联 内嵌 外链 导入
区别 ：同时加载
前者无兼容性，后者CSS2.1以下浏览器不支持
Link 支持使用javascript改变样式，后者不可
6.css选择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个优先级高？
标签选择符、 类选择符、 id选择符
优先级顺序： Id>class>标签选择
后者优先级高
7、form中input是类型有哪些？
text:文本框【HTML前端开发笔试题目及前端知识分享】
password:密框码
radio:单选按钮
checkbox:复选框
file:文件选择域
hidden:隐藏域
button:按钮
reset:重置按钮
submit:表单提交按钮
image:图片按钮,类似submit可以为按钮添加图片
8、form中的input的redonly和disable区别
Readonly和Disabled是用在表单中的两个属性，它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别，总结如下：
Readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，包括select, radio, checkbox, button等。但是表单元素在使用了disabled后，当我们将表单以POST
或GET的方式提交的话，这个元素的值不会被传递出去，而readonly会将该值传递出去(这种情况出现在我们将某个表单中的textarea元素设置为disabled或readonly，但是submit button却是可以使用的)
9、你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么? Ie(Ie内核) 火狐（Gecko） 谷歌（webkit） opear(Presto)
10、写出几种IE6 BUG的解决方法
1.双边距BUG float引起的 使用display:inline
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、<img>标签上title与alt属性的区别是什么？
Alt 当图片不显示是 用文字代表。
Title 为该属性提供信息
12、描述css reset的作用和用途。
Reset重置浏览器的css默认属性 浏览器的品种不同，样式不同，然后重置，让他们统一
13、解释css sprites，如何使用。
Css 精灵把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求次数
14、你如何对网站的文件和资源进行优化？期待的解决方案包括： 文件合并、文件最小化/文件压缩、使用CDN托管、缓存的使用
15、什么是语义化的HTML？
直观的认识标签 对于搜索引擎的抓取有好处
16.清除浮动的几种方式，各自的优缺点
1.使用空标签清除浮动 clear:both（理论上能清楚任何标签，，，增加无意义的标签）
2.使用overflow:auto（空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE）
第三篇:《腾讯web前端开发笔试题及答案》
1 请实现，鼠标点击页面中的任意标签，alert该标签的名称．（注意兼容性） ?
1 <script type="text/javascript">
2 document.onclick=function(e){
3 var e=(e||event);
4 var o=e["target"]||e["srcElement"];
5 alert(o.tagName.toLowerCase());
6 }
7 </script>
2 请指出一下代码的性能问题，并经行优化。 ?
1 var info="腾讯拍拍网（）是腾讯旗下知名电子商务网站。"; 2 info +="拍拍网于2005年9月12日上线发布，";
3 info +="2006年3月13日宣布正式运营，";
4 info +="是目前国内第二大电子商务平台。";
5 info=info.split(",");
6 for(var i=0; i<info.length; i++)
7 {
8 alert(info[i]);
9 }
这题初看纯属折腾，因为后面要根据逗号分隔再alert每项，何不构造一个数组
对象来存放文本内容，而要用个临时变量info才存放。
如var info=["腾讯拍拍网（）是腾讯旗下知名电子商务网站。","拍拍网于2005年9月12日上线发布，","2006年3月13日宣布正式运营，","是目前国内第二大电子商务平台。"] 。可是后来想如果是优化的话这个题目
就出的没意义了。
仔细观察info这个变量，发现它每次都要自加字符串，如果字符串很大的又很
多的话会非常影响性能的。
对于js中的string类型，属于基本类型，因此一般情况下他们是存放在栈上的。
如果字符串很大，info会每次变成一个很长的字符串，会很慢。
如果用引用类型数组来存放则好很多，如： ?
1 var temp=[];
2 temp.push("腾讯拍拍网（）是腾讯
本文来源：http://www.zhuodaoren.com/shenghuo314866/
推荐访问:html5前端开发 前端开发面试题目