初识JS的魅力（1）

最新推荐文章于 2024-10-18 11:12:30 发布

ab_dg_dp

最新推荐文章于 2024-10-18 11:12:30 发布

阅读量354

点赞数

文章标签： javascript 事件兼容性函数

本文链接：https://blog.csdn.net/fkq_2016/article/details/60764177

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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>