前端面试宝典(内容很多,也有很多重复)

文章转自:http://blog.csdn.net/liuwengai/article/details/52751565?locationNum=1&fps=1

二、JS基础

1、javascript的typeof返回哪些数据类型

Object number function boolean underfind

2、例举3种强制类型转换和2种隐式类型转换?

强制(parseInt,parseFloat,number)

隐式(== – ===)

3、split() join() 的区别

前者是切割成数组的形式,后者是将数组转换成字符串

4、数组方法pop() push() unshift() shift()

Push()尾部添加 pop()尾部删除

Unshift()头部添加 shift()头部删除

5、事件绑定和普通事件有什么区别

事件绑定是指把事件注册到具体的元素之上,普通事件指的是可以用来注册的事件

6、IE和DOM事件流的区别

1.执行顺序不一样、

2.参数不一样

3.事件加不加on

4.this指向问题

7、IE和标准下有哪些兼容性的写法

Var ev = ev || window.event

document.documentElement.clientWidth || document.body.clientWidth

Var target = ev.srcElement||ev.target

8、call和apply的区别

Object.call(this,obj1,obj2,obj3)

Object.apply(this,arguments)

9、b继承a的方法

10、JavaScript this指针、闭包、作用域

11、事件委托是什么

让利用事件冒泡的原理,让自己的所触发的事件,让他的父元素代替执行!

12、闭包是什么,有什么特性,对页面有什么影响

闭包就是能够读取其他函数内部变量的函数。

13、如何阻止事件冒泡和默认事件

canceBubble return false

14、添加 删除 替换 插入到某个接点的方法

obj.appendChidl()

obj.innersetBefore

obj.replaceChild

obj.removeChild

15、javascript的本地对象,内置对象和宿主对象

本地对象为array obj regexp等可以new实例化

内置对象为gload Math 等不可以实例化的

宿主为浏览器自带的document,window 等

16、document load 和document ready的区别

Document.onload 是在结构和样式加载完才执行js

Document.ready原生种没有这个方法,jQuery中有 $().ready(function)

17、”==”和“===”的不同

前者会自动转换类型

后者不会

18、javascript的同源策略

一段脚本只能读取来自于同一来源的窗口和文档的属性,这里的同一来源指的是主机名、议和端口号的组合

19、编写一个数组去重的方法

function oSort(arr) {   
var result ={};
var newArr=[];
for(var i=0;i if(!result[arr]) {
newArr.push(arr)
result[arr]=1
}
}
return newArr
}

20、JavaScript是一门什么样的语言,它有哪些特点?

没有标准答案。

21、JavaScript的数据类型都有什么?

基本数据类型:String,boolean,Number,Undefined, Null

引用数据类型:Object(Array,Date,RegExp,Function)

那么问题来了,如何判断某变量是否为数组数据类型?

方法一.判断其是否具有“数组性质”,如slice()方法。可自己给该变量定义slice方法,故有时会失效

方法二.obj instanceof Array 在某些IE版本中不正确

方法三.方法一二皆有漏洞,在ECMA Script5中定义了新方法Array.isArray(), 保证其兼容性,最好的方法如下:

 

 

 

 

 

 

if(typeof Array.isArray==="undefined"){

  Array.isArray = function(arg){

        return Object.prototype.toString.call(arg)==="[object Array]"

    }; 

}

22、已知ID的Input输入框,希望获取这个输入框的输入值,怎么做?(不使用第三方框架)

 

document.getElementById(“ID”).value

23、希望获取到页面中所有的checkbox怎么做?(不使用第三方框架)

 

 

 

 

 

 

 

 

var domList = document.getElementsByTagName(‘input’)

var checkBoxList = [];

var len = domList.length;  //缓存到局部变量

while (len--) {  //使用while的效率会比for循环更高

  if (domList[len].type == ‘checkbox’) {

      checkBoxList.push(domList[len]);

  }

}

24、设置一个已知ID的DIV的html内容为xxxx,字体颜色设置为黑色(不使用第三方框架)

 

 

 

var dom = document.getElementById(“ID”);

dom.innerHTML = “xxxx”

dom.style.color = “#000”

25、当一个DOM节点被点击时候,我们希望能够执行一个函数,应该怎么做?

直接在DOM里绑定事件:

在JS里通过onclick绑定:xxx.onclick = test

通过事件添加进行绑定:addEventListener(xxx, ‘click’, test)

那么问题来了,JavaScript的事件流模型都有什么?

“事件冒泡”:事件开始由最具体的元素接受,然后逐级向上传播

“事件捕捉”:事件由最不具体的节点先接收,然后逐级向下,一直到最具体的

“DOM事件流”:三个阶段:事件捕捉,目标阶段,事件冒泡

26、看下列代码输出为何?解释原因。

 

 

 

var a;

alert(typeof a); // undefined

alert(b); // 报错

解释:Undefined是一个只有一个值的数据类型,这个值就是“undefined”,在使用var声明变量但并未对其赋值进行初始化时,这个变量的值就是undefined。而b由于未声明将报错。注意未申明的变量和声明了未赋值的是不一样的。

27、看下列代码,输出什么?解释原因。

 

 

var a = null;

alert(typeof a); //object

解释:null是一个只有一个值的数据类型,这个值就是null。表示一个空指针对象,所以用typeof检测会返回”object”。

28、看下列代码,输出什么?解释原因。

 

 

 

 

 

 

 

 

 

var undefined;

undefined == null; // true

1 == true;   // true

2 == true;   // false

0 == false;  // true

0 == '';     // true

NaN == NaN;  // false

[] == false; // true

[] == ![];   // true

  • undefined与null相等,但不恒等(===)

一个是number一个是string时,会尝试将string转换为number

尝试将boolean转换为number,0或1

尝试将Object转换成number或string,取决于另外一个对比量的类型

所以,对于0、空字符串的判断,建议使用 “===” 。“===”会先判断两边的值类型,类型不匹配时为false。

那么问题来了,看下面的代码,输出什么,foo的值为什么?

 

 

 

var foo = "11"+2-"1";

console.log(foo);

console.log(typeof foo);

执行完后foo的值为111,foo的类型为number。

29、看代码给答案。

 

 

 

 

 

var a = new Object();

a.value = 1;

b = a;

b.value = 2;

alert(a.value);

答案:2(考察引用数据类型细节)

30、已知数组var stringArray = [“This”, “is”, “Baidu”, “Campus”],Alert出”This is Baidu Campus”。

答案:alert(stringArray.join(“”))

已知有字符串foo=”get-element-by-id”,写一个function将其转化成驼峰表示法”getElementById”。

 

 

 

 

 

 

 

 

function combo(msg){

    var arr=msg.split("-");

    for(var i=1;i

        arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1);

    }

    msg=arr.join("");

    return msg;

}

(考察基础API)

31、var numberArray = [3,6,2,4,1,5]; (考察基础API)

1) 实现对该数组的倒排,输出[5,1,4,2,6,3]

2) 实现对该数组的降序排列,输出[6,5,4,3,2,1]

 

 

 

 

 

 

 

 

function combo(msg){

    var arr=msg.split("-");

    for(var i=1;i

        arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1);

    }

    msg=arr.join("");

    return msg;

}

32、输出今天的日期,以YYYY-MM-DD的方式,比如今天是2014年9月26日,则输出2014-09-26

 

 

 

 

 

 

 

 

 

 

 

var d = new Date();

// 获取年,getFullYear()返回4位的数字

var year = d.getFullYear();

// 获取月,月份比较特殊,0是1月,11是12月

var month = d.getMonth() + 1;

// 变成两位

month = month < 10 ? '0' + month : month;

// 获取日

var day = d.getDate();

day = day < 10 ? '0' + day : day;

alert(year + '-' + month + '-' + day);

33、将字符串”{$id}{$name}”中的{$id}替换成10,{$name}替换成Tony (使用正则表达式)

答案:”{$id}{$id}_{$name}”.replace(/{\$id}/g, ’10′).replace(/{\$name}/g, ‘Tony’);

34、为了保证页面输出安全,我们经常需要对一些特殊的字符进行转义,请写一个函数escapeHtml,将<, >, &, “进行转义

 

function escapeHtml(str) {

return str.replace(/[<>”&]/g, function(match) {

    switch (match) {

     case “<”:

         return “<”;

     case “>”:

       return “>”;

     case “&”:

       return “&”;

     case “\””:

        return “"”;

    }

  });

}

35、foo = foo||bar ,这行代码是什么意思?为什么要这样写?

答案:if(!foo) foo = bar; //如果foo存在,值不变,否则把bar的值赋给foo。

短路表达式:作为”&&”和”||”操作符的操作数表达式,这些表达式在进行求值时,只要最终的结果已经可以确定是真或假,求值过程便告终止,这称之为短路求值。

36、看下列代码,将会输出什么?(变量声明提升)

 

 

 

 

 

 

