百度web前端笔试面试题目
1. 更改元素的css style，设为display: none。此外还可以将visibility设为hidden，透明度设为0，或长、宽设为0。
2. 一个定宽网页在浏览器（IE6，IE7，Firefox，IE5）中横向居中对齐的布局，请写出主要的HTML标签及CSS。
1.
Strict//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
2.
3.
4.
5. 居中
6.
11.
12.
13.
居中
14.
15.
复制代码
3. CSS中margin和padding的区别
margin是外边距，属于元素之外，相邻元素的margin可以融合。 padding是内边距，在元素之内，相邻元素的padding不可融合。
4. JavaScript中如何检测一个变量是一个String类型？请写出函数实现
function(obj) {
return typeof(obj) == ”string”;
}
5. 网页中实现一个计算当年还剩多少时间的倒数计时程序，要求网页上实时动态显示“××年还剩××天××时××分××秒”
这个看我论坛右上角的就知道了…
6. 如何控制网页在网络传输过程中的数据量
题目貌似有问题，应该是减少数据量吧。
最显著的方法是启用GZIP压缩。此外保持好的编码习惯，避免重复和css、JavaScript代码，多余的HTML标签和属性。
7. 补充代码，是鼠标单击后Button1到Button2的后面
var parent = this.parentNode; parent.removeChild(this); parent.appendChild(this);
8. Linux中，将a、b打包为back.tar，命令是（ ）
不知道＝。＝
9. Flash、Ajax各自的优缺点，在使用中如何取舍？
Flash的缺点是需要客户端安装Flash插件，比较大，且更改了默认的HTML页面行为；但可以方便地实现很多特效及动画，且具有较高权限。
Ajax的缺点是编程较为复杂，需要服务器端的支持，能实现的效果只能是DOM API提供的，权限很低，较难跨域；但可以显著加快页面的载入速度和用户体验。
此外，二者都不能被搜索引擎索引（Google已支持Flash文本的索引），不利于SEO。
我的建议是重要和关键部分直接用HTML，交互部分可以使用Ajax，复杂的动画可采用Flash。
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
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
max = obj[key];
max_key = key;
}
}
alert("max:"+max+" max_key:"+max_key);
4，IE与FF脚本兼容性问题
(1) window.event：
表示当前的事件对象，IE有这个对象，FF没有，FF通过给事件处理函数传递事件对象
(2) 获取事件源
IE用e[“srcElement”] 获取事件源，而FF用e[“target“] 获取事件源
(3) 添加，去除事件
IE：element.attachEvent(“onclick”, function) element.detachEvent(“onclick”, function)
FF：element.addEventListener(“click”, function, true) element.removeEventListener(“click”, function, true)
(4) 获取标签的自定义属性
IE：div1.value或div1[“value”]
FF：可用div1.getAttribute(“value”)
(5) document.getElementsByName()和document.all[name]
IE；document.getElementsByName()和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就可以了。
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
获取outerHMTL
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.visibility= "visible ";
el.style.display = "none";//隐藏 el.style.visibility= "hidden ";
el是要操作的DOM元素
区别：visibility设置为 hidden 时，元素依然占有原来的位置
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)); //false
alert(IsString(str)); // true
alert(IsString(new String(str))); // true
14，网页中实现一个计算当年还剩多少时间的倒数计时程序，要求网页上实时动态显示“××年还剩××天××时××分××秒”
"http://www.w3.org/TR/html4/loose.dtd">
倒计时
15，补充代码，鼠标单击Button1后将Button1移动到Button2的后面
16，JavaScript有哪几种数据类型
简单：Number，Boolean，String，Null，Undefined
复合：Object，Array，Function
17，下面css标签在JavaScript中调用应如何拼写，border-left-color，-moz-viewport borderLeftColor
mozViewport
18，JavaScript中如何对一个对象进行深度clone
function cloneObject(o) {
if(!o || 'object' !== typeof o) {
return o;
}
var c = 'function' === typeof o.pop ? [] : {};
var p, v;
for(p in o) {
if(o.hasOwnProperty(p)) {
v = o[p];
if(v && 'object' === typeof v) {
c[p] = Ext.ux.clone(v);
}
else {
c[p] = v;
}
}
}
return c;
};
19，如何控制alert中的换行
\n alert(“p\np”);
20，请实现，鼠标点击页面中的任意标签，alert该标签的名称．（注意兼容性）
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
鼠标点击页面中的任意标签，alert该标签的名称
SPANDIV
SPAN
P
21，请编写一个JavaScript函数 parseQueryString，它的用途是把URL参数解析为一个对象，如：
var url = “http://witmax.cn/index.php?key0=0&key1=1&key2=2″;
function parseQueryString(url){
var params = {};
var arr = url.split("?");
if (arr.length
return params;
arr = arr[1].split("&");
for(var i=0, l=arr.length; i
var a = arr[i].split("=");
params[a[0]] = a[1];
}
return params;
}
var url = "http://witmax.cn/index.php?key0=0&key1=1&key2=2";
var ps = parseQueryString(url);
alert(ps["key1"]);
22，ajax是什么? ajax的交互模型? 同步和异步的区别? 如何解决跨域问题?
Ajax是多种技术组合起来的一种浏览器和服务器交互技术，基本思想是允许一个互联网浏览器向一个远程页面/服务做异步的http调用，并且用收到的数据来更新一个当前web页面而不必刷新整个页面。该技术能够改进客户端的体验。包含的技术：
XHTML：对应W3C的XHTML规范，目前是XHTML1.0。
CSS：对应W3C的CSS规范，目前是CSS2.0
DOM：这里的DOM主要是指HTML DOM，XML DOM包括在下面的XML中
JavaScript：对应于ECMA的ECMAScript规范
XML：对应W3C的XML DOM、XSLT、XPath等等规范
XMLHttpRequest：对应WhatWG的Web Applications1.0规范
（http://whatwg.org/specs/web-apps/current-work/）
AJAX交互模型
同步：脚本会停留并等待服务器发送回复然后再继续
异步：脚本允许页面继续其进程并处理可能的回复
跨域问题简单的理解就是因为JS同源策略的限制，a.com域名下的JS无法操作b.com或c.a.com下的对象，具体场景如下：
PS：（1）如果是端口或者协议造成的跨域问题前端是无能为力的
(2) 在跨域问题上，域仅仅通过URL的首部来识别而不会尝试判断相同的IP地址对应的域或者两个域是否对应一个IP
前端对于跨域的解决办法：
(1) document.domain+iframe
(2) 动态创建script标签
23，什么是闭包？下面这个ul，如何点击每一列的时候alert其index?
* 这是第一条
* 这是第二条
* 这是第三条
内部函数被定义它的函数的外部区域调用的时候就产生了闭包。
(function A() {
var index = 0;
var ul = document.getElementById("test");
var obj = {};
for (var i = 0, l = ul.childNodes.length; i
if (ul.childNodes[i].nodeName.toLowerCase() == "li") {
var li = ul.childNodes[i];
li.onclick = function() {
index++;
alert(index);
}
}
}
})();
24，请给出异步加载js方案，不少于两种
默认情况javascript是同步加载的，也就是javascript的加载时阻塞的，后面的元素要等待javascript加载完毕后才能进行再加载，对于一些意义不是很大的javascript，如果放在页头会导致加载很慢的话，是会严重影响用户体验的。
异步加载方式：
(1) defer，只支持IE
(2) async：
(3) 创建script，插入到DOM中，加载完毕后callBack，见代码：
function loadScript(url, callback){
var script = document.createElement("script")
script.type = "text/javascript";
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" ||
script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //Others: Firefox, Safari, Chrome, and Opera
script.onload = function(){
callback();
};
}
script.src = url;
document.body.appendChild(script);
}
25，请设计一套方案，用于确保页面中JS加载完全。
var n = document.createElement("script");
n.type = "text/javascript";
//以上省略部分代码
//ie支持script的readystatechange属性(IE support the readystatechange event for script and css nodes) if(ua.ie){
n.onreadystatechange = function(){
var rs = this.readyState;
if('loaded' === rs || 'complete'===rs){
n.onreadystatechange = null;
f(id,url); //回调函数
}
};
//省略部分代码
//safari 3.x supports the load event for script nodes(DOM2)
n.addEventListener('load',function(){
f(id,url);
});
//firefox and opera support onload(but not dom2 in ff) handlers for
//script nodes. opera, but no ff, support the onload event for link
//nodes.
}else{
n.onload = function(){
f(id,url);
};
}
26，js中如何定义class,如何扩展prototype?
Ele.className = “***”; //***在css中定义，形式如下：.*** {…}
A.prototype.B = C;
A是某个构造函数的名字
B是这个构造函数的属性
C是想要定义的属性的值
27，如何添加html元素的事件,有几种方法.
（1） 为HTML元素的事件属性赋值
（2） 在JS中使用ele.on*** = function() {…}
（3） 使用DOM2的添加事件的方法 addEventListener或attachEvent
28，documen.write和 innerHTML的区别
document.write只能重绘整个页面
innerHTML可以重绘页面的一部分
29，多浏览器检测通过什么？
（1） navigator.userAgent
（2） 不同浏览器的特性，如addEventListener
30，js的基础对象有那些, window和document的常用的方法和属性列出来
String,Number,Boolean
Window:
方法：setInterval,setTimeout,clearInterval,clearTimeout,alert,confirm,open
属性：name,parent,screenLeft,screenTop,self,top,status
Document
方法：
createElement,execCommand,getElementById,getElementsByName,getElementsByTagName,write,writeln 属性：cookie,doctype,domain,documentElement,readyState,URL,
31，前端开发的优化问题
（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布局慢
32，如何控制网页在网络传输过程中的数据量
启用GZIP压缩
保持良好的编程习惯，避免重复的CSS，JavaScript代码，多余的HTML标签和属性 33，Flash、Ajax各自的优缺点，在使用中如何取舍？
Ajax的优势
（1） 可搜索型
（2） 开放性
（3） 费用
（4） 易用性
（5） 易于开发
Flash的优势
（1） 多媒体处理
（2） 兼容性
（3） 矢量图形 比SVG，Canvas优势大很多
（4） 客户端资源调度，比如麦克风，摄像头
例子1：
例子2：
调用
编程篇
编写一个方法 求一个字符串的字节长度
new function(s){
if(!arguments.length||!s) return null;
if(""==s) return 0;
var l=0;
for(var i=0;i
if(s.charCodeAt(i)>255) l+=2; else l++;
}
alert(l);
}("hello world!");
如何控制alert中的换行
alert("hello\nworld");
解释document.getElementById("ElementID").style.fontSize="1.5em"
设置id为ElementID的元素的字体大小为1.5个相对单位
Em为相对长度单位。相对于当前对象内文本的字体尺寸。
如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
1em=16px
按照格式 xxxx年xx月xx日xx时xx分xx秒动态显示时间 要求不足10的补0
编写一个方法 去掉一个数组的重复元素
Array.prototype.strip=function(){
if(this.length
var arr=[];
for(var i=0;i
arr.push(this.splice(i--,1));//将本数组中第一个元素取出放入到数组arr中 for(var j=0;j
if(this[j]==arr[arr.length-1]){
this.splice(j--,1);//删除本数组中与数组arr中最后一个元素相同的元素 }
}
}
return arr;
}
var arr=["abc",85,"abc",85,8,8,1,2,5,4,7,8];
alert(arr.strip());
说出3条以上ff和ie的脚本兼容问题
IE有children，FF没有；
IE有parentElement，FF没有；
IE有 innerText,outerText,outerHTML，FF没有；
IE有数据岛，FF没有；
FF有
HTMLElement,HTMLDivElement,XMLDocument,DocumentFragment,Node,Event,Element 等等，IE没有； IE跟FF创建HttpRequest实例的方法不一样
DIV中border、margin和padding的区别和用法
边框属性(border)用来设定一个元素的边线
外边距属性(margin)是用来设置一个元素所占空间的边缘到相邻元素之间的距离
内边距属性(padding)是用来设置元素内容到元素边界的距离
为Array写一个indexof方法
Array.prototype.indexOf = function(e){
for(var i=0,j; j=this[i]; i++){
if(j==e){return i;}
}
return -1;
}
Array.prototype.lastIndexOf = function(e){
for(var i=this.length-1,j; j=this[i]; i--){
if(j==e){return i;}
}
return -1;
}
var arr=[1,2,3,4,5];
alert(arr.indexOf(5));
克隆
浅复制(影子克隆):只复制对象的基本类型,对象类型,仍属于原来的引用
深复制(深度克隆):不紧复制对象的基本类,同时也复制原对象中的对象.就是说完全是新对象产生的
Object.prototype.Clone = function(){
var objClone;
if( this.constructor == Object )
objClone = new this.constructor();
else
objClone = new this.constructor(this.valueOf());
for ( var key in this ){
if ( objClone[key] != this[key] ){
if ( typeof(this[key]) == 'object' ){
objClone[key] = this[key].Clone();
}else{
objClone[key] = this[key];
}
}
}
objClone.toString = this.toString;
objClone.valueOf = this.valueOf;
return objClone;
}
兼容 IE 和 FF 的换行 CSS 推荐样式
word-wrap:break-word; overflow:hidden;
word-wrap是控制换行的。使用break-word时，是将强制换行。中文没有任何问题，英文语句也没问题。但是对于长串的英文，就不起作用。
word-break是控制是否断词的。
normal是默认情况，英文单词不被拆开。
break-all，是断开单词。在单词到边界时，下个字母自动到下一行。主要解决了长串英文的问题。
keep-all，是指Chinese, Japanese, and Korean不断词。即只用此时，不用word-wrap，中文就不会换行了。（英文语句正常。）
手型Cursor的兼容IE和FF写法
cursor:pointer
元素的alt和title有什么异同？
alt作为图片的替代文字出现，title是图片的解释文字
图片存在
只有alt 图片的解释文字
只有title 图片的解释文字
两者都有 图片的解释文字
两者都没有 图片既没有替代文字，也没有解释文字
图片不存在
只有alt 图片既有替代文字，又有解释文字
只有title 图片没有替代文字，只有解释文字
两者都有 图片既有替代文字，又有解释文字
两者都没有 图片既没有替代文字，也没有解释文字
当然不同的浏览器处理方式也会不一样
border-color-left、marin-left、-moz-viewport改写成JavaScript格式
border-color-left:borderLeftColor
marin-left:marinLeft
-moz-viewport:MozViewport
用css、html编写一个两列布局的网页，要求右侧宽度为200px，左侧自动扩展。
CSS:
#right{
float:right;
width:200px;
}
#left{
marin-right:200px;
}
HTML:
…
…
Linux题目：批量删除当前目录下后缀名为.c的文件，如a.c、b.c
rm *.c
如何提高网页的运行速度
内容与形式分离，模块化开发，优化CSS
减少页面文档大小
尽量减少图片的使用或注意图片的大小，优化图片：格式、质量、图片长宽标志 减少响应的次数，用Ajax
网址后面加一个“/”