js笔记 3.11

最新推荐文章于 2024-08-14 09:08:45 发布

qq_31406573

最新推荐文章于 2024-08-14 09:08:45 发布

阅读量158

点赞数

分类专栏：笔记文章标签： html css js

本文链接：https://blog.csdn.net/qq_31406573/article/details/50853662

版权

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.js可以干什么
通俗的说，一个页面，有了骨骼（html），血肉皮肤（css），那是不是还需要动作呢，就像生物体一样，这里的【动作】就是由【js代码】实现的。举个栗子，当你把鼠标移到这里的博客管理上时，
这里写图片描述
点击一下，会出现这样一个长条,那么这点击一下出现长条的这个动作，就是用js代码来实现的啦。

2.一个热身代码，是从妙味那里看到的。

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>pra</title>
        <style>
            li{
                list-style:         none;
            }
            .lis{               
                width:              80px;
                height:             30px;
                border:             1px solid #333;
                position:           relative;
            }
            .lis a{
                display:            block;
                line-height:        30px;
                text-align:         center;
                text-decoration:    none;
                color:              #000;
                background:         #f1f1f1;
            }
            ul ul{
                padding:            0;
                margin:             0;
                width:              140px;
                border:             1px solid #000;
                position:           absolute;
                top:                30px;
                left:               -1px;
                display:            none;
            }
            ul ul li{
                text-align:         center;
                line-height:        30px;
                background:         yellow;
            }

        </style>

    </head>
    <body>
        <ul>
            <li id="lis" class="lis">
                <a id="link" href="#">微博</a>
                <ul id="ul1">
                    <li>私信</li>
                    <li>评论</li>
                    <li>@我</li>
                </ul>
            </li>
        </ul>
    <script type="text/javascript">
        var li = document.getElementById('lis');
        var ul = document.getElementById('ul1');
        /*通过ID名称来获取元素
            document get element by id 'link'
            [doucument的意思是在整个文档范围内，get是找，找一个id为link的元素]
      js语句：      document.getElementById('link')
             [注意大小写]
*/
        li.onmouseover = show;
        li.onmouseout = hidden;
        function show(){
            ul1.style.display = 'block';  /*要加引号！ 意思是把ul1的样式里面的display变为block*/
            document.getElementById('link').style.background = 'red';
            /*这里是让鼠标移动上去时，背景变为红色，而且鼠标移出时红色还保持，但若是用hover伪类则只能是鼠标移上去是红色，鼠标移出时红色消失。而用js可以让红色想什么时候消失就什么时候消失！*/
        }
        function hidden(){
            ul.style.display = 'none';
            /*实现鼠标从lis私信列表项上移走时(就好像是从微博那个a链接上移走的)，将私信列表隐藏的效果！如果上面的onmouseout的元素变为微博a链接link元素时，则当鼠标离开a链接而没离开私信列表的范围时，那个私信列表却会消失，没法点击列表项中的元素，这是不合理的*/
        }
    </script>
    </body>
</html>

3.什么是事件？
鼠标事件，键盘事件，系统事件，表单事件,自定义事件….

 鼠标事件：
 onclick
 onmouseover
 onmouseout
 onmousedown
 onmouseup
 onmousemove [就像是鼠标抚摸事件]
 ......

 onload     [加载完以后执行]
 window.onload = 事情
 如何添加事件：
           元素.onmouseover
           [.相当于的,元素的鼠标移动上去事件]
 函数：可以理解为命令，做一些事
           function  abc(){       //肯定不会主动执行！
                .....
           }
           [abc是函数的名字]
           1.直接调用：abc();   [会立即执行]
           2.事件调用：元素.事件 = 函数名；
              eg: oDiv.onclick = abc;   [abc后不能加括号！这句的意思是当点击这个oDiv元素时，函数abc会执行]    
           3.function (){}   [匿名函数]
              元素.事件 = function (){.....};  [这里可以不用写函数名]

 测试(逐行测试)：
           alert(1);    [带一个确定按钮的警告框]
           alert('ok');    ['ok'  是字符串]
           alert("ok")   [双引号也可以]

 变量：
           var li = doucument.getElementById(''lis);
           [此时li代表这个获取的元素，不需要每次用这个元素时都要写后面这一长串]
            var num = 123;
           var name ='leo';

qq_31406573

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js笔记 3.11

1.js可以干什么通俗的说，一个页面，有了骨骼（html），血肉皮肤（css），那是不是还需要动作呢，就像生物体一样，这里的【动作】就是由【js代码】实现的。举个栗子，当你把鼠标移到这里的博客管理上时，点击一下，会出现这样一个长条,那么这点击一下出现长条的这个动作，就是用js代码来实现的啦。 2.一个热身代码，是从妙味那里看到的。<!DOCT
复制链接

扫一扫