<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js菜单</title>
<style type="text/css">
a{color: #f00;}
ul{padding:0;margin-bottom:100px;}
#ul{list-style: none;display: none;}
#div{width:200px;height:200px;border:1px solid #f00;display: none;}
</style>
</head>
<body>
<ul>
<li id="li">
<a href="###" id="weibo">微博</a>
<ul id="ul">
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</li>
</ul>
<button id="btn1">显示</button>
<button id="btn2">隐藏</button>
<span id="span">显示</span>
<div id="div"></div>
<!--让元素消失
1.display：none；脱离文档流
2.visible: hidden; 隐藏
3.width/height=0
4.透明度
5.定位left top
6.margin负值
一.找到元素
document.getElementByID("")
二.事件
鼠标事件onmouseover onmouseout onmousedown onmouseup
键盘事件
系统事件 onload 加载完之后执行 window.onload img.onload body.onload。。。
自定义事件
三.添加事件
元素.事件
四.函数
做事命令
function abc(){
...//不会主动执行
}
1.直接调用abc();
2.事件调用 元素.事件=函数名； a.onclick=abc; abc不能加括号 加上没点击呢就会执行；
function(){} 匿名函数
1.元素.事件=function(){};
一行一行alert 测试
tab ul>li*3 之后按tab展开
tab选中之后缩进
tab+shift缩前
<script>
window.onload=abc; 系统事件=函数名
function abc(){
...放在哪里都可以了 不然的话放在代码后面
}
<script/>
-->
<script type="text/javascript">
a=document.getElementById("weibo");
ul=document.getElementById("ul");
li=document.getElementById("li");
btn1=document.getElementById("btn1")
btn2=document.getElementById("btn2")
div=document.getElementById("div")
span=document.getElementById("span")
li.onmouseover=show;
li.onmouseout=hide;
function show(){
ul.style.display="block";
}
function hide(){
ul.style.display="none";
}
btn1.onclick=show1;
span.onclick=show1;
btn2.onclick=hide1;
function show1(){
div.style.display="block"
div.style.background="blue"
}
function hide1(){
div.style.display="none"
}
</script>
</body>
</html>