var foo = 1;

function(){

    console.log(foo);

    var foo = 2;

    console.log(foo);

}

答案:输出undefined 和 2。上面代码相当于:

 

 

 

 

 

 

 

var foo = 1;

function(){

    var foo;

    console.log(foo); //undefined

    foo = 2;

    console.log(foo); // 2;  

}

函数声明与变量声明会被javascript引擎隐式地提升到当前作用域的顶部,但是只提升名称不会提升赋值部分。

37、用js实现随机选取10–100之间的10个数字,存入一个数组,并排序。

 

 

 

 

 

 

 

 

 

var iArray = [];

funtion getRandom(istart, iend){

        var iChoice = iend - istart +1;

        return Math.floor(Math.random() * iChoice + istart;

}

for(var i=0; i<10; i++){

        iArray.push(getRandom(10,100));

}

iArray.sort();

38、把两个数组合并,并删除第二个元素。

 

 

 

 

var array1 = ['a','b','c'];

var bArray = ['d','e','f'];

var cArray = array1.concat(bArray);

cArray.splice(1,1);

39、怎样添加、移除、移动、复制、创建和查找节点(原生JS,实在基础,没细写每一步)

1)创建新节点

createDocumentFragment()    //创建一个DOM片段

createElement()   //创建一个具体的元素

createTextNode()   //创建一个文本节点

2)添加、移除、替换、插入

appendChild()      //添加

removeChild()      //移除

replaceChild()      //替换

insertBefore()      //插入

3)查找

getElementsByTagName()    //通过标签名称

getElementsByName()     //通过元素的Name属性的值

getElementById()        //通过元素Id,唯一性

40、有这样一个URL:http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e,请写一段JS程序提取URL中的各个GET参数(参数名和参数个数不确定),将其按key-value形式返回到一个json结构中,如{a:’1′, b:’2′, c:”, d:’xxx’, e:undefined}。

答案:

 

 

 

 

 

 

 

 

 

function serilizeUrl(url) {

    var result = {};

    url = url.split("?")[1];

    var map = url.split("&");

    for(var i = 0, len = map.length; i < len; i++) {

        result

.split("=")[0]] = map[i].split("=")[1];

    }

    return result;

}

41、正则表达式构造函数var reg=new RegExp(“xxx”)与正则表达字面量var reg=//有什么不同?匹配邮箱的正则表达式?

答案:当使用RegExp()构造函数的时候,不仅需要转义引号(即\”表示”),并且还需要双反斜杠(即\\表示一个\)。使用正则表达字面量的效率更高。 

邮箱的正则匹配:

 

var regMail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;

24.看下面代码,给出输出结果。

 

 

 

 

 

for(var i=1;i<=3;i++){

  setTimeout(function(){

      console.log(i);   

  },0); 

};

答案:4 4 4。

原因:Javascript事件处理器在线程空闲之前不会运行。追问,如何让上述代码输出1 2 3?

 

 

 

 

 

 

 

 

for(var i=1;i<=3;i++){

   setTimeout((function(a){  //改成立即执行函数

       console.log(a);   

   })(i),0); 

};

1           //输出

2

3

42、写一个function,清除字符串前后的空格。(兼容所有浏览器)

使用自带接口trim(),考虑兼容性:

 

if (!String.prototype.trim) {

 String.prototype.trim = function() {

 return this.replace(/^\s+/, "").replace(/\s+$/,"");

 }

}

 // test the function

var str = " \t\n test string ".trim();

alert(str == "test string"); // alerts "true"

43、Javascript中callee和caller的作用?

caller是返回一个对函数的引用,该函数调用了当前函数;

callee是返回正在被执行的function函数,也就是所指定的function对象的正文。

那么问题来了?如果一对兔子每月生一对兔子;一对新生兔,从第二个月起就开始生兔子;假定每对兔子都是一雌一雄,试问一对兔子,第n个月能繁殖成多少对兔子?(使用callee完成)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

var result=[];

function fn(n){  //典型的斐波那契数列

   if(n==1){

        return 1;

   }else if(n==2){

           return 1;

   }else{

        if(result[n]){

                return result[n];

        }else{

                //argument.callee()表示fn()

                result[n]=arguments.callee(n-1)+arguments.callee(n-2);

                return result[n];

        }

   }

}

44、Javascript中, 以下哪条语句一定会产生运行错误?      答案(  B   )

A、   var _变量=NaN;B、var 0bj = [];C、var obj = //;  D、var obj = {};

45、以下两个变量a和b,a+b的哪个结果是NaN?      答案(   C  )

A、var a=undefind; b=NaN

B、var a=‘123’; b=NaN

C、var a =undefined , b =NaN

D、var a=NaN , b='undefined'

46、var a=10; b=20; c=4;  ++b+c+a++ 以下哪个结果是正确的?答案(  B  )

A、   34   B、35  C、36  D、37

47、下面的JavaScript语句中,( D )实现检索当前页面中的表单元素中的所有文本框,并将它们全部清空

