春招沈阳前端笔试面试总结（一）
眼瞅毕业了，本来只是无意中接触到了代码，做课程设计不得不去学，突然就对代码产生了兴趣，
然后又想办法找了一个前端的实习工作，最后一发不可收拾，深深地喜欢上了这个行业。
秋招的时候没有什么决心，找工作的时候也摇摆不定的，什么都想做，到现在，除了前端什么都不想做。
既然有了目标，就开始要一步一步从小白向大佬靠近。
嗯，差不多絮叨结束，开始总结。
首先是CSS部分
1.用CSS样式设置id=div1的层靠左绝对定位，左边距0，上边距0，宽度200px，高度30px
<div id="div1" style="position:absolute;top:0px;left:0px;width:200px;height:30px;">div>
2.用CSS样式设置鼠标位于id=div1的层上面时，该层的背景颜色变成红色
#div1:hover{
background: red;
}
3.在id=ul1的
- 标签中有两个
- 标签，请用CSS样式设置第一个li标签靠左对齐，宽度为100px，第二个li标签靠右对齐,宽度为剩下的整个右侧的区域。（触发BFC，记不清了）
#ul1 :first-child {
width: 200px;
float: left;
background: red;
}
#ul1 :last-child {
overflow: hidden;
background: blue;
}
BFC布局规则和触发条件
然后是javascript部分
1.名为str的字符串中包含10个字符，请用js代码将str中的前5个字符替换为一个字符a
var str = "HelloWorld";
var myStr = str.substring(5,10);
str = 'a' + myStr;
console.log(str);
2.删除数组arr中的第一个元素，并将arr转换为以英文逗号分隔的字符串
var arr = new Array("a","b","c","d","e","f");
arr.shift();
console.log(arr);
var strArr = arr.join(",");
console.log(strArr);
3.每隔一秒执行一次函数getSomething() （一紧张setInterval当时写成了setTimeout,还觉得自己特别对）
function getSomething(){
console.log("执行");
}
var timer = setInterval(function(){
getSomething();
},1000)
4.名为str的字符串中可能包含多个html标记，请编写一个函数，删除掉str中的所有html标记，包括开始标记和结束标记，然后返回纯文本，例如str=“abc< span>def< /span>ghi< img src=‘a.jpg’>jkm”，处理后的结果应该为：“abcdefghijkm”
str="abcdefghi
jkm"
function delHtmlTag(str) {
return str.replace(/<[^>]+>/g, ""); //正则去掉所有的html标记
}
var myStr = delHtmlTag(str);
console.log(myStr);
5.将名为obj的js对象的所有属性的名称输出到浏览器控制台
var obj = {
name: "taozi",
age: 21,
sex: "female",
occupation: "student",
habit:" play pipa",
}
function getObjNames(obj) {
//方法一
let keys = Object.keys(obj);
console.log(keys);
}
var nameArr = getObjNames(obj);
console.log(nameArr);
function getObjNamesByfor(obj) {
//方法二
var names = [];
for (let key in obj) {
names.push(key)
}
console.log(names);
}
getObjNamesByfor(obj);
接着是jQuery
1.用jq函数将class=divAbc的所有元素的宽度设置为id=ipt1的input的标签的值
<input type="text" id="ipt1" value="40">
<div class="divAbc">div>
<p class="divAbc">p>
var myWid = $("#ipt1").val();
$(".divAbc").width(myWid);
2.用jq函数设置页面中的所有复选框选中
<p><input type="checkbox" name="category" value="财经" />财经p>
<p><input type="checkbox" name="category" value="汽车" />汽车p>
<p><input type="checkbox" name="category" value="科技" />科技p>
<p><input type="checkbox" name="category" value="房产" />房产p>
<p><input type="checkbox" name="category" value="旅游" />旅游p>
<p><input type="button" value="全选" id="btn1">p>
$("#btn1").click(function () {
$("input[name='category']").attr("checked", "true");
})
3.用jq的相关方法判断id=div1的层是否可见
if ($("#div1").css("display") == "none") {
alert("隐藏");
}
else {
alert("显示");
}
最后一部分
SQL
1.从名为table1的表中查询出id倒序排列的前20条数据
SELECT top 20 * FROM (//sql写法
SELECT * FROM table1 ORDER BY id DESC --降序
) T1
2.从名为table1的表中查询数据，将field1和field2两个字符类型的字段合并为一个名为field3的字段
//sql写法
select (field1 + field2) as field3
from table1
//oracle写法
select field1 || field2 as field3 from table1
笔试结束，面试开始
浏览器兼容问题
1.CSS Hack
什么是CSS hack
由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!
CSS hack的原理
由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样，以及CSS优先级对浏览器展现效果的影响，我们可以据此针对不同的浏览器情景来应用不同的CSS。
CSS hack分类
CSS Hack大致有3种表现形式，CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。
属性前缀法(即类内部Hack)：例如 IE6能识别下划线"_"和星号"*"，IE7能识别星号"*"，但不能识别下划线"_"，IE6~IE10都认识"\9"，但firefox前述三个都不能认识.
.all IE{property:value\9;} .gte IE 8{property:value\0;} .lte IE 7{*property:value;} .IE 8/9{property:value\0;} .IE 9{property:value\9\0;} .IE 7{+property:value;} .IE 6{_property:value;} .not IE{property//:value;}
选择器前缀法(即选择器Hack)：例如 IE6能识别html .class{}，IE7能识别+html .class{}或者*:first-child+html .class{}。
IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)： ，针对IE6及以下版本： 。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。
2.参考：Web前端面试指导：谈谈浏览器的兼容性
Web前端面试题第三道—浏览器的兼容性
相关太多了。。。
前端你这该死的无处安放的魅力