1、box-shadow 添加阴影
2、针对absolute/relative的理解
3、Flex布局可以纵向平均分布么？
4、隐藏后释放/不释放占用的空间
5、javaScript 添加数据到最后和最前面
6、js 获取第一个子节点
1、box-shadow 添加阴影
阴影.jpg
2、针对absolute/relative的理解(http://www.cnblogs.com/coffeedeveloper/p/3145790.html)
2.1 加了absolute后宽/高都会变成自适应(还受到父容器的影响)，它会变成包裹性，会改变display属性
2.2 加了absoute后，会脱离文档流
2.3 加了relative后，设置margint，只会相对自己的位置进行位置偏移，视觉上发生了偏移
2.4 加了relative，不会脱离文档流，不会修改display属性，设置宽/高无效
3、Flex布局可以纵向平均分布么？
这个要看条件的，比如父布局高度固定，比如写800px
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>Hello APP</title>
<style>
body{
display:flex;
flex-direction:column;
height:500px; <!--父布局，高度固定-->
}
div{
height:100px;
width:100px;
border:1px solid currentcolor;
display:inline-block;
}
div:nth-child(1){
flex:1;
color:red;
}
div:nth-child(2){
color:blue;
}
div:nth-child(3){
color:yellow;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
父布局高度固定.png
在上面的代码里面总高度是500PX，我们看到3个不同颜色的DIV，每个DIV默认高度都是100PX的像素，但是第一个高度采用了flex：1，所以剩下的高度给了第一个DIV。
如果我们父布局就是300PX，那我们第一个DIV的高度就无法占的比其它DIV多了
无法占的比其它div多.png
如果你父布局采用百分比，比如父写100%，其它不变，效果跟上面的一样。
如果父子都采用了百分比，比如父是100%，3个DIV写20%，直接塌缩了
塌缩.png
总结：
在纵向上，父布局必须要高度固定（固定值），然后子布局首先占自己独有的高度，剩下的高度再进行分配。
4、隐藏后释放/不释放占用的空间
隐藏后继续占用空间
document.getElementById("typediv1").style.visibility="hidden";//隐藏
document.getElementById("typediv1").style.visibility="visible";//显示
隐藏后不继续占用空间
document.getElementById("typediv1").style.display="none";//隐藏
document.getElementById("typediv1").style.display="";//显示
5、javaScript 添加数据到最后和最前面
var a = [];// 创建数组
a.push(obj); // 添加到最后
a.unshift(obj); // 添加到第一个位置
6、map遍历，获取key和value
文章摘自：https://blog.csdn.net/pang_da_xing/article/details/75676014
遍历map对象
var map = [{
key : "百度",
value : "李彦宏" },
{
key : "阿里巴巴",
value : "马云" },
];
for (var key in map) {
console.log(map[key]);
}
//输出结果
//Object {key : "百度", value : "李彦宏"}
//Object {key : "阿里巴巴", value : "马云"}
遍历map集合
var m = new Map();
m.set(1, "black");
m.set(2, "red");
m.set("colors", 2);
//方法一：
m.forEach(function (item) {
console.log(item.toString());
});
//方法二：
m.forEach(function (value, key, map) {
console.log(value)
})
// 输出:
// black
// red
// 2
//方法三：
for (var [key, value] of m) {
console.log(key + ' = ' + value);
}
// 输出:
// 1 = black
// 2 = red
// colors = 2
6、js 获取第一个子节点
最原始的博主写的有问题，后面我改了，下面的可以直接使用。
原始博主 https://blog.csdn.net/duanshuyong/article/details/7562423
html
<div id="dom">
<div></div>
<div></div>
<div></div>
</div>
js
var a = document.getElementById("dom");
del_ff(a);
console.log('获取a的全部子节点:')
console.log(a.childNodes);//获取a的全部子节点；
console.log('获取a的父节点:')
console.log(a.parentNode); //获取a的父节点；
console.log('获取a的下一个兄弟节点:')
console.log(a.nextSibling);//获取a的下一个兄弟节点
console.log('获取a的上一个兄弟节点:')
console.log(a.previousSibling );//获取a的上一个兄弟节点
console.log('获取a的第一个子节点:')
console.log(a.firstChild);//获取a的第一个子节点
console.log('获取a的最后一个子节点:')
console.log(a.lastChild);//获取a的最后一个子节点
//去除空格
function del_ff(elem)
{
var elem_child = elem.childNodes;
for (var i = 0; i < elem_child.length;)
{
if (elem_child[i].nodeName == "#text" && !/\s/.test(elem_child.nodeValue))
{
elem.removeChild(elem_child[i])
}
else
{
i++;
}
}
}
js获取子节点.png
网友评论