A. for(vari=0;i< form1.elements.length;i++) {

if(form1.elements.type==”text”)

form1.elements.value=”";}

B. for(vari=0;i

if(forms[0].elements.type==”text”)

forms[0].elements.value=”";

}

C. if(document.form.elements.type==”text”)

form.elements.value=”";

D. for(vari=0;i

for(var j=0;j

if(document.forms.elements[j].type==”text”)

document.forms.elements[j].value=”";

}

}

48、要将页面的状态栏中显示“已经选中该文本框”,下列JavaScript语句正确的是( A )

A. window.status=”已经选中该文本框”

B. document.status=”已经选中该文本框”

C. window.screen=”已经选中该文本框”

D. document.screen=”已经选中该文本框”

49、以下哪条语句会产生运行错误:(A)

A.var obj = ();

B.var obj = [];

C.var obj = {};

D.var obj = //;

50、以下哪个单词不属于javascript保留字:(B)

A.with

B.parent

C.class

D.void

51、请选择结果为真的表达式:(C)

A.null instanceof Object

B.null === undefined

C.null == undefined

D.NaN == NaN

52、Javascript中, 如果已知HTML页面中的某标签对象的id=”username”,用____document.getElementById(‘username’)___ _方法获得该标签对象。

53、typeof运算符返回值中有一个跟javascript数据类型不一致,它是________”function”_________。

54、定义了一个变量,但没有为该变量赋值,如果alert该变量,javascript弹出的对话框中显示___undefined______ 。

55、分析代码,得出正确的结果。

var a=10, b=20 , c=30;

++a;

a++;

e=++a+(++b)+(c++)+a++;

alert(e);

弹出提示对话框:77

56、写出函数DateDemo的返回结果,系统时间假定为今天

function DateDemo(){

 var d, s="今天日期是:";

 d = new Date();

s += d.getMonth() + "/";

s += d.getDate() + "/";

s += d.getYear();

return s;}

结果:今天日期是:7/17/2010

57、写出程序运行的结果?

for(i=0, j=0; i<10, j<6; i++, j++){

k = i + j;}

结果:10

58、阅读以下代码,请分析出结果:

    var arr = new Array(1 ,3 ,5);

    arr[4]='z';

    arr2 = arr.reverse();

    arr3 = arr.concat(arr2);

    alert(arr3);

弹出提示对话框:z,,5,3,1,z,,5,3,1

59、补充按钮事件的函数,确认用户是否退出当前页面,确认之后关闭窗口;

60、写出简单描述html标签(不带属性的开始标签和结束标签)的正则表达式,并将以下字符串中的html标签去除掉

var str = “

这里是div

里面的段落

”;

//

varreg = /<\/?\w+\/?>/gi;

varstr = “

这里是div

里面的段落

”;

alert(str.replace(reg,”"));

61、完成foo()函数的内容,要求能够弹出对话框提示当前选中的是第几个单选框。

62、完成函数showImg(),要求能够动态根据下拉列表的选项变化,更新图片的显示


63、截取字符串abcdefg的efg

alert('abcdefg'.substring(4));

64、列举浏览器对象模型BOM里常用的至少4个对象,并列举window对象的常用方法至少5个

对象:Window document location screen history navigator

方法:Alert() confirm() prompt() open() close()

65、简述列举文档对象模型DOM里document的常用的查找访问节点的方法并做简单说明

Document.getElementById 根据元素id查找元素

Document.getElementByName 根据元素name查找元素

Document.getElementTagName 根据指定的元素名查找元素

66、希望获取到页面中所有的checkbox怎么做?(不使用第三方框架)

var domList = document.getElementsByTagName(‘input’)

var checkBoxList = [];

var len = domList.length;  //缓存到局部变量

while (len--) {  //使用while的效率会比for循环更高

  if (domList[len].type == ‘checkbox’) {

      checkBoxList.push(domList[len]);

  }

}

67、JavaScript的数据类型都有什么?

基本数据类型:String,Boolean,Number,Undefined,Null

引用数据类型:Object(Array,Date,RegEx p,Function)

68、javascript中有哪几种数据类型,分别写出中文和英文。

string boolean number null undefined object

字符串 布尔 数值 空值 未定义 对象

69、javascript中==和===的区别是什么?举例说明。

===会自动进行类型转换,==不会

70、简述创建函数的几种方式

第一种(函数声明):

function sum1(num1,num2){

   return num1+num2;

}

第二种(函数表达式):

var sum2 = function(num1,num2){

   return num1+num2;

}

第三种(函数对象方式):

var sum3 = new Function("num1","num2","return num1+num2");

71、Javascript如何实现继承?

原型链继承,借用构造函数继承,组合继承,寄生式继承,寄生组合继承

72、Javascript创建对象的几种方式?

工厂方式,构造函数方式,原型模式,混合构造函数原型模式,动态原型方式

73、把 Script 标签 放在页面的最底部的body封闭之前 和封闭之后有什么区别?浏览器会如何解析它们?

74、iframe的优缺点?

优点:

1. 解决加载缓慢的第三方内容如图标和广告等的加载问题

2. Security sandbox

3. 并行加载脚本

缺点:

1. iframe会阻塞主页面的Onload事件

2. 即时内容为空,加载也需要时间

3. 没有语意

75、请你谈谈Cookie的弊端?

缺点:

1.`Cookie`数量和长度的限制。每个domain最多只能有20条cookie,每个cookie长度不能超过4KB,否则会被截掉。

2.安全性问题。如果cookie被人拦截了,那人就可以取得所有的session信息。即使加密也与事无补,因为拦截者并不需要知道cookie的意义,他只要原样转发cookie就可以达到目的了。

3.有些状态不可能保存在客户端。例如,为了防止重复提交表单,我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端,那么它起不到任何作用。

76、DOM操作——怎样添加、移除、移动、复制、创建和查找节点。

1. 创建新节点

createDocumentFragment() // 创建一个DOM片段

createElement() // 创建一个具体的元素

createTextNode() // 创建一个文本节点

2. 添加、移除、替换、插入

appendChild()

removeChild()

replaceChild()

insertBefore() // 在已有的子节点前插入一个新的子节点

3. 查找

getElementsByTagName() // 通过标签名称

getElementsByName() // 通过元素的Name属性的值(IE容错能力较强,会得到一个数组,其中包括id等于name值的)

getElementById() // 通过元素Id,唯一性

77、js延迟加载的方式有哪些?

1. defer和async

2. 动态创建DOM方式(创建script,插入到DOM中,加载完毕后callBack)

3. 按需异步载入js

78、documen.write和 innerHTML 的区别?

document.write 只能重绘整个页面

innerHTML 可以重绘页面的一部分

79、哪些操作会造成内存泄漏?

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。

垃圾回收器定期扫描对象,并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0(没有其他对象引用过该对象),或对该对象的惟一引用是循环的,那么该对象的内存即可回收。

1. setTimeout 的第一个参数使用字符串而非函数的话,会引发内存泄漏。

2. 闭包

3. 控制台日志

4. 循环(在两个对象彼此引用且彼此保留时,就会产生一个循环)

80、javascript的typeof返回哪些数据类型?

答:object、 number、 function 、boolean、 underfind

81、split() join() 的区别

答:前者是切割成数组的形式,后者是将数组转换成字符串

82、数组方法pop() push() unshift() shift()各表示什么意思?

答:Push()尾部添加、pop()尾部删除、Unshift()头部添加、shift()头部删除

83、判断一个字符串中出现次数最多的字符,统计这个次数

答:var str = 'asdfssaaasasasasaa';
var json = {};
for (var i = 0; i < str.length; i++) {
        if(!json[str.charAt(i)]){
                json[str.charAt(i)] = 1;
        }else{
                json[str.charAt(i)]++;
        }
};
var iMax = 0;
var iIndex = '';
for(var i in json){
        if(json[i]>iMax){
                iMax = json[i];
                iIndex = i;
        }
}
alert('出现次数最多的是:'+iIndex+'出现'+iMax+'次');

84、javascript的typeof返回哪些数据类型

Object number function boolean underfind

85、例举3种强制类型转换和2种隐式类型转换?

强制(parseInt,parseFloat,number)

隐式(== – ===)

86、split() join() 的区别

前者是切割成数组的形式,后者是将数组转换成字符串

87、数组方法pop() push() unshift() shift()

Push()尾部添加 shift() 尾部删除

Unshift() 头部添加 shift() 头部删除

88、事件绑定和普通事件有什么区别

事件绑定和普通事件有什么区别

89、IE和DOM事件流的区别

1.执行顺序不一样、

2.参数不一样

3.事件加不加on

4.this指向问题

90、IE和标准下有哪些兼容性的写法

Var ev = ev || window.event

document.documentElement.clientWidth || document.body.clientWidth

Var target = ev.srcElement||ev.target

91、call和apply的区别

Object.call(this,obj1,obj2,obj3)

Object.apply(this,arguments)

92、b继承a的方法

93、写一个获取非行间样式的函数

function getStyle(obj,attr,value)

{

  if(!value)

  {

      if(obj.currentStyle)

      {

          return obj.currentStyle(attr);

      }

      else{

          obj.getComputedStyle(attr,false);

      }

  }       

  else

  {

      obj.style[attr] = value;

  }

}

94、事件委托是什么

让利用事件冒泡的原理,让自己的所触发的事件,让他的父元素代替执行!

http://www.webasily.com/?p=78 例子可见此链接

事件委托是什么

95、闭包是什么,有什么特性,对页面有什么影响

闭包就是能够读取其他函数内部变量的函数。

http://blog.csdn.NET/gaoshanwudi/article/details/7355794 此链接可查看(问这个问题的不是一个公司)

96、解释jsonp的原理,以及为什么不是真正的ajax

动态创建script标签,回调函数

Ajax是页面无刷新请求数据操作

97、javascript的本地对象,内置对象和宿主对象

本地对象为array obj regexp等可以new实例化

内置对象为gload Math 等不可以实例化的

宿主为浏览器自带的document,window 等

98、document load 和document ready的区别

Document.onload 是在结构和样式加载完才执行js

Document.ready原生种没有这个方法,jquery中有 $().ready(function)

99、字符串反转,如将 '12345678' 变成 '87654321'

 

//大牛做法;

//思路:先将字符串转换为数组 split(),利用数组的反序函数 reverse()颠倒数组,再利用 jion() 转换为字符串

var str = '12345678';

str = str.split('').reverse().join('');

100、将数字 12345678 转化成 RMB形式 如: 12,345,678 

 

//个人方法;

//思路:先将数字转为字符, str= str + '' ;

//利用反转函数,每三位字符加一个 ','最后一位不加; re()是自定义的反转函数,最后再反转回去!

for(var i = 1; i <= re(str).length; i++){

    tmp += re(str)[i - 1];

    if(i % 3 == 0 && i != re(str).length){

        tmp += ',';

    }

}

101、生成5个不同的随机数;

 

//思路:5个不同的数,每生成一次就和前面的所有数字相比较,如果有相同的,则放弃当前生成的数字!

var num1 = [];

for(var i = 0; i < 5; i++){

    num1[i] = Math.floor(Math.random()*10) + 1; //范围是 [1, 10]

    for(var j = 0; j < i; j++){

        if(num1[i] == num1[j]){

            i--;

        }

    }

}

102、去掉数组中重复的数字 方法一;

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

//思路:每遍历一次就和之前的所有做比较,不相等则放入新的数组中!

//这里用的原型 个人做法;

Array.prototype.unique = function(){

    var len = this.length,

        newArr = [],

        flag = 1;

    for(var i = 0; i < len; i++, flag = 1){

        for(var j = 0; j < i; j++){

            if(this[i] == this[j]){

                flag = 0;        //找到相同的数字后,不执行添加数据

            }

        }

        flag ? newArr.push(this[i]) : '';

    }

    return newArr;

}

    方法二:

 

(function(arr){

    var len = arr.length,

        newArr = [], 

        flag;

    for(var i = 0; i < len; i+=1, flag = 1){

        for(var j = 0; j < i; j++){

            if(arr[i] == arr[j]){

                flag = 0;

            }  

        }

        flag?newArr.push(arr[i]):'';

    }

    alert(newArr);

})([1, 1, 22, 3, 4, 55, 66]);

 

103、阶乘函数;

 

//原型方法

Number.prototype.N = function(){

    var re = 1;

    for(var i = 1; i <= this; i++){

        re *= i;

    }

    return re;

}

var num = 5;

alert(num.N());

104、window.location.search() 返回的是什么?

    答:查询(参数)部分。除了给动态语言赋值以外,我们同样可以给静态页面,并使用javascript来获得相信应的参数值

        返回值:?ver=1.0&id=timlq 也就是问号后面的!

105、window.location.hash 返回的是什么?

    答:锚点 , 返回值:#love ;

106、window.location.reload() 作用?

    答:刷新当前页面。

107、阻止冒泡函数

 

function stopPropagation(e) {  

    e = e || window.event;  

    if(e.stopPropagation) { //W3C阻止冒泡方法  

        e.stopPropagation();  

    } else {  

        e.cancelBubble = true; //IE阻止冒泡方法  

    }  

}  

document.getElementById('need_hide').onclick = function(e) {  

    stopPropagation(e);  

}

108、什么是闭包? 写一个简单的闭包?;

    答:我的理解是,闭包就是能够读取其他函数内部变量的函数。在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。

 

function outer(){

    var num = 1;

    function inner(){

        var n = 2;

        alert(n + num);

    }

    return inner;

}

outer()();

109、javascript 中的垃圾回收机制?

    答:在Javascript中,如果一个对象不再被引用,那么这个对象就会被GC回收。如果两个对象互相引用,而不再  被第3者所引用,那么这两个互相引用的对象也会被回收。因为函数a被b引用,b又被a外的c引用,这就是为什么  函数a执行后不会被回收的原因。

110、看题做答:

 

function f1(){

    var tmp = 1;

    this.x = 3;

    console.log(tmp);    //A

    console.log(this.x);     //B

}

var obj = new f1(); //1

console.log(obj.x)     //2

console.log(f1());        //3

    分析:    

        这道题让我重新认识了对象和函数,首先看代码(1),这里实例话化了 f1这个类。相当于执行了 f1函数。所以这个时候 A 会输出 1, 而 B 这个时候的 this 代表的是 实例化的当前对象 obj B 输出 3.。 代码(2)毋庸置疑会输出 3, 重点 代码(3)首先这里将不再是一个类,它只是一个函数。那么 A输出 1, B呢?这里的this 代表的其实就是window对象,那么this.x 就是一个全局变量 相当于在外部 的一个全局变量。所以 B 输出 3。最后代码由于f没有返回值那么一个函数如果没返回值的话,将会返回 underfined ,所以答案就是 : 1, 3, 3, 1, 3, underfined 。

111、下面输出多少?

 

var o1 = new Object();

var o2 = o1;

o2.name = "CSSer";

console.log(o1.name);

  如果不看答案,你回答真确了的话,那么说明你对javascript的数据类型了解的还是比较清楚了。js中有两种数据类型,分别是:基本数据类型和引用数据类型(object Array)。对于保存基本类型值的变量,变量是按值访问的,因为我们操作的是变量实际保存的值。对于保存引用类型值的变量,变量是按引用访问的,我们操作的是变量值所引用(指向)的对象。答案就清楚了:  //CSSer;

112、再来一个

 

function changeObjectProperty (o) {

    o.siteUrl = "http://www.csser.com/";

    o = new Object();

    o.siteUrl = "http://www.popcg.com/";

}

var CSSer = new Object();

changeObjectProperty(CSSer);

console.log(CSSer.siteUrl); //

    如果CSSer参数是按引用传递的,那么结果应该是"http://www.popcg.com/",但实际结果却仍是"http://www.csser.com/"。事实是这样的:在函数内部修改了引用类型值的参数,该参数值的原始引用保持不变。我们可以把参数想象成局部变量,当参数被重写时,这个变量引用的就是一个局部变量,局部变量的生存期仅限于函数执行的过程中,函数执行完毕,局部变量即被销毁以释放内存。    

    (补充:内部环境可以通过作用域链访问所有的外部环境中的变量对象,但外部环境无法访问内部环境。每个环境都可以向上搜索作用域链,以查询变量和函数名,反之向下则不能。)

113、输出多少?

 

var a = 6;

setTimeout(function () {    

    var a = 666;

    alert(a);      // 输出666,

}, 1000);

a = 66;

因为var a = 666;定义了局部变量a,并且赋值为666,根据变量作用域链,
全局变量处在作用域末端,优先访问了局部变量,从而覆盖了全局变量 。

 

var a = 6;

setTimeout(function () {    

    alert(a);      // 输出undefined 

    var a = 666;

}, 1000);

a = 66;

因为var a = 666;定义了局部变量a,同样覆盖了全局变量,但是在alert(a);之前
a并未赋值,所以输出undefined。

 

var a = 6; 

setTimeout(function(){

    alert(a);

    var a = 66; 

}, 1000);

a = 666; 

alert(a); 

// 666, undefined;

记住: 异步处理,一切OK 声明提前

114、输出多少?

 

function setN(obj){

    obj.name='屌丝';

    obj = new Object(); 

    obj.name = '腐女';

};

var per = new Object();

setN(per);

alert(per.name);  //屌丝 内部

115、JS的继承性

 

window.color = 'red';

var o = {color: 'blue'};

function sayColor(){

    alert(this.color);

}

sayColor(); //red

sayColor.call(this); //red this-window对象

sayColor.call(window); //red

sayColor.call(o); //blue

116、精度问题: JS 精度不能精确到 0.1 所以  。。。。同时存在于值和差值中

 

var n = 0.3,m = 0.2, i = 0.2, j = 0.1;

alert((n - m) == (i - j)); //false

alert((n-m) == 0.1); //false

alert((i-j)==0.1); //true

117、加减运算

 

alert('5'+3); //53 string

alert('5'+'3'); //53 string

alert('5'-3); //2 number

alert('5'-'3'); //2 number

118、什么是同源策略?

    指: 同协议、端口、域名的安全策略,由王景公司提出来的安全协议!

119、call和applay的区别是什么?

    参数形式不同,call(obj, pra, pra)后面是单个参数。applay(obj, [args])后面是数组。

120、为什么不能定义1px左右的div容器?   

IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:

overflow:hidden | zoom:0.08 | line-height:1px

121、结果是什么?

 

function foo(){

    foo.a = function(){alert(1)}; 

    this.a = function(){alert(2)};

    a = function(){alert(3)};

    var a = function(){alert(4)};

}; 

foo.prototype.a = function(){alert(5)};

foo.a = function(){alert(6)};

foo.a(); //6

var obj = new foo();

obj.a(); //2

foo.a(); //1

122、输出结果

 

var a = 5; 

function test(){

    a = 0; 

    alert(a); 

    alert(this.a); //没有定义 a这个属性

    var a; 

    alert(a)

}

test(); // 0, 5, 0

new test(); // 0, undefined, 0 //由于类它自身没有属性a, 所以是undefined

123、计算字符串字节数:

 

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+=1;  //charCodeAt()得到的是unCode码   

     }     //汉字的unCode码大于 255bit 就是两个字节

     alert(l); 

}("hello world!");

124、结果是:

 

var bool = !!2; alert(bool);//true;

双向非操作可以把字符串和数字转换为布尔值。

125、声明对象,添加属性,输出属性

 

    var obj = {

        name: 'leipeng',

        showName: function(){

            alert(this.name);

        }

    }

obj.showName();

126、匹配输入的字符:第一个必须是字母或下划线开头,长度5-20

 

var reg = /^[a-zA-Z][a-zA-Z0-9_]{5,20}/,

            name1 = 'leipeng',

            name2 = '0leipeng',

            name3 = '你好leipeng',

            name4 = 'hi';

     

        alert(reg.test(name1));

        alert(reg.test(name2));

        alert(reg.test(name3));

        alert(reg.test(name4));

127、检测变量类型

 

function checkStr(str){

        typeof str == 'string'? alert('true'):alert('false');

    }

    checkStr('leipeng');

128、如何在HTML中添加事件,几种方法?

    1、标签之中直接添加 οnclick="fun()";

    2、JS添加 Eobj.onclick = method;

    3、现代事件  IE: obj.attachEvent('onclick', method);

                   FF: obj.addEventListener('click', method, false);

129、BOM对象有哪些,列举window对象?

    1、window对象 ,是JS的最顶层对象,其他的BOM对象都是window对象的属性;

    2、document对象,文档对象;

    3、location对象,浏览器当前URL信息;

    4、navigator对象,浏览器本身信息;

    5、screen对象,客户端屏幕信息;

    6、history对象,浏览器访问历史信息;

130、请问代码实现 outerHTML

    //说明:outerHTML其实就是innerHTML再加上本身;

 

Object.prototype.outerHTML = function(){

        var innerCon = this.innerHTML, //获得里面的内容

            outerCon = this.appendChild(innerCon); //添加到里面

        alert(outerCon); 

    }

    演示代码:

     

 

 

  

    

    Document

  

  

    

       hello

    

  

 

 

131、JS中的简单继承 call方法!

 

//顶一个父母类,注意:类名都是首字母大写的哦!

  function Parent(name, money){

            this.name = name;

            this.money = money;

            this.info = function(){

                alert('姓名: '+this.name+' 钱: '+ this.money);

            }

        }

        //定义孩子类

        function Children(name){

            Parent.call(this, name); //继承 姓名属性,不要钱。  

            this.info = function(){

                alert('姓名: '+this.name);

            }

        }

        //实例化类

        var per = new Parent('parent', 800000000000);

        var chi = new Children('child');

        per.info();

        chi.info();

132、bind(), live(), delegate()的区别

    bind: 绑定事件,对新添加的事件不起作用,方法用于将一个处理程序附加到每个匹配元素的事件上并返回jQuery对象。

    live: 方法将一个事件处理程序附加到与当前选择器匹配的所有元素(包含现有的或将来添加的)的指定事件上并返回jQuery对象。

    delegate: 方法基于一组特定的根元素将处理程序附加到匹配选择器的所有元素(现有的或将来的)的一个或多个事件上。

133、typeof 的返回类型有哪些?   

 

    alert(typeof [1, 2]); //object

    alert(typeof 'leipeng'); //string

    var i = true; 

    alert(typeof i); //boolean

    alert(typeof 1); //number

    var a; 

    alert(typeof a); //undefined

    function a(){;};

    alert(typeof a) //function

134、简述link和import的区别?

区别1:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。

区别2:link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。

区别3:link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。

区别4:link支持使用Javascript控制DOM去改变样式;而@import不支持。

135、window.onload 和 document.ready的区别?

load要等到图片和包含的文件都加在进来之后执行;

ready是不包含图片和非文字文件的文档结构准备好就执行;

136、 解析URL成一个对象?

            String.prototype.urlQueryString = function(){

                var url = this.split('?')[1].split('&'),

                    len = url.length;

         

                this.url = {};

                for(var i = 0; i < len; i += 1){

                    var cell = url[i].split('='),    

                        key = cell[0],

                        val = cell[1];

                    this.url[''+key+''] = val;

                } 

                return this.url;

            }

            var url = '?name=12&age=23';

            console.log(url.urlQueryString().age);

137、看下列代码输出什么?

var foo = "11"+2-"1";

console.log(foo);

console.log(typeof foo);
执行完后foo的值为111,foo的类型为Number。

138、看下列代码,输出什么?

var a = new Object();
a.value = 1;
b = a;
b.value = 2;
alert(a.value);
执行完后输出结果为2

139、已知数组var stringArray = ["This”, "is”, "Baidu”, "Campus”],Alert出”This is Baidu Campus”。

答案:alert(stringArray.join(""))

140、已知有字符串foo="get-element-by-id",写一个function将其转化成驼峰表示法"getElementById"。

答案:function combo(msg){

  var arr = msg.split("-");

  var len = arr.length;  //将arr.length存储在一个局部变量可以提高for循环效率

  for(var i=1;i

    arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1);

  }

  msg=arr.join("");

  return msg;

}

