flex 完成布局:
1、4两个定宽,2、3两个不定宽,定比例,4偏上
flex css的考察
html
<div class="flex">
<div class="d d1"></div>
<div class="d d2"></div>
<div class="d d3"></div>
<div class="d d4"></div>
</div>
css
.flex{
display: flex;
width: 98%;
height: 220px;
border: 1px solid red;
}
.flex .d{
border: 1px solid red;
margin: 4px;
}
.d1{
width: 200px;
}
.d2{
flex: 1.5;
}
.d3{
flex: 1;
height: 150px;
align-self:center;
}
.d4{
width: 200px;
height: 100px;
}
实现fn,获取url的参数值
split字符串转分割为数组
function fn(url,name){
//补充代码
let obj={}
let si=url.indexOf("?")
let str=url.substring(si+1)
let arr=str.split("&")
for(let i=0;i<arr.length;i++){
let key=arr[i].split("=")[0]
let value=arr[i].split("=")[1]
obj[key]=value
}
console.log(obj[name])
}
fn("#34;,"a")//1
css选择器的含义
E,F //两个选择器样式相同
E F //两个选择器是父子关系,可能多级
E > F //两个选择器是直接父子关系
E + F //两个选择器是前后2个直接兄弟关系
E ~ F //表示匹配E选择器后面的所有F选择器元素的关系
实现 walk 函数,将树结构的数据转化为列表数据 (多维转一维)
var input=[{
id: 1,
text: 'text1',
children : [{
id: 2,
text: 'text2',
parentId: 1,
children: [{
id: 4,
text: 'text4',
parentId: 2
}]
}, {
id: 3,
text: 'text3',
parentId: 1
}]
}]
var output=[{
id: 4,
text: 'text4',
parentId: 2
}, {
id: 2,
text: 'text2',
parentId: 1
}, {
id: 3,
text: 'text3',
parentId: 1
}, {
id: 1,
text: 'text1'
}, ];
//实现
function walk(arr,res){
let i=0
for(i=0;i<arr.length;i++){
let chlid=arr[i].children
if(!chlid){//无子
res.push(arr[i]);
}else{//有子
delete arr[i].children
res.push(arr[i]);
if(chlid instanceof Array){
walk(chlid,res)
}
}
}
return res
}
console.log(walk(input,[]))