菜鸟web笔记

<script>

        /*

            通过类名获取元素：

                获取整个文档中对应的标签：

                语法： document.getElementsByClassName("class名称");

                获取父元素中对应的标签

                语法： 父元素.getElementsByClassName("class名称");

        */

       var oBox = document.getElementsByClassName("box");

       console.log(oBox);

       // 获取父元素

       var oWrap = document.getElementsByClassName("wrap");

       var oA =  oWrap[0].getElementsByClassName("a");

       console.log(oA);

    //    !!!!注意：通过ClassName、TagName 获取到的都是集合，不能直接使用，使用的时候必须通过下标找到对应的标签。

    </script>

<script>

        // 1、获取元素

        var oLi = document.getElementsByTagName("li");

        // 2、加事件

        // 需求：点击第一个li标签，在控制台打印数字1

        oLi[0].onclick = function(){

            // 3、在控制台打印数字1

            console.log("1");

        }

        //  需求：鼠标移入第二个li标签，在控制台打印数字2

        oLi[1].onmouseover = function(){// onmouseover 鼠标移入

            // 3、在控制台打印数字2

            console.log("2");

        }

        //  需求：鼠标移出第3个li标签，在控制台打印数字3

        oLi[2].onmouseout = function(){//onmouseout 鼠标移出

            console.log("3");

        }

        //  需求：鼠标左键按下第4个li标签，在控制台打印数字4

        oLi[3].onmousedown = function(){//onmousedown 鼠标左键按下

            console.log("4");

        }

        // 需求：鼠标左键抬起第5个li标签，在控制台打印数字5

        oLi[4].onmouseup = function(){//onmouseup  鼠标左键抬起

            console.log("5");

        }

    </script>

<!--

        获取  var 变量 = 标签.value

        设置  标签.value = 值；

     -->

    <script>

        // 需求：点击按钮，获取input里面用户输入的值，打印在控制台

        //1、获取元素

        var oInput = document.getElementsByTagName("input")[0];

        var oBtn1 = document.getElementById("btn1");

        var oBtn2 = document.getElementById("btn2");

        // 2、加事件

        oBtn1.onclick = function(){

            // 3、做什么事

            var v = oInput.value;//获取

            console.log(v);

        }

        //需求：点击按钮2，给input设置初始值为“下课了”；

        oBtn2.onclick = function(){

            oInput.value = "下课了";//设置

        }

    </script>