JS进阶1

一 表格案例

二 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="1">
    <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="0">请输入省份</option>
        <option value="hebei">河北省</option>
        <option value="henan">河南省</option>
        <option value="beijing">北京省</option>
    </select>


    <select name="city" id="c1">
       <option value="0">请输入城市</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{
             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作用域链
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/1a2a/p/7651447.html