开始感受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的流程

  1. 布局：HTML +CSS
  2. 属性：确定要修改哪些属性
  3. 事件：确定用户做哪些操作（产品设计）
  4. 编写js：在事件中，用js来修改页面元素的样式

多样式的改变会使这种直接写的方法变得十分繁乱且不方便。
之后学习函数会让我们写的代码更加灵活且利于审美。
第一次发博客，大佬们别针锋相对，我当这是一点学习笔记而已。