关于面试的一些问题合集

一、css方面

1、盒子模型在IE上有何不同？

盒模型分为：W3C标准盒模型和IE盒模型
W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。
 IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。

 2、移动端适配方案？

　　Media Query（Bootstrap）

　　viewpoint缩放

　　固定高度

　　浮动百分比

　　动态计算与rem（淘宝的flexible）

 

二、JQuery方面

1、事件on和click有何不同？

<form action="">
    <input type="radio" class="sex" id="man" name="xb"> <label for="man">男</label>
    <input type="radio" class="sex" id="woman" name="xb"> <label for="woman">女</label>
    <input type="radio" class="sexon" id="secret" name="xb" checked="checked"> <label for="secret">保密</label>
</form>

<script src="js/jquery.min.js"></script>
<script>
    //click不支持给最后一个元素，动态添加的sex样式进行绑定事件
    $(".sex").click(function(){alert($(this).next().text())
        $(this).removeClass().addClass("sexon").siblings("input").removeClass().addClass("sex");
    })
    //on支持给最后一个元素，动态添加的sex样式进行绑定事件
    $("body").on("click",".sex",function(){alert($(this).next().text())
        $(this).removeClass().addClass("sexon").siblings("input").removeClass().addClass("sex");
    })
</script>

 

三、原生JS方面

1、如何理解事件流？

//事件流即当事件触发某个元素的同时，也触发了包含这个元素的所以祖先容器
//IE：事件冒泡（由最开始具体的元素接收，然后逐级向上传播）
//Netscape：事件捕获（最外层更早接收到事件，最具体的元素最后接收到事件）

//事件处理程序
//HTML事件处理程序
<input type="button" value="按钮1" id="btn" onclick="alert('hello world!')">
//DOM0级事件处理程序
var btn2=document.getElementById("btn2");
btn2.onclick=function(){alert("hello DOM0")}

//DOM2级事件处理程序
var btn3=document.getElementById("btn3");
btn3.addEventListener("click",showMes,false)
function showMes(){alert("hello DOM2")}
//btn3.removeEventListener("click",showMes,false);//解除事件

//IE事件处理程序
btn3.attachEvent("onclick",showMes)
//btn3.detachEvent("onclick",showMes);//解除事件

 

 2、关于if判断的默认数据转换（如下为false，其他大部分均为true）

var a;          //false
var a="";       //false
var a=null;     //false
var a=undefined;//false
var a=0;        //false
var a=NaN;      //false
var a=false;    //false