141、怎样添加、移除、移动、复制、创建和查找节点

  1)创建新节点

createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点

2)添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入

3)查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id,唯一性

142、原生JS的window.onload与Jquery的$(document).ready(function(){})有什么不同?

  window.onload()方法是必须等到页面内包括图片的所有元素加载完毕后才能执行。

$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。 

 

143、你如何优化自己的代码?

代码重用

避免全局变量(命名空间,封闭空间,模块化mvc..)

拆分函数避免函数过于臃肿

注释

144、请描述出下列代码运行的结果

function d(){

        console.log(this);

}

d();

145、需要将变量e的值修改为“a+b+c+d”,请写出对应的代码

var e=”abcd”;

设计一段代码能够遍历下列整个DOM节点

146、怎样实现两栏等高?

147、使用js实现这样的效果:在文本域里输入文字时,当按下enter键时不换行,而是替换成“{{enter}}”,(只需要考虑在行尾按下enter键的情况).

148、以下代码中end字符串什么时候输出

var t=true;

setTimeout(function(){

    console.log(123);

    t=false;

    },1000);

while(t){}

console.log(‘end’);

149、specify(‘hello,world’)//=>’h,e,l,l,o,w,o,r,l,d’实现specify函数

150、请将一个URL的search部分参数与值转换成一个json对象

