2015.1.20面试web前端
从家里出发到三元桥的公司所在地地铁公交一共花了2个小时。，太远了。白花了12块钱的公交费，呜呜呜，好心疼。。好啦，不闹啦。言归正传。
云南走过商贸有限公司：
1.写出外边距上下左右为1px 2px 3px 4px的代码.
2.计算div的实际高度：
#div{width:200px; padding:10px; border:5px;}
3.简化代码：
#div{
background-position :10px 20px;
background-image: url(/i/eg_bg_07.gif);
background-color: gray;
background-repeat: repeat-y;
background-attachment:fixed
}
4.<iframe>中控制滚动条用什么属性控制
5.display:none和hidden的区别
6.在jquery中$('.class')和$('div.class')在ie8环境下哪个运行的快，为什么
7.在jquery中隐藏用 属性，显示用
8.写最少2个jquery绑定事件
9.写一个正则表达式，验证身份
上机：1.用js写一个鼠标移动显示2级菜单移出不显示
2.用js写正选，反选，全选的功能
-----------------------------------------------------------------------
知识点结构：==》仅供参考，个人意见
1. 边距等记忆方式是元素周围正上方顺时针“上右下左”记忆。
2.计算div的实际高度
一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。
元素的高度也是同理。
如：
元素的实际长度为：10px+1px+20px+200px+20px+1px+10px=262px。在chrome浏览器下可查看元素盒模型，如下图：
3.简化代码：
background-color: //指定填充背景的颜色。
background-image: //引用图片作为背景。
background-position: //指定元素背景图片的位置。
background-repeat: //决定是否重复背景图片。
background-attachment: //决定背景图是否随页面滚动。
background属性的值的书写顺序官方并没有强制标准的。
为了可读性，定一个CSS书写规范，规则2.1：background的值的顺
序是background-color，background-image，background-repeat，background-
attachment，background-position。
4.<iframe>中控制滚动条用什么属性控制
这个应该是：
用css控制，overflow: scroll
固定高度，并设置属性scrolling＝no
具体的可以参考iframe滚动条：http://blog.csdn.net/wonsoft/article/details/6013576
5.display:none与visible:hidden的区别
display:none和visible:hidden都能把网页上某个元素隐藏起来，但两者有区别:
display:none ---不为被隐藏的对象保留其物理空间，该对象在页面上彻底消失（将元素的显示设为无,即在网页中不占任何的位置）通俗来说就是看不见也摸不到。
visible:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变(将元素隐藏,但是在网页中该占的位置还是占着)通俗来说就是看不见但摸得到。
例子：
<html> <head> <title>display:none和visible:hidden的区别</title> </head> <body > <span style="display:none; 隐藏区域</span><span style=" background-color:Green">显示区域</span><br /> <span style="visibility:hidden; 隐藏区域</span><span style="background-color:Green">显示区域</span> </body> </html>
6.在jquery中$('.class')和$('div.class')在ie8环境下哪个运行的快，为什么
7.我觉得考点是：
$("#id").show()表示display:block,
$("#id").hide()表示display:none;
$("#id").toggle()
//切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
$("#id").css('display','none');
$("#id").css('display','block');
或
$("#id")[0].style.display = 'none';
$("#id")返回的是JQuery
//它是个集合肯定没有display属性
8.写最少2个jquery绑定事件
触发实例：$("button#demo").click()
绑定实例：$("button#demo").click(function(){$("img").hide()})
jQuery 参考手册 - jQuery 事件方法：http://www.w3school.com.cn/jquery/jquery_ref_events.asp
9.验证身份证号正则表达式
//身份证正则表达式(15位)
isIDCard1=/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;
//身份证正则表达式(18位)
isIDCard2=/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
地区、性别和身份证进行判断的正则表达式：
<script>
var
aCity={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",33:"浙江",34:"
安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州"
,53:"云南",54:"西藏",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"}
function cidInfo(sId){
var iSum=0
var info=""
if(!/^\d{17}(\d|x)$/i.test(sId))return false;
sId=sId.replace(/x$/i,"a");
if(aCity[parseInt(sId.substr(0,2))]==null)return "Error:非法地区";
sBirthday=sId.substr(6,4)+"-"+Number(sId.substr(10,2))+"-"+Number(sId.substr(12,2));
var d=new Date(sBirthday.replace(/-/g,"/"))
if(sBirthday!=(d.getFullYear()+"-"+ (d.getMonth()+1) + "-" + d.getDate()))return "Error:非法生日";
for(var i = 17;i>=0;i --) iSum += (Math.pow(2,i) % 11) * parseInt(sId.charAt(17 - i),11)
if(iSum%11!=1)return "Error:非法证号";
return aCity[parseInt(sId.substr(0,2))]+","+sBirthday+","+(sId.substr(16,1)%2?"男":"女")
}
