智能社JavaScript学习笔记第一课

JS学习第一课

Html 和 Css 相当于盖大楼的一个框架，静态的布局，想要加效果修改样式靠JS，JS起到交互，实现功能的作用。

编写JS的流程：

1.首先要有布局：HTML + CSS

2.属性：确定修改哪些属性（我想实现什么效果、功能）

3.事件：确定用户做哪些操作（什么样的操作会实现2的效果）

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

我的理解：事件实际就是操作，可能来自于用户，也可能不来自于用户。

第一个js效果：鼠标提示框（想要实现的效果:鼠标移上去时显示div，移走时消失）

效果实现原理：当事件发生，改变div样式中的display属性（鼠标移上去是显示display：block，移走display：none）

事件：onmouseover，onmouseout

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

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>mouse</title>

    <style>

       #div1 {width: 100px; height: 200px;background: red;border: 1px solid #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>

这里牵扯兼容性问题可能不能直接用div1，要写成 document.getElementById(‘div1’).style.[…..]

此处注意任何标签都可以加id，且任何标签的属性都可以修改，html里属性怎么写js里就怎么写，唯一的例外是调用css中class时要写成className

例如：css中 .box{background：red}

调用时 oDiv.className = ‘box’

函数

上面的例子看到，直接在事件内些js会很乱，所以引用函数，即function（）、把js从标签中放到函数里类似于css里的class

小例子：两个div，鼠标移到div上会变大变色，移走回到原来的样式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>mouse</title>

    <style>

       #div1 {width: 100px; height: 200px;background:red;}

    </style>

    <script>

        function toGreen() { //定义函数直接在事件中调用

            var oDiv = document.getElementById('div1');  //利用变量来简化代码

            oDiv.style.width = '200px';

            oDiv.style.height = '300px';

            oDiv.style.background = 'green';

        }

        function toRed() {

            oDiv.style.width = '100px';

            oDiv.style.height = '200px';

            oDiv.style.background ='red';

        }

    </script>

</head>

<body>

<div id = "div1" onmouseover = "toGreen()" onmouseout="toRed()"></div>

</body>

</html>

if语句实现功能

自己练习题目：鼠标点击一个button后会显示div，再点击一下div消失（利用if语句）

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        #div1 {width:100px;height:200px;background:grey;display:none}

    </style>

    <script>

        function showHide(){

            var oDiv = document.getElementById('div1');

            if (oDiv.style.display == 'block') {

            oDiv.style.display = 'none';
            }

             else {

             oDiv.style.display = 'block';
            }

        }

 

    </script>

</head>

<body>

 

<input type = "button" value = "更多" onclick ="showHide()"/>

<div id = "div1" ></div>

</body>

</html>

智能社JavaScript学习笔记第一课

猜你喜欢