遇到的不会的面试题

1.写一个函数实现以下功能:

sum(1,2);//3
sum(3,4,5);//12
答:

知识点:函数内部属性arguments保存所有传入该函数的参数

function sum(){
    var n=0;
    for(var i=0;i<arguments.length;i++){
        n+=arguments[i];
    }
    return n;
}

2.看下面代码,假设页面上有10个button,点击第一个控制台返回什么,第四个呢?为什么?如何修改以返回正确值?

var btn = document.getElementsByTagName("button");
for(var i=0;i<btn.length<i++){
    btn[i].addEventListener("click",function(){
        console.log("you clilcked #"+i);
    },false);
}

答:知识点:闭包

点击第一个和第四个控制台均显示”you clicked #10”,因为在事件监听函数内的function函数访问了外部函数,也就是全局对象i,构成了闭包.这里的i在循环结束后值为10,每一个绑定的函数只是引用了保存i的同一个变量对象;

修改:

var btn = document.getElementsByTagName("button");
for(var i=0;i<btn.length<i++){
    btn[i].addEventListener("click",function(j){
        return function(){
            console.log("you clilcked #"+(j+1));
        }
    }(i),false);
}

3.jQuery匹配正则表达式

答:知识点:正则表达式test();

$(function(){
    $("#check").click(function(){
        var str = $("#input").val(),
            ret = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
        if(ret.test(str)){
            //true
        }else{
            //false
        }
    });
});

4.设一个div宽度为100%,高为500px,边框为10px,如何使其正常显示,并且元素宽度也为100%

答:
知识点:box-sizing:content-box|border-box|inherit;

div{
    width:100%;
    height:500px;
    border:10px solid red;
    /*边框在指定的宽高内绘制*/
    box-sizing:border-box;
}

5.不同浏览器对盒子模型的解释有什么不同?

答:
IE盒子模型content宽高包含border
W3C标准盒子模型content不包含宽高