151、请用原生js实现jquery的get\post功能,以及跨域情况下

152、请简要描述web前端性能需要考虑哪方面,你的优化思路是什么?

153、简述readyonly与disabled的区别

154、判断一个字符吕串出现次数最多的字符,统计这个次数并输出

155、编写一个方法,去掉一个数组的复重元素

156、写出3个使用this的典型应用

157、请尽可能详尽的解释ajax的工作原理

158、为什么扩展javascript内置对象不是好的做法?

159、请解释一下javascript的同源策略

160、什么是三元表达式?“三元”表示什么意思?

161、浏览器标准模式和怪异模式之间的区别是什么?

162、如果设计中使用了非标准的字体,你该如何去实现?

163、用css分别实现某个div元素上下居中和左右居中

164、modulo(12,5)//2  实现满足这个结果的modulo函数

165、HTTP协议中,GET和POST有什么区别?分别适用什么场景 ?

166、HTTP状态消息200 302 304 403 404 500分别表示什么

167、HTTP协议中,header信息里面,怎么控制页面失效时间(last-modified,cache-control,Expires分别代表什么)

168、HTTP雷锋议目前常用的有哪几个?KEEPALIVE从哪个版本开始出现的?

169、业界常用的优化WEB页面加载速度的方法(可以分别从页面元素展现,请求连接,css,js,服务器等方面介绍)

170、列举常用的web页面开发,调试以及优化工具

171、解释什么是sql注入,xss漏洞

172、如何判断一个js变量是数组类型

173、请列举js数组类型中的常用方法

174、FF与IE中如何阻止事件冒泡,如何获取事件对象,以及如何获取触发事件的元素

175、列举常用的js框架以及分别适用的领域

176、js中如何实现一个map

177、js可否实现面向对象编程,如果可以如何实现js对象的继承

178、约瑟夫环—已知n个人(以编号1,2,3…分别表示)围坐在一张圆桌周围。从编号为k的人开始报数,数到m的那个人出列;他的下一个人又从1开始报数,数到m的那个人又出列;依此规律重复下去,直到圆桌周围的人全部出列。

179、有1到10w这个10w个数,去除2个并打乱次序,如何找出那两个数?

180、如何获取对象a拥有的所有属性(可枚举的、不可枚举的,不包括继承来的属性)

181、有下面这样一段HTML结构,使用css实现这样的效果:

左边容器无论宽度如何变动,右边容器都能自适应填满父容器剩余的宽度。

182、下面这段代码想要循环昝输出结果01234,请问输出结果是否正确,如果不正确,请说明为什么,并修改循环内的代码使其输出正确结果

for(var i=0;i<5;++i){

    setTimeout(function(){

            console.log(i+’’);

        },100*i);

}

183、解释下这个css选择器什么发生什么?

[role=nav]>ul a:not([href^-mailto]){}

184、JavaScript以下哪条语句会产生运行错误         

A. var obj = ();    B. var obj = [];    C. var obj = {};    D. var obj = //;

答案:AD

185、以下哪些是javascript的全局函数:(ABC)

A. escape   函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串。ECMAScript v3 反对使用该方法,应用使用 decodeURI() 和 decodeURIComponent() 替代它。

B. parseFloat   parseFloat() 函数可解析一个字符串,并返回一个浮点数。

该函数指定字符串中的首个字符是否是数字。如果是,则对字符串进行解析,直到到达数字的末端为止,然后以数字返回该数字,而不是作为字符串。

C. eval 函数可计算某个字符串,并执行其中的的 JavaScript 代码。

D. setTimeout

E. alert

186、关于IE的window对象表述正确的有:(ACD)

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

B. window.reload()方法可以用来刷新当前页面  应该是location.reload或者window.location.reload

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

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

187、描述错误的是

A:Http状态码302表示暂时性转移 对

B:domContentLoaded事件早于onload事件  onload 事件会在页面或图像加载完成后立即发生。

C: IE678不支持事件捕获 

D:localStorage 存储的数据在电脑重启后丢失     没有时间限制

try...catch 语句。(在 IE5+、Mozilla 1.0、和 Netscape 6 中可用)

188、关于link和@import的区别正确的是  A

A: link属于XHTML标签,而@import是CSS提供的;

B:页面被加载时,link会同时被加载,而后者引用的CSS会等到页面被加载完再加载

C:import只在IE5以上才能识别 而link是XHTML标签,无兼容问题

D: link方式的样式的权重高于@import的权重

189、下面正确的是  A

A: 跨域问题能通过JsonP方案解决 B:不同子域名间仅能通过修改window.name解决跨域   还可以通过script标签src  jsonp等h5 Java split等

C:只有在IE中可通过iframe嵌套跨域 D:MediaQuery属性是进行视频格式检测的属性是做响应式的

188、错误的是

A: Ajax本质是XMLHttpRequest       

