第一课
JS 核心 动态的事件 功能 交互
实例1 鼠标提示框
先定义一个复选框和div
将div隐藏
鼠标移入input div显示
鼠标移出input div隐藏
几个事件举例
1、onclick
<input type="button" value="按钮" onclick="alert("内容");" />
2、onmouseover="事件"
鼠标移入时触发
3、onmouseout="事件"
鼠标移出时触发
代码：
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8"> //解决了文字乱码的问题，谢谢学霸！
<style>
#div1 {width:200px; height:100px; background: #ccc; border:1px solid #999; display:none; } //定义一个div的属性</style>
<body>
<input type="checkbox" onmousemove="document.getElementById('div1').style.display='block';" onmouseout="div1.style.display='none';" /> //解决兼容性问题的应用以及事件的实现<div id="div1">
这是提示哦
</div>
</body>
</html>
解决兼容性问题
document.getElementById('div1')
get element by id
获取 元素 用 ID
（通过ID获取元素）
初时函数
以方块的变化为例
实例2 方块的变化
方法 function
<script>
function toGreen()
{
函数内的属性
}
function toRed()
{
函数内的属性
}
</script>
代码：
<!DOCTYPE html>
<html lang="en">
<style>
#div1 {width:100px; height:100px; background:red; }
</style>
<script type="text/javascript">
function toGreen()
{
document.getElementById('div1').style.width='200px';
document.getElementById('div1').style.height='200px';
document.getElementById('div1').style.background='green';
}
function toRed()
{
document.getElementById('div1').style.width='100px';
document.getElementById('div1').style.height='100px';
document.getElementById('div1').style.background='red';
}
</script>
<body>
<div id="div1" onmouseover="toGreen()" onmouseout="toRed()">
</div>
That's all!!
虽然没有学多少，但是对于暑假的我来说，好不容易打起精神看一点视频还是值得表扬的事！！
感受：我一直喜欢接受新鲜的东西，这次的学习很有趣，没有想到那些奇奇怪怪的效果通过几行代码就可以搞定了，嘻嘻，感觉当个程序员还不赖！
