初识JS的魅力（1）

来源：互联网发布：java编程教学视频编辑：程序博客网时间：2024/06/16 15:05

1. 什么是JS

HTML+CSS是在开发静态网页，而JS则是为了给网页添加动态交互，也可以说是添加各种功能。

2. 事件：用户操作的意思

鼠标提示框

onclick ：点击 onmouseover：鼠标移动到标签上面 onmouseout：鼠标移到标签外面
div1.style.display = ‘block’;让div1标签显示；点的意思相当于“的” ——div1的样式中的display的值是block；等号是赋值的意思。

举例：<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>js示例</title>    <style type="text/css">#div1{    width: 200px;height: 100px;background: #CCC;border: 1px;solid-color: #999;display: none;}    </style></head><body>    <input type="checkbox" onmouseover="div1.style.display='block';" onmouseout="div1.style.display='none'"/>    <div id = "div1">为了您的信息安全</div></body></html>让div标签默认是隐藏状态，当鼠标移到checkbox的地方时让div显示，当鼠标移开的时候，让div隐藏

3. 兼容性问题

div1.style.display这句话中的div1不能直接使用，否则在低版本的浏览器上可能会出现不兼容，为了杜绝这种情况，采用document.getElementById(‘div1’).style.display，来找到div1标签，这样就不会出现兼容性问题了。

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>js示例</title>    <style type="text/css">#div1{    width: 200px;height: 100px;background: #CCC;border: 1px;solid-color: #999;display: none;}    </style></head><body>    <input type="checkbox" onmouseover="document.getElementById('div1').style.display='block';" onmouseout="document.getElementById('div1').style.display='none'"/>    <div id = "div1">为了您的信息安全</div></body></html>getElementById的意思就是通过id获取标签

4. JS实现原理

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

5. 初识函数

在没有利用函数之前：

    <!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style type="text/css">        #div1{            width: 200px;height: 200px;background-color: red;        }    </style></head><body>    <div id = "div1"         ONMOUSEOVER="    document.getElementById('div1').style.width = '300px';    document.getElementById('div1').style.height = '300px';    document.getElementById('div1').style.background = 'green';"         ONMOUSEOUT="         document.getElementById('div1').style.width = '200px';    document.getElementById('div1').style.height = '200px';    document.getElementById('div1').style.background = 'RED';"    ></div></body></html>

利用了函数之后：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style type="text/css">        #div1 {            width: 200px;            height: 200px;            background-color: red;        }    </style>    <script>        function toGreen() {            document.getElementById('div1').style.width = '300px';            document.getElementById('div1').style.height = '300px';            document.getElementById('div1').style.background = 'green';        }        function toRed() {            document.getElementById('div1').style.width = '200px';            document.getElementById('div1').style.height = '200px';            document.getElementById('div1').style.background = 'RED';        }    </script></head><body>    <div id="div1"     ONMOUSEOVER="toGreen()"     ONMOUSEOUT="toRed()">    </div></body></html>

0 0