JS 基础

写JS需要注意的：

一次定义，处处使用；一次修改，处处生效。

解决：凡是重复编写的代码块，都要封装为一个方法。

实现一个元素移出视线：

1.display:none;不占文档流

2.opacity:0;占文档流

3.visibility:hidden;占文档流

4.改width height，改为0，可以实现导航慢慢打开

5.定位，改left或者top值。

6.使用白色DIV盖住，然后渐变。

7.margin负值

写JS的步骤：

    1.先写布局

    2.实现原理

    3.了解JS语法

JS事件 ：鼠标事件、键盘事件、系统事件、表单事件、

  • 事件的种类

1、一般事件

2、页面相关事件

3、表单相关事件

4、滚动字幕事件

5、编辑事件

6、数据绑定事件

7、外部事件

   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS基础</title>
    <style>
        ul{
            padding:0;
            margin:0;
        }
        li{
            padding:0;
            margin:0;
            list-style: none;
        }
        .weibo{
            border:1px solid gray;
            width:80px;
            height:30px;
            text-align: center;
            position: relative;
        }
        .weibo a{
            line-height: 30px;
            text-align: center;
            text-decoration: none;
        }
        .weibo>a{
            display: block;
            /*border:1px solid red;*/
            width:80px;
            height:30px;
            background: gainsboro;
        }
        ul ul{
            border:1px solid red;
            position: absolute;
            width:80px;
            left: -1px;
            display:none;

        }
    </style>
</head>
<body>
<ul>
    <li class="weibo" id="lis">
        <a href="#" id="link" >微博</a>
        <ul id="ul1">
            <li><a href="#">私信</a></li>
            <li><a href="#">评论</a></li>
            <li><a href="#">@我</a></li>
        </ul>
    </li>
</ul>
<script type="text/javascript">
    var weibo=document.getElementById("lis");
    var link1=document.getElementById("link");
    var ul1=document.getElementById("ul1");
    weibo.onmouseover=function () {
        ul1.style.display="block";
        link1.style.background="yellow";
    };
    weibo.onmouseout=function () {
        ul1.style.display="none";
        link1.style.background="gainsboro";
    };
</script>
</body>
</html>

　　其中JS部分的代码，也可以放在head标签中，但是需要写成这样子：

<script type="text/javascript">
        window.onload=function () {
            var weibo=document.getElementById("lis");
            var link1=document.getElementById("link");
            var ul1=document.getElementById("ul1");
            weibo.onmouseover=function show() {
                ul1.style.display="block";
                link1.style.background="yellow";
            };
            weibo.onmouseout=function hide() {
                ul1.style.display="none";
                link1.style.background="gainsboro";
            };
        }
    </script>

　　有名字的函数可以增加代码重用，减少多余的代码。

posted @ 2017-04-11 19:40  potato~e-e  阅读(250)  评论(0)    收藏  举报