B: 块元素实际占用的宽度与它的width、border、padding属性有关,与background无关

C: position属性absolute、fixed、---relative---会使文档脱标

D:  float属性left也会使div脱标

189、不用任何插件,如何实现一个tab栏切换?

190、基本数据类型的专业术语以及单词拼写

191、变量的命名规范以及命名推荐

192、三种弹窗的单词以及三种弹窗的功能

193、console.log( 8 | 1 ); 输出值是多少?

答案:9

194、只允许使用 + - * / 和 Math.* ,求一个函数 y = f(x, a, b);当x > 100 时返回 a 的值,否则返回 b 的值,不能使用 if else 等条件语句,也不能使用|,?:,数组。

答案:

function f(x, a, b) {

    var temp = Math.ceil(Math.min(Math.max(x - 100, 0), 1));

    return a * temp + b * (1 - temp);

}

console.log(f(-10, 1, 2));

195、JavaScriptalert(0.4*0.2);结果是多少?和你预期的一样吗?如果不一样该如何处理?

    有误差,应该比准确结果偏大。 一般我会将小数变为整数来处理。当前之前遇到这个问题时也上网查询发现有人用try catch return写了一个函数,

    当然原理也是一致先转为整数再计算。看起来挺麻烦的,我没用过。

196、一个div,有几种方式得到这个div的jQuery对象?
想直接获取这个div的dom对象,如何获取?dom对象如何转化为jQuery对象?

197、主流浏览器内核

IE trident  火狐gecko   谷歌苹果webkit  Opera:Presto

198、如何显示/隐藏一个dom元素?请用原生的JavaScript方法实现

199、JavaScript有哪几种数据类型

    Number String Boolean Null Undefined Object

200、jQuery框架中$.ajax()的常用参数有哪些?写一个post请求并带有发送数据和返回数据的样例

201、JavaScript数组元素添加、删除、排序等方法有哪些?

Array.concat( ) 连接数组

Array.join( ) 将数组元素连接起来以构建一个字符串

Array.length 数组的大小

Array.pop( ) 删除并返回数组的最后一个元素

Array.push( ) 给数组添加元素

Array.reverse( ) 颠倒数组中元素的顺序

Array.shift( ) 将元素移出数组

Array.slice( ) 返回数组的一部分

Array.sort( ) 对数组元素进行排序

Array.splice( ) 插入、删除或替换数组的元素

Array.toLocaleString( ) 把数组转换成局部字符串

Array.toString( ) 将数组转换成一个字符串

Array.unshift( ) 在数组头部插入一个元素

202、如何添加html元素的事件,有几种方法?请列举

直接在标签里添加;在元素上添加、使用事件注册函数添加

203、JavaScript的循环语句有哪些?

while  for  do while  forEach

204、作用域-编译期执行期以及全局局部作用域问题

理解js执行主要的两个阶段:预解析和执行期

205、闭包:下面这个ul,如何点击每一列的时候alert其index?

  • 这是第一条
  • 这是第二条
  • 这是第三条

206、列出3条以上ff和IE的脚本兼容问题

1、在IE下可通过document.frames["id"];得到该IFRAME对象,

而在火狐下则是通过document.getElementById("content_panel_if").contentWindow;

2、IE的写法: _tbody=_table.childNodes[0]

在FF中,firefox会在子节点中包含空白则第一个子节点为空白"", 而ie不会返回空白

可以通过if("" != node.nodeName)过滤掉空白子对象

3、模拟点击事件

if(document.all){  //ie下

    document.getElementById("a3").click();  

}

else{  //非IE

    var evt = document.createEvent("MouseEvents"); 

    evt.initEvent("click", true, true); 

    document.getElementById("a3").dispatchEvent(evt); 

4、事件注册

if (isIE){window.attachEvent("onload", init);}else{window.addEventListener("load", init, false);}

207、列举可以哪些方面对前端开发进行优化

代码压缩、合并减少http请求,图片制作精灵图、代码优化

208、至少列出一种JavaScript继承的实现方式

209、如现在有一个效果,有显示用户头像、用户昵称、用户其他信息;当用户鼠标移到头像上时,会弹出用户的所有信息;如果是你,你会如何实现这个功能,请用代码实现?

210、call与apply有什么作用?又有什么什么区别?用callee属性实现函数递归?

apply的参数是数组,call的参数是单个的值,除此之外,两者没有差别,重点理解this的改变,callee已经不推荐使用

211、用正则表达式,写出由字母开头,其余由数字、字母、下划线组成的6~30的字符串?

212、列举浏览器对象模型BOM里常用的至少4个对象,并列举window对象的常用方法至少5个 (10分)

对象:Window document location screen history navigator

方法:Alert() confirm() prompt() open() close()

213、Javascript中callee和caller的作用?

caller是返回一个对函数的引用,该函数调用了当前函数;

callee是返回正在被执行的function函数,也就是所指定的function对象的正文。

214、对于apply和call两者在作用上是相同的,即是调用一个对象的一个方法,以另一个对象替换当前对象。将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

但两者在参数上有区别的。对于第一个参数意义都一样,但对第二个参数:?apply传入的是一个参数数组,也就是将多个参数组合成为一个数组传入,而call则作为call的参数传入(从第二个参数开始)。?如 func.call(func1,var1,var2,var3)对应的apply写法为:func.apply(func1,[var1,var2,var3]) 。

215、在Javascript中什么是伪数组?如何将伪数组转化为标准数组?

伪数组(类数组):无法直接调用数组方法或期望length属性有什么特殊的行为,但仍可以对真正数组遍历方法来遍历它们。典型的是函数的argument参数,还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。

216、写一个函数可以计算 sum(5,0,-5);输出0; sum(1,2,3,4);输出10;

Js基本功

217、事件代理怎么实现?

在元素的父节点注册事件,通过事件冒泡,在父节点捕获事件

218、《正则》写出正确的正则表达式匹配固话号,区号3-4位,第一位为0,中横线,7-8位数字,中横线,3-4位分机号格式的固话号

常用正则表达式语法要熟悉

219、《算法》 一下A,B可任选一题作答,两题全答加分

A:农场买了一只羊,第一年是小羊,第二年底生一只,第三年不生,第四年底再生一只,第五年死掉。

B:写出代码对下列数组去重并从大到小排列{5,2,3,6,8,6,5,4,7,1,9}

220、请写出一张图片的HTML代码,已知道图片地址为“images/abc.jpg”,宽100px,高50px

221、请写一个正则表达式:要求最短6位数,最长20位,阿拉伯数和英文字母(不区分大小写)组成

^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z\d]{6,20}$

222、统计1到400亿之间的自然数中含有多少个1?比如1-21中,有1、10、11、21这四个自然数有5个1

223、删除与某个字符相邻且相同的字符,比如fdaffdaaklfjklja字符串处理之后成为“fdafdaklfjklja”

224、请写出三种以上的Firefox有但InternetExplorer没有的属性和函数

1、在IE下可通过document.frames["id"];得到该IFRAME对象,

而在火狐下则是通过document.getElementById("content_panel_if").contentWindow;

2、IE的写法: _tbody=_table.childNodes[0]

在FF中,firefox会在子节点中包含空白则第一个子节点为空白"", 而ie不会返回空白

可以通过if("" != node.nodeName)过滤掉空白子对象

3、模拟点击事件

if(document.all){  //ie下

    document.getElementById("a3").click(); 

}

else{  //非IE

    var evt = document.createEvent("MouseEvents"); 

    evt.initEvent("click", true, true); 

    document.getElementById("a3").dispatchEvent(evt); 

4、事件注册

if (isIE){window.attachEvent("onload", init);}else{window.addEventListener("load", init, false);}

225、请写出一个程序,在页面加载完成后动态创建一个form表单,并在里面添加一个input对象并给它任意赋值后义post方式提交到:http://127.0.0.1/save.php

 

226、用JavaScript实现冒泡排序。数据为23、45、18、37、92、13、24

面试经常遇到的排序,查找算法要熟悉

227、解释一下什么叫闭包,并实现一段闭包代码

简单理解就是函数的嵌套形成闭包,闭包包括函数本身及其外部作用域

228、简述一下什么叫事件委托以及其原理

在元素的父节点注册事件,通过事件冒泡,在父节点捕获事件

229、前端代码优化的方法

var User = { 对象

    count = 1,属性

    getCount:function(){ 方法

        return this.count;

    }

}

console.log(User.getCount());

var func = User.getCount;

console.log(func());

1 undefined(window);

230、下列JavaScript代码执行后,依次alert的结果是

(function test(){

      var a=b=5;

      alert(typeof a);

      alert(typeof b);

})();

alert(typeof a);

alert(typeof b);

231、下列JavaScript代码执行后,iNum的值是

var iNum = 0;

for(var i = 1; i< 10; i++){

     if(i % 5 == 0){

         continue;

    }

    iNum++;

}

232、输出结果是多少?

 1)  var a;

