您的位置：首页 > Web前端 > JavaScript

JS0热身运动

2016-02-28 10:42 561 查看

热身热身小知识点：

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航