面试题（北京）
1、两个div，如何控制左边那个宽固定为100px，而右边自适应
首先我想到的，肯定是js啦
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <style type="text/css"> div{height: 100px; } .one{width: 100px; background-color:green; float: left;} .two{background-color:red } </style> </head> <body> <div class="one"></div> <div class="two"></div> <script> var one=document.getElementsByClassName("one")[0]; var two=document.getElementsByClassName("two")[0]; var body=document.body; two.style.width=(body.clientWidth-100)+"px"; </script> </body> </html>
第二办法，就是float，然后不给第二个设置宽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <style type="text/css"> div{height:100px; } .one{width: 100px; background-color:green; float: left;} .two{background-color:red; } </style> </head> <body> <div class="one"></div> <div class="two"></div> </body> </html>
第三个办法，利用table特性。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <style type="text/css"> .wrapp{display: table; width: 100%} div{height: 100px; display:table-cell; } .one{width: 100px; background-color:green; } .two{ background-color:red } </style> </head> <body> <div class="wrapp"> <div class="one"></div> <div class="two"></div> </div> </body> </html>
第四种办法，利用弹性盒子布局，flex:1意思为水平占满剩余空间
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <style type="text/css"> .wrapp{display:flex;} div{height: 100px; } .one{width: 100px; background-color:green; } .two{flex:1; background-color:red } </style> </head> <body> <div class="wrapp"> <div class="one"></div> <div class="two"></div> </div> </body> </html>
2、css如何解决垂直居中
首先想到的是利用行高来解决
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>test</title> <style type="text/css"> .wrapp{ border: red solid 1px; height: 300px; display: inline-block; line-height: 300px } </style> </head> <body> <div class="wrapp"> 哈哈，^_^ </div> </body> </html>
第二种，利用表格td的css有垂直居中的属性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>test</title> <style type="text/css"> .wrapp{ border: red solid 1px; height: 300px; display: table-cell; vertical-align: middle; } </style> </head> <body> <div class="wrapp"> 哈哈，^_^ </div> </body> </html>
第三、又是咱们的弹性盒子了
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>test</title> <style type="text/css"> .wrapp{ border: red solid 1px; height: 300px; display: flex; align-items:center; } </style> </head> <body> <div class="wrapp"> 哈哈，^_^ </div> </body> </html>
3、数组去重
利用es6中新增的数据类型Set，该数据类型在其他语言中一直存在，set的元素不允许重复。构造函数允许传一个数组，而返回一个去重后的新数组对象
var arr=[2,4,4,6]; var newArr=new Set(arr); console.log(newArr)
第二种，是我自己研究出来的，道理很简单，居然没有百度到这种写法
<script>
function qc(arr) {
var newArr=[];
for(var i=0; i<arr.length; i++){
if(newArr.indexOf(arr[i])==-1){
newArr.push(arr[i])
}
}
return newArr;
}
var arr=[2,4,4,6];
var qcArr=qc(arr);//得到去重复后的arr
console.log(qcArr)
</script>
第三种是利用Array类的filter( )函数来解决
该函数需要一个function类型的值来做为形参，用来回调。该回调内部会遍历所以
该function值也有三个形参：element、index、self，分别是遍历的当前元素值、索引、和数组本身
self.indexOf(element)返回的是数组该元素第一次出现的位置
index是当前遍历到的索引
如果两者不一致，则说明有重复，两者相同的话才说明不重复则予以返回
参考：http://www.jb51.net/article/99038.htm
http://blog.csdn.net/tongyanping1015/article/details/54708044
<script>
var arr=[2,4,4,6];
var newArr=arr.filter(function(element, index, self){
return self.indexOf(element) === index;
});
console.log(newArr)
</script>
4、写一个js正则，用来检测标签中是否有class属性
首先写一个不用则正的
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <div class="wrapp">第1个div </div> <div class=""> 第2个div </div> <div> 第3个div </div> <script> function isHaveClass() { for(var i=0; i<arguments.length; i++){ var domClass=arguments[i].getAttribute("class"); if(domClass==null||domClass==""){ console.log("第"+(i+1)+"个Dom节点没有class") }else{ console.log("第"+(i+1)+"个Dom节点的class为："+domClass) } } } var div1=document.getElementsByTagName("div")[0]; var div2=document.getElementsByTagName("div")[1]; var div3=document.getElementsByTagName("div")[2]; isHaveClass(div1,div2,div3) </script> </body> </html>
第二种办法，我感觉反倒麻烦啊，可能是我写错了？？？
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <div class="wrapp">第1个div </div> <div class=""> 第2个div </div> <div> 第3个div </div> <script> function isHaveClass() { for(var i=0; i<arguments.length; i++){ ohtml = arguments[i].outerHTML, attrArr = ohtml.split(' '); var pattern = /class/;//正则 var havedClass=pattern.test(attrArr);//匹配正则 if(havedClass){ console.log("第"+(i+1)+"个Dom节点的【有】class属性") }else{ console.log("第"+(i+1)+"个Dom节点【没有】class属性") } } } var div1=document.getElementsByTagName("div")[0]; var div2=document.getElementsByTagName("div")[1]; var div3=document.getElementsByTagName("div")[2]; isHaveClass(div1,div2,div3) </script> </body> </html>