var b = a * 0;

if (b == b) {

     console.log(b * 2 + "2" - 0 + 4);

} else {

     console.log(!b * 2 + "2" - 0 + 4);

}

答案:26

2)

答案:6

3)  var t = 10;

function test(t){

       var t = t++;

}test(t);

console.log(t);

答案:10

4) var t = 10;

function test(test){

      var t = test++;

}test(t);

console.log(t);

答案:10

6) var t = 10;

function test(test){

       t = test++;

}test(t);

console.log(t);

答案:10

7) var t = 10;

function test(test){

      t = t + test;

      console.log(t);

      var t = 3;

}test(t);

console.log(t);

答案:NaN  10

8)var a;

var b = a / 0;

if (b == b) {

        console.log(b * 2 + "2" - 0 + 4);

} else {

        console.log(!b * 2 + "2" - 0 + 4);

}

答案:26

9)

答案:Infinity24

233、

id名重复的元素

用程序实现找到html中id名相同的元素?

234、下列JavaScript代码执行后,运行的结果是

var btn = document.getElementById('btn');

var handler = {

    id: '_eventHandler',

    exec: function(){

        alert(this.id);

    }

}

btn.addEventListener('click', handler.exec.false);

235、下列JavaScript代码执行后,依次alert的结果是

var obj = {proto: {a:1,b:2}};

function F(){};

F.prototype = obj.proto;

var f = new F();

obj.proto.c = 3;

obj.proto = {a:-1, b:-2};

alert(f.a);

alert(f.c);

delete F.prototype['a'];

alert(f.a);

alert(obj.proto.a);

236、下列JavaScript代码执行后的效果是

  • item
  • item
  • item
  • item
  • item

var items = document.querySelectorAll('#list>li');

for(var i = 0;i < items.length; i++){

     setTimeout(function(){

           items[i].style.backgroundColor = '#fee';

    }, 5);

}

237、下列JavaScript代码执行后的li元素的数量是

  • Item
  • Item
  • Item

var items = document.getElementsByTagName('li');

for(var i = 0; i< items.length; i++){

    if(items[i].innerHTML == ''){

        items[i].parentNode.removeChild(items[i]);

    }

}

238、程序中捕获异常的方法?

window.error

try{}catch(){}finally{}

239、将字符串”{$id}{$name}”中的{$id}替换成10,{$name}替换成Tony (使用正则表达式)

答案:”{$id}{$id}_{$name}”.replace(/{\$id}/g,?’10′).replace(/{\$name}/g,?‘Tony’);

240、给String对象添加一个方法,传入一个string类型的参数,然后将string的每个字符间价格空格返回,例如:

addSpace(“hello world”) // -> ‘h e l l o ?w o r l d’

         String.prototype.spacify = function(){

return this.split('').join(' ');

};

241、写出函数DateDemo的返回结果,系统时间假定为今天

function DateDemo(){

 var d, s="今天日期是:";

d = new Date();

s += d.getMonth() + "/";

s += d.getDate() + "/";

s += d.getYear();

 return s;

}

结果:今天日期是:7/17/2010

242、输出今天的日期,以YYYY-MM-DD的方式,比如今天是2014年9月26日,则输出2014-09-26

var d = new Date();

// 获取年,getFullYear()返回4位的数字

var year = d.getFullYear();

// 获取月,月份比较特殊,0是1月,11是12月

var month = d.getMonth() + 1;

// 变成两位

month = month < 10 ? '0' + month : month;

// 获取日

var day = d.getDate();

day = day < 10 ? '0' + day : day;

alert(year + '-' + month + '-' + day);

243、已知数组var?stringArray?=?[“This”,?“is”,?“Baidu”,?“Campus”],Alert出”This?is?Baidu?Campus”。

答案:alert(stringArray.join(“”))

244、已知有字符串foo=”get-element-by-id”,写一个function将其转化成驼峰表示法”getElementById”。

function combo(msg){

var arr=msg.split("-");

for(var i=1;i

arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1);

}

msg=arr.join("");

return msg;

}

245、.varnumberArray=[3,6,2,4,1,5]; (考察基础API)

1)实现对该数组的倒排,输出[5,1,4,2,6,3]

2)实现对该数组的降序排列,输出[6,5,4,3,2,1]

function combo(msg){

var arr=msg.split("-");

for(var i=1;i

arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1);

}

msg=arr.join("");

return msg;

}

246、把两个数组合并,并删除第二个元素。

var array1 = ['a','b','c'];

var bArray = ['d','e','f'];

var cArray = array1

247、如何消除一个数组里面重复的元素?

var arr=[1,2,3,3,4,4,5,5,6,1,9,3,25,4];

function deRepeat(){

var newArr=[];

var obj={};

var index=0;

var l=arr.length;

for(var i=0;i

if(obj[arr[i]]==undefined)

{

obj[arr[i]]=1;

newArr[index++]=arr[i];

}

else if(obj[arr[i]]==1)

}

return newArr;

}

var newArr2=deRepeat(arr);

alert(newArr2); //输出1,2,3,4,5,6,9,25

248、用js实现随机选取10–100之间的10个数字,存入一个数组,并排序。

var iArray = [];

