开始感受JavaScript的魅力
第一个js特效——鼠标提示框
首先，我们要求鼠标移入移出提示框的时候有特定的变化，那么我们在没有学习js的时候我们都是直接把标签的样式进行改变即可，但是使用起来往往不太方便。
改变div样式
当鼠标移入input时，div1显示，当鼠标移出时，div1隐藏。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1{display: none;
width:200px;
height:200px;
background:red;}
</style>
</head>
<body>
<input type="checkbox" onmouseover="div1.style.display='block';"
onmouseout="div1.style.display='none';"/>
<div id="div1">
为了你的安全，请。。。
</div>
</body>
</html>
虽然这段代码可以实现鼠标移入移出复选框时弹出淡去内容的功能，但是在火狐和低版本的chorme浏览器中控制台却会报错，提示div1未定义，那么针对这个问题我们要进行的改进是不能把div1直接使用，要用getElementById的方法。
小改进版
修改input
<input type="checkbox" onmouseover="document.getElementById('div1').style.display='block';"
onmouseout="document.getElementById('div1').style.display='none';"/>
鼠标未移入时不显示
鼠标移入后显示（截图的时候鼠标显示不了，在复选框里面）
同样可以实现功能并不会报错，代码更为严谨。
getElementById 直译过来是通过id获取元素的意思。了解意思方便我们理解。
编写js的流程
- 布局：HTML +CSS
- 属性：确定要修改哪些属性
- 事件：确定用户做哪些操作（产品设计）
- 编写js：在事件中，用js来修改页面元素的样式
多样式的改变会使这种直接写的方法变得十分繁乱且不方便。
之后学习函数会让我们写的代码更加灵活且利于审美。
第一次发博客，大佬们别针锋相对，我当这是一点学习笔记而已。
184
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
