JS进阶1

时间：2022-02-10 16:44:50

一 表格案例

二 onchange事件（二级联动）

三 onmouse事件

四 事件委派

五  作用域链

一表格案例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<button class="selectAll">全选</button>

<button class="reverse">反选</button>

<button class="cancel">取消</button>

<hr>

<table border="">

    <tr>

        <td><input type="checkbox" class="check"></td>

        <td>111</td>

        <td>111</td>

    </tr>

    <tr>

        <td><input type="checkbox" class="check"></td>

        <td>111</td>

        <td>111</td>

    </tr>

    <tr>

        <td><input type="checkbox" class="check"></td>

        <td>111</td>

        <td>111</td>

    </tr>

    <tr>

        <td><input type="checkbox" class="check"></td>

        <td>111</td>

        <td>111</td>

    </tr>

</table>

<script>

//     方式1

    var ele_selectAll=document.getElementsByClassName("selectAll")[0];

    var ele_reverse=document.getElementsByClassName("reverse")[0];

    var ele_cancel=document.getElementsByClassName("cancel")[0];

    var ele_input=document.getElementsByClassName("check");

    ele_selectAll.onclick=function () {

          for(var i=0;i<ele_input.length;i++){

              ele_input[i].checked="checked"

          }

    };

    ele_cancel.onclick=function () {

         for(var i=0;i<ele_input.length;i++){

              ele_input[i].checked=""

          }

    };

    ele_reverse.onclick=function () {

         for(var i=0;i<ele_input.length;i++){

             var ele=ele_input[i];

              if(ele.checked){

                  ele.checked=""

              }

              else {

                  ele.checked="checked"

              }

          }

    };

    // 方式2

//    var eles_button=document.getElementsByTagName("button");

//    var ele_input=document.getElementsByClassName("check");

//    for (var i=0;i<eles_button.length;i++){

//       eles_button[i].onclick=function () {

//           if(this.innerHTML=="全选"){

//             for(var i=0;i<ele_input.length;i++){

//             ele_input[i].checked="checked"

//              }

//           }

//

//           else if (this.innerHTML=="取消"){

//

//           }

//

//           else {

//

//           }

//

//       }

//    }

</script>

</body>

</html>

table案例

二 onchange事件（二级联动）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<form action="">

    <select name="pro" id="s1">

        <option value="">请输入省份</option>

        <option value="hebei">河北省</option>

        <option value="henan">河南省</option>

        <option value="beijing">北京省</option>

    </select>

    <select name="city" id="c1">

       <option value="">请输入城市</option>

    </select>

</form>

<script>

    var arr=[1121,22,344];

    var obj={"username":"Yuan","age":12};

//    console.log(typeof arr);//object

//    console.log(typeof obj);//object

//    console.log(obj["username"]);//Yuan

//    for(var i in arr){

//        console.log(arr[i]);//里面的数字

//        console.log(i);//数组的索引

//    };

//

    for(var i in obj){

        console.log(obj[i]);//相当于字典里的value

        console.log(i);//相当于字典里的key

    };

//

//    var data={"hebei":["保定","石家庄"],"henan":["郑州","开封"],"beijing":["朝阳","昌平"]};

//

//    var select_province=document.getElementById("s1");

//    var select_city=document.getElementById("c1");

//

//    select_province.onchange=function () {

//            // console.log(this.value);

//            var province=this.value;

//            var citys=data[province];

//            // console.log(citys);

//

//            // 清空操作

//            console.log(select_city.options.length);

//            select_city.children.length=1;

//

//            for(var i=0;i<citys.length;i++){

//                var ele_option=document.createElement("option"); // <option></option>

//                ele_option.innerHTML=citys[i];  // <option>郑州</option>

//                ele_option.value=i+1;  // <option value=1>郑州</option>

//

//                select_city.appendChild(ele_option)

//            }

//    }

</script>

</body>

</html>

二级联动

三 onmouse事件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .c1{

            width: 200px;

            height: 200px;

            background-color: #0e90d2;

        }

        .title{

            background-color: goldenrod;

            line-height: 30px;

        }

        .item{

            line-height: 20px;

            background-color: #cccccc;

        }

        .hide{

             display: none;

        }

    </style>

</head>

<body>

<div class="c1"></div>

<div class="box">

    <div class="title">onmouseover</div>

    <div class="con hide">

        <div class="item"><a href="">111</a></div>

        <div class="item"><a href="">222</a></div>

        <div class="item"><a href="">333</a></div>

    </div>

</div>

<script>

//    var ele=document.getElementsByClassName("c1")[0]

//    ele.onmouseover=function () {

//        console.log(1234)

//    };

////    ele.onmouseleave=function () {

////        console.log(666)

////    }

//     ele.onmouseout=function () {

//        console.log(888)

//    }

    var ele_title=document.getElementsByClassName("title")[0];

    var ele_box=document.getElementsByClassName("box")[0];

    ele_title.onmouseover=function () {

        this.nextElementSibling.classList.remove("hide")

    };

    ele_box.onmouseout=function () {

        ele_title.nextElementSibling.classList.add("hide")

    } ;

    ele_box.onmouseleave=function () {

        ele_title.nextElementSibling.classList.add("hide")

    }

 // 1.不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。

// 2.只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。

</script>

</body>

</html>

onmouse事件

四 事件委派

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<ul>

    <li>111</li>

    <li>222</li>

    <li>333</li>

</ul>

<button>Add</button>

<script>

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

    var ele_btn=document.getElementsByTagName("button")[0];

    var ele_ul=document.getElementsByTagName("ul")[0];

////   添加li

    ele_btn.onclick=function () {

        var ele_li=document.createElement("li");

        ele_li.innerHTML=444;

        ele_ul.appendChild(ele_li)

    };

//

//    绑定事件

//    for(var i=0;i<eles_li.length;i++){

//        eles_li[i].onclick=function () {

//            alert(this.innerHTML)

//        }

//    }

    // 事件委派

    ele_ul.addEventListener("click",function (e) {

//        alert(123)

//        console.log(e.target); // 标签

//        console.log(e.target.tagName); // 标签名称

//

        if(e.target.tagName=="LI"){

            console.log(e.target.innerHTML)

        }

    })

</script>

</body>

</html>

事件委派

五  作用域链

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<script>

    var s=12;

    function f(){

        alert(s);//定义未赋值返回时undefind和无返回值的也是undefind//undefind

        var s=12;//12因为在编译时有s但是不会问它的赋值情况。

        alert(s);//12

    }

    f();//先编译在执行如果局部作用域没有赋值python中会报错；而js中出返回undefind

</script>

</body>

</html>

Js作用域链

相关文章