热身热身小知识点：
JS中如何获取元素：
1 通过ID名称来获取：document get element by id -->document.getElementById()
2
....
事件：鼠标事件，键盘事件，系统事件，表单事件，自定义事件...
onclick
onmouseover
onmouseout
onmousedown
onmouseup
onmousemove 就像是鼠标抚摸一样的事件
...
onload 加载以后执行...
window.onload=事情
如何添加事件：
元素.onmouseover
函数：可以理解为-命令，做些事——
function jill1231(){ //肯定不会主动执行的！
...
}
1 直接调用：jill1231();
2 事件调用：元素.事件=函数名oDiv.onclick=jill1231;
function(){} //匿名函数
元素.事件=function(){};
测试：
alert(1); 带一个确定按钮的警告框
alert('ok'); 'ok' "ok" 字符串
变量：
var num=123;
希望把某个元素移除你的视线：
1 display:none;
2 visibility:hidden;
3 width/height
4 opacity
5 拿一个div盖住它
...
例如，做一个菜单栏，鼠标移入，显示子菜单，移出，子菜单消失
<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html;charset=utf-8">
<title>模拟菜单栏</title>
<style>
//reset
body,ul,li{margin:0;padding:0;}
ul,li{list-style:none;}
a{text-decoration:none;}
//main.css
.lis{width:80px;height:30px;border:1px solid #333;position:relative;}
.lis a{display:block;line-height:30px;text-align:center;color:#000;background:#f1f1f1;}
ul ul{width:80px;border:1px solid #333;position:absolute;top:30px;left:-1px;background:#ff9;display:none;}
ul ul li{text-align:center;line-height:30px;}
</style>
</head>
<body>
<ul>
//设置父级，保证鼠标移入移出伪元素及子级不出现闪退
<li id="lis">
<a hred="#" id="link">博客</a>
<ul id="ul1">
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</li>
</ul>
<script>
var li=document.getElementById('lis');
var a=document.getElementById('link');
var ul=document.getElementById('ul1');
li.onmouseover=show;
li.onmouseout=hide;
function show(){
ul.style.display='block';
a.style.background='#345345';
}
function hide(){
ul.style.display='none';
a.style.background='#f1f1f1';
}
</script>
</body>
</html>
<head>
<meta content="text/html;charset=utf-8">
<title>模拟菜单栏</title>
<style>
//reset
body,ul,li{margin:0;padding:0;}
ul,li{list-style:none;}
a{text-decoration:none;}
//main.css
.lis{width:80px;height:30px;border:1px solid #333;position:relative;}
.lis a{display:block;line-height:30px;text-align:center;color:#000;background:#f1f1f1;}
ul ul{width:80px;border:1px solid #333;position:absolute;top:30px;left:-1px;background:#ff9;display:none;}
ul ul li{text-align:center;line-height:30px;}
</style>
</head>
<body>
<ul>
//设置父级，保证鼠标移入移出伪元素及子级不出现闪退
<li id="lis">
<a hred="#" id="link">博客</a>
<ul id="ul1">
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</li>
</ul>
<script>
var li=document.getElementById('lis');
var a=document.getElementById('link');
var ul=document.getElementById('ul1');
li.onmouseover=show;
li.onmouseout=hide;
function show(){
ul.style.display='block';
a.style.background='#345345';
}
function hide(){
ul.style.display='none';
a.style.background='#f1f1f1';
}
</script>
</body>
</html>