智能社JavaScript学习笔记第一课

时间:2022-09-14 20:13:50

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>