funtion getRandom(istart, iend){

var iChoice = istart - iend +1;

return Math.floor(Math.random() * iChoice + istart;

}

for(var i=0; i<10; i++){

iArray.push(getRandom(10,100));

}

iArray.sort();

249、正则表达式构造函数var reg=new RegExp(“xxx”)与正则表达字面量var reg=//有什么不同?匹配邮箱的正则表达式?

答案:当使用RegExp()构造函数的时候,不仅需要转义引号(即\”表示”),并且还需要双反斜杠(即\\表示一个\)。使用正则表达字面量的效率更高。?

250、1 var regMail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;

正则表达式对象3 – 清除空格

写一个function,清除字符串前后的空格。(兼容所有浏览器)

使用自带接口trim(),考虑兼容性:

if (!String.prototype.trim) {

String.prototype.trim = function() {

return this.replace(/^\s+/, "").replace(/\s+$/,"");

} }

// test the function

var str = " \t\n test string ".trim();

alert(str == "test string"); // alerts "true"

251、数组和字符串

输出结果:

答案:lashou 拉手 lashou 1,2,3 1,2,3,4 1,2,3,4

252、下列控制台都输出什么

第1题:

function setName(){

    name="张三";

}

setName();

console.log(name);

答案:"张三"

253、第2题:

//考点:1、变量声明提升 2、变量搜索机制

var a=1;

function test(){

    console.log(a);

    var a=1;

}

test();

答案:undefined

254、第3题:

var b=2;

function test2(){

    window.b=3;

    console.log(b);

}

test2();

答案:3

255、第4题:

c=5;//声明一个全局变量c

function test3(){

    window.c=3;

    console.log(c);     //答案:undefined,原因:由于此时的c是一个局部变量c,并且没有被赋值

    var c;

    console.log(window.c);//答案:3,原因:这里的c就是一个全局变量c

}

test3();

256、第5题:

var arr = [];

arr[0]  = 'a';

arr[1]  = 'b';

arr[10] = 'c';

alert(arr.length);  //答案:11

console.log(arr[5]);    //答案:undefined

257、第6题:

var a=1;

console.log(a++);       //答案:1

console.log(++a);       //答案:3

258、第7题:

console.log(null==undefined);   //答案:true

console.log("1"==1);        //答案:true,因为会将数字1先转换为字符串1

console.log("1"===1);       //答案:false,因为数据类型不一致

259、第8题:

typeof 1;       "number"

typeof "hello";     "string"

typeof /[0-9]/;     "object"

typeof {};      "object"

typeof null;        "object"

typeof undefined;   "undefined"

typeof [1,2,3];     "object"

typeof function(){};    //"function"

260、第9题:

parseInt(3.14);         //3

parseFloat("3asdf");        //3

parseInt("1.23abc456");

parseInt(true);//"true" NaN

261、第10题:

//考点:函数声明提前

function bar() {

    return foo;

    foo = 10;

    function foo() {}

    //var foo = 11;

}

alert(typeof bar());//"function"

262、第11题:考点:函数声明提前

var foo = 1;

function bar() {

    foo = 10;

    return;

    function foo() {}

}

bar();

alert(foo);//答案:1

263、第12题:

console.log(a);//是一个函数

var a = 3;

function a(){}

console.log(a);3

264、第13题:

//考点:对arguments的操作

function foo(a) {

    arguments[0] = 2;

    alert(a);//答案:2,因为:a、arguments是对实参的访问,b、通过arguments[i]可以修改指定实参的值

}

foo(1);

265、第14题:

function foo(a) {

    alert(arguments.length);//答案:3,因为arguments是对实参的访问

}

foo(1, 2, 3);

266、第15题

bar();//报错

var foo = function bar(name) {

    console.log("hello"+name);

    console.log(bar);

};

//alert(typeof bar);

foo("world");//"hello"

console.log(bar);//undefined

console.log(foo.toString());

bar();//报错

267、第16题

function test(){

    console.log("test函数");

}

setTimeout(function(){

    console.log("定时器回调函数");

}, 0)

test();

function foo(){

    var name="hello";

}

三、Jquery

1、jQuery 的 slideUp动画 ,如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行,该如何处理呢?

 

四、HTML5 CSS3

1、CSS3有哪些新特性?

1. CSS3实现圆角(border-radius),阴影(box-shadow),

2. 对文字加特效(text-shadow、),线性渐变(gradient),旋转(transform)

3.transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜

4. 增加了更多的CSS选择器  多背景 rgba

5. 在css3中唯一引入的伪元素是 ::selection.

6. 媒体查询,多栏布局

7. border-image

2、html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?

新特性:

1. 拖拽释放(Drag and drop) API

2. 语义化更好的内容标签(header,nav,footer,aside,article,section)

3. 音频、视频API(audio,video)

4. 画布(Canvas) API

5. 地理(Geolocation) API

6. 本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;

7. sessionStorage 的数据在浏览器关闭后自动删除

8. 表单控件,calendar、date、time、email、url、search 

9. 新的技术webworker, websocket, Geolocation

移除的元素:

1. 纯表现的元素:basefont,big,center,font, s,strike,tt,u;

2. 对可用性产生负面影响的元素:frame,frameset,noframes;

支持HTML5新标签:

1. IE8/IE7/IE6支持通过 document.createElement 方法产生的标签,可以利用这一特性让这些浏览器支持 html5 新标签,浏览器支持新标签后,还需要添加标签默认的样式(当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架):

如何区分:

DOCTYPE声明新增的结构元素、功能元素

3、本地存储(Local Storage )和cookies(储存在用户本地终端上的数据)之间的区别是什么?

Cookies:服务器和客户端都可以访问;大小只有4KB左右;有有效期,过期后将会删除;

本地存储:只有本地浏览器端可访问数据,服务器不能访问本地存储直到故意通过POST或者GET的通道发送到服务器;每个域5MB;没有过期数据,它将保留知道用户从浏览器清除或者使用Javascript代码移除

4、如何实现浏览器内多个标签页之间的通信?

调用 localstorge、cookies 等本地存储方式

5、你如何对网站的文件和资源进行优化?

文件合并

文件最小化/文件压缩

使用CDN托管

缓存的使用

6、什么是响应式设计?

它是关于网页制作的过程中让不同的设备有不同的尺寸和不同的功能。响应式设计是让所有的人能在这些设备上让网站运行正常 

7、新的 HTML5 文档类型和字符集是?

答:HTML5文档类型:

    HTML5使用的编码

8、HTML5 Canvas 元素有什么用?

答:Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作。

9、HTML5 存储类型有什么区别?

答:Media API、Text Track API、Application Cache API、User Interaction、Data Transfer API、Command API、Constraint Validation API、History API

10、用H5+CSS3解决下导航栏最后一项掉下来的问题

11、CSS3新增伪类有那些?

    p:first-of-type 选择属于其父元素的首个

元素的每个

元素。

    p:last-of-type  选择属于其父元素的最后

元素的每个

元素。

    p:only-of-type  选择属于其父元素唯一的

元素的每个

元素。

    p:only-child    选择属于其父元素的唯一子元素的每个

元素。

    p:nth-child(2)  选择属于其父元素的第二个子元素的每个

元素。

    :enabled、:disabled 控制表单控件的禁用状态。

:checked,单选框或复选框被选中。

12、请用CSS实现:一个矩形内容,有投影,有圆角,hover状态慢慢变透明。

css属性的熟练程度和实践经验

13、描述下CSS3里实现元素动画的方法

动画相关属性的熟悉程度

14、html5\CSS3有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?

HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,地理定位等功能的增加。

* 绘画 canvas 元素

  用于媒介回放的 video 和 audio 元素

  本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;

  sessionStorage 的数据在浏览器关闭后自动删除

  语意化更好的内容元素,比如 article、footer、header、nav、section

  表单控件,calendar、date、time、email、url、search

  CSS3实现圆角,阴影,对文字加特效,增加了更多的CSS选择器  多背景 rgba

  新的技术webworker, websockt, Geolocation

移除的元素

纯表现的元素:basefont,big,center,font, s,strike,tt,u;

对可用性产生负面影响的元素:frame,frameset,noframes;

* 是IE8/IE7/IE6支持通过document.createElement方法产生的标签,

  可以利用这一特性让这些浏览器支持HTML5新标签,

  浏览器支持新标签后,还需要添加标签默认的样式:

* 当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

15、你怎么来实现页面设计图,你认为前端应该如何高质量完成工作? 一个满屏 品 字布局 如何设计?

* 首先划分成头部、body、脚部;。。。。。

* 实现效果图是最基本的工作,精确到2px;

  与设计师,产品经理的沟通和项目的参与

  做好的页面结构,页面重构和用户体验

  处理hack,兼容、写出优美的代码格式

  针对服务器的优化、拥抱 HTML5。

16、你能描述一下渐进增强和优雅降级之间的不同吗?

渐进增强 progressive enhancement:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。

  区别:优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要。降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带。 

  “优雅降级”观点

  “优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段,并把测试对象限定为主流浏览器(如 IE、Mozilla 等)的前一个版本。

  在这种设计范例下,旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点,因此除了修复较大的错误之外,其它的差异将被直接忽略。

  “渐进增强”观点

  “渐进增强”观点则认为应关注于内容本身。

  内容是我们建立网站的诱因。有的网站展示它,有的则收集它,有的寻求,有的操作,还有的网站甚至会包含以上的种种,但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。

 

  那么问题了。现在产品经理看到IE6,7,8网页效果相对高版本现代浏览器少了很多圆角,阴影(CSS3),要求兼容(使用图片背景,放弃CSS3),你会如何说服他?

17、为什么利用多个域名来存储网站资源会更有效?

CDN缓存更方便 

突破浏览器并发限制 

节约cookie带宽 

节约主域名的连接数,优化页面响应速度 

防止不必要的安全问题

18、请谈一下你对网页标准和标准制定机构重要性的理解。

  (无标准答案)网页标准和标准制定机构都是为了能让web发展的更‘健康’,开发者遵循统一的标准,降低开发难度,开发成本,SEO也会更好做,也不会因为滥用代码导致各种BUG、安全问题,最终提高网站易用性。

 

19、请描述一下cookies,sessionStorage和localStorage的区别?  

  sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

web storage和cookie的区别

Web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。

除此之外,Web Storage拥有setItem,getItem,removeItem,clear等方法,不像cookie需要前端开发者自己封装setCookie,getCookie。但是Cookie也是不可以或缺的:Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地“存储”数据而生。

20、知道css有个content属性吗?有什么作用?有什么应用?

知道。css的content属性专门应用在 before/after 伪元素上,用来插入生成内容。最常见的应用是利用伪类清除浮动。

//一种常见利用伪类清除浮动的代码

.clearfix:after {

    content:"."; //这里利用到了content属性

    display:block;

    height:0;

    visibility:hidden;

    clear:both; }

.clearfix {

    *zoom:1;

}

after伪元素通过 content 在元素的后面生成了内容为一个点的块级素,再利用clear:both清除浮动。

  那么问题继续还有,知道css计数器(序列数字字符自动递增)吗?如何通过css content属性实现css计数器?

答案:css计数器是通过设置counter-reset 、counter-increment 两个属性 、及 counter()/counters()一个方法配合after / before 伪类实现。 

21、如何在 HTML5 页面中嵌入音频?

HTML 5 包含嵌入音频文件的标准方式,支持的格式包括 MP3、Wav 和 Ogg:

 

   

   Your browser does'nt support audio embedding feature. 

22、如何在 HTML5 页面中嵌入视频?

和音频一样,HTML5 定义了嵌入视频的标准方法,支持的格式包括:MP4、WebM 和 Ogg:

 

   

   Your browser does'nt support video embedding feature. 

 

23、HTML5 引入什么新的表单属性?

Datalist   datetime   output   keygen  date  month  week  time  number   range   emailurl

24、CSS3新增伪类有那些?

 p:first-of-type 选择属于其父元素的首个

元素的每个

元素。

    p:last-of-type  选择属于其父元素的最后

元素的每个

元素。

    p:only-of-type  选择属于其父元素唯一的

元素的每个

元素。

    p:only-child    选择属于其父元素的唯一子元素的每个

元素。

    p:nth-child(2)  选择属于其父元素的第二个子元素的每个

元素。

    :enabled、:disabled 控制表单控件的禁用状态。

:checked,单选框或复选框被选中。

25、(写)描述一段语义的html代码吧。

(HTML5中新增加的很多标签(如: