初识JavaScript

                                                  JavaScript是什么

目录

                                                  JavaScript是什么

1.网页特效原理：

2.编写JavaScript的流程：

3：第一个JS特效鼠标提示框

总结：

---

---

1.网页特效原理：

-新浪、百度、淘宝

-JavaScript就是修改样式

2.编写JavaScript的流程：

-布局：HTML+CSS

-属性：确定要修改的属性

-事件：确定用户要做那些操作

-编写JS：在事件中，用JS来修改页面元素的样式

3：第一个JS特效鼠标提示框

1.分析效果原理实现

-样式：Div的display

-事件：onmouseover、onmouseout

-动手编写效果

    为了您的信息安全，请不要再网吧等场所勾选此选项。

鼠标移入input时，显示div1（也就是让div的display变成block），鼠标移出input时，隐藏div1（就是将div1的display变成）。

这个就是一个简单的事件，点击按钮弹出窗口提示信息“请点击完成任务”，click（点击）

一个鼠标移入就显示提示窗口的事件 οnmοuseοver="alert('请勾选该选项');" οnmοuseοut="alert('请勾选该选项');" 鼠标移出时显示的提示窗口信息。

div1.style.display='block';的意思就是div1的style样式display属性，“=”的意思就是将div1的style样式display属性变成block，鼠标移上去之后就会显示提示信息。

上面的代码就完整的实现鼠标移到input，提示信息显示，移开后提示信息消失的效果。

经过上面的代码完善，基本可以说是没什么问题了，但是在火狐上面运行的时候你会发现我们前面设置的JS特效居然不会显示出效果，如下图

转存失败重新上传取消

这是什么原因呢？其实这就是大家知道的不兼容的问题，在一些低版本或者别的一些浏览器中，会存在不兼容的问题，这就导致我们所做的效果不会显示出来，为了解决这种情况我们需要在原先的代码上作出一些修改。

document.getElementById('div1')是什么意思呢，从中文的释义就可以看出来，document 就是文档对象，文档对象获取元素的ID，也就是在文档对象中通过ID获取元素。这样一来，我们就达到了我们的期望了。在火狐这些浏览器中都可以正常显示。

总结：

在上面的演示中我们了解到了三种事件，onClick、onmouseover、onmouseout三种。其JS效果也是通过这三种事件来编写的。

特效基础：

-事件驱动：onmouseover

-元素属性操作：object.style.[……]

-特效实现原理概括：响应用户操作，对页面元素（标签）进行修改。