javaScript补充

一、字符串常用的方法

obj.length 长度

obj.trim() 移除前后空白

obj.trimLeft() 移除前空白

obj.trimRight() 移除后空白

obj.charAt(n) 返回字符串中的第n个字符

obj.concat(value, …) 拼接

obj.indexOf(substring,start) 子序列位置

obj.substring(from, to) 根据索引获取子序列

obj.slice(start, end) 切片

obj.toLowerCase()　大写

obj.toUpperCase()　小写

obj.split(delimiter, limit)　分割

二、数组常用的方法

1.obj.length 数组的大小

2.obj.push(ele) 尾部追加元素

3.obj.pop() 尾部获取一个元素

4.obj.unshift(ele)头部插入元素

5.obj.shift() 头部移出元素

6.obj.reverse() 反转

7.obj.join() 将数组元素链接起来构建一个字符串

8.obj.concat(val...) 连接数组

9.obj.sort() 对数组元素进行排序

三、属性方法

 var s="hello world";

        console.log(s.length);

        console.log(s.toUpperCase());

        console.log(s.charAt(3));// 通过索引获取字符

        console.log(s.indexOf("w"));// 通过字符获取索引

        console.log(s.substr(1,3));// 字符串截断，substr(起始位置,截断长度)

        console.log(s.substring(1,3));// 字符串截断，substr(起始位置,截断位置)

        console.log(s.slice(1,3));// 字符串截断，substr(起始位置,截断位置)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

          .left{

              width: 20%;

              height: 500px;

              float: left;

              background-color: wheat;

          }

          .right{

              float: left;

              width: 80%;

              height: 500px;

              background-color: lightgray;

          }

           .title{

               text-align: center;

               line-height: 40px;

               background-color: #0e90d2;

               color: white;

           }

        .item{

            padding: 10px;

        }

        .hide{

            display: none;

        }

    </style>

</head>

<body>

<div class="outer">

      <div class="left">

           <div class="item">

               <div class="title">菜单一</div>

               <ul class="con">

                   <li>111</li>

                   <li>111</li>

                   <li>111</li>

               </ul>

           </div>

          <div class="item">

               <div class="title">菜单二</div>

               <ul class="con hide">

                   <li>222</li>

                   <li>222</li>

                   <li>222</li>

               </ul>

           </div>

          <div class="item">

               <div class="title">菜单三</div>

               <ul class="con hide">

                   <li>333</li>

                   <li>333</li>

                   <li>333</li>

               </ul>

           </div>

      </div>

      <div class="right"></div>

</div>

<script>

    var eles_title=document.getElementsByClassName("title");

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

         eles_title[i].onclick=function(){

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

             for(var j=0;j<eles_title.length;j++){

                 if (eles_title[j]!=this){

                     eles_title[j].nextElementSibling.classList.add("hide")

                 }

             }

         }

    }

</script>

</body>

</html>

左侧菜单

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

<script>

function Focus(){

    var input=document.getElementById("ID1");

    if (input.value=="请输入用户名"){

        input.value="";

    }

}

function Blurs(){

    var ele=document.getElementById("ID1");

    var val=ele.value;

    if(!val.trim()){

        ele.value="请输入用户名";

    }

}

</script>

</head>

<body>

    <input id="ID1" type="text" value="请输入用户名" onblur="Blurs()" onfocus="Focus()">

</body>

</html>

搜索框

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .back{

            background-color: white;

            height: 2000px;

        }

        .shade{

            position: fixed;

            top: 0;

            bottom: 0;

            left:0;

            right: 0;

            background-color: grey;

            opacity: 0.4;

        }

        .hide{

            display: none;

        }

        .models{

            position: fixed;

            top: 50%;

            left: 50%;

            margin-left: -100px;

            margin-top: -100px;

            height: 200px;

            width: 200px;

            background-color: wheat;

        }

    </style>

</head>

<body>

<div class="back">

    <input class="c" type="button" value="click">

</div>

<div class="shade hide handles"></div>

<div class="models hide handles">

    <input class="c" type="button" value="cancel">

</div>

<script>

    var eles=document.getElementsByClassName("c");

    var handles=document.getElementsByClassName("handles");

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

        eles[i].onclick=function(){

            if(this.value=="click"){

                for(var j=0;j<handles.length;j++){

                    handles[j].classList.remove("hide");

                 }

            }

            else {

                for(var j=0;j<handles.length;j++){

                    handles[j].classList.add("hide");

                }

            }

        }

    }

</script>

</body>

</html>

模态对话框

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

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

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

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

<hr>

<table class="server_table" border="2px" cellspacing="2px">

    <tr>

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

        <td>111</td>

        <td>111</td>

        <td>111</td>

    </tr>

    <tr>

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

        <td>222</td>

        <td>222</td>

        <td>222</td>

    </tr>

    <tr>

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

        <td>333</td>

        <td>333</td>

        <td>333</td>

    </tr>

    <tr>

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

        <td>444</td>

        <td>444</td>

        <td>444</td>

    </tr>

</table>

<script>

/*

    var ele_all=document.getElementsByClassName("select_all")[0];

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

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

    var input_arr=document.getElementsByClassName("item");

    ele_all.onclick=function(){

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

              console.log(input_arr[i]);

              var input=input_arr[i];

              input.checked=true;

          }

    };

     ele_cancel.onclick=function(){

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

              console.log(input_arr[i]);

              var input=input_arr[i];

              input.checked=false;

          }

    };

    ele_reverse.onclick=function(){

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

              console.log(input_arr[i]);

              var input=input_arr[i];

              if(input.checked){

                  input.checked=false;

              }

              else{

                  input.checked=true;

              }

          }

    };

*/

    var input_arr=document.getElementsByClassName("item");

    var button_arr=document.getElementsByTagName("button");

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

        button_arr[i].onclick=function(){

            for (var j=0;j<input_arr.length;j++){

                 var inp=input_arr[j]

                 if(this.innerText=="全选"){

                     console.log("ok");

                 inp.checked=true;

             }

            else if(this.innerText=="取消"){

                  inp.checked=false;

             }

            else {

                 if(inp.checked){

                     inp.checked=false;

                 }else {

                     inp.checked=true;

                 }

             }

            }

        }

    }

</script>

</body>

</html>

表格案例（全选，反选，取消）

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>tab</title>

  <style>

    *{margin:0; padding:0; list-style:none;}

    body{

        font-family: "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", "\9ED1\4F53", Arial, sans-serif;

    }

    h3{

        text-align: center;

        color:darkcyan;

        margin-top: 30px;

        letter-spacing: 5px;

    }

    .box{

      width: 1000px;

      margin:50px auto 0px;

    }

    #title{

      line-height: 40px;

      background-color: rgb(247,247,247);

      font-size: 16px;

      font-weight: bold;

      color: rgb(102,102,102);

    }

    #title span{

      float: left;

      width: 166px;

      text-align: center;

    }

    #title span:hover{

      /*color: black;*/

      cursor: pointer;

    }

    #content{

      margin-top: 20px;

    }

    #content li{

      width: 1050px;

      display: none;

      background-color: rgb(247,247,247);

    }

    #content li div{

      width: 156px;

      margin-right: 14px;

      float: left;

      text-align: center;

    }

    #content li div a{

      font-size: 14px;

      color: black;

      line-height: 14px;

    /*  float: left;*/

    display: inline-block;

      margin-top: 10px;

    }

    #content li a:hover{

      color: #B70606;

    }

    #content li div span{

        font-size: 16px;

        line-height: 16px;

        /*float: left;*/

        display: block;

        color: rgb(102,102,102);

        margin-top: 10px;

      }

    #content img{

      float: left;

      width: 155px;

      height: 250px;

    }

    #title .select{

      background-color: #2459a2;

      color: white;

        border-radius: 10%;

    }

    #content .show{

      display: block;

    }

    .show span{

        color: red!important;

        font-size: 30px;

    }

  </style>

</head>

<body>

    <h3 id="wel">京东商城欢迎您</h3>

    <!--  direction="right up down left" -->

<!--  behavior：滚动方式(包括3个值：scroll、slide、alternate) -->

<!--  说明：scroll：循环滚动，默认效果；slide：只滚动一次就停止；alternate：来回交替进行滚动。 -->

<!--  scrollamount="5" 滚动速度 -->

<marquee behavior="scroll" direction="right">欢迎您苑昊先生</marquee>

    <script>

    function test(){

        var mywel = document.getElementById("wel");

        var content = mywel.innerText;

        var f_content = content.charAt(0);

        var l_content = content.substring(1,content.length);

        var new_content = l_content + f_content;

        mywel.innerText = new_content;

    }

    // setInterval("test();", 500);

</script>

    <div class="box">

      <p id="title">

        <span class="select">家用电器</span>

        <span>家具</span>

        <span>汽车</span>

        <span>食品</span>

        <span>女鞋</span>

        <span>医疗保健</span>

      </p>

      <ul id="content">

        <li class="show">

          <div><img src="https://img10.360buyimg.com/n1/s450x450_jfs/t4786/325/2470647304/119102/9e1a4ed5/59005841Nd786a8df.jpg" alt="冰箱"><a href="#">容声(Ronshen)冰箱</a><span>价格:5600</span></div>

          <div><img src="https://img12.360buyimg.com/n1/s450x450_jfs/t3037/347/1290968859/201366/7c1028a0/57c00194N9d0a54c6.jpg" alt="洗衣机"><a href="#">海尔洗衣机</a><span>价格:5400</span></div>

          <div><img src="https://img11.360buyimg.com/n1/jfs/t3289/128/2393835119/236360/af1d283b/57e0f300N53dde603.jpg" alt="电饭煲"><a href="#">福库(CUCKOO)电饭煲</a><span>价格:3999</span></div>

          <div><img src="https://img13.360buyimg.com/n1/jfs/t3235/137/2361713777/152258/a6908440/57e098c2N44a90a5d.jpg" alt="智能电视"><a href="#">三星智能电视</a><span>价格:8999</span></div>

          <div><img src="https://img10.360buyimg.com/n1/jfs/t2053/101/1391591157/215066/572e131b/5696ee9bN2376492d.jpg" alt="净水器"><a href="#">净水器</a><span>价格:1300</span></div>

          <div><img src="https://img14.360buyimg.com/n1/jfs/t3175/78/2357430273/262835/9a8e7f65/57e0a3e9Nbda39dd2.jpg" alt="空气净化器"><a href="#">空气净化器</a><span>价格:5300</span></div>

        </li>

        <li>

          <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙发"><a href="#">沙发</a><span>价格:2900</span></div>

          <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙发"><a href="#">沙发</a><span>价格:2900</span></div>

          <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙发"><a href="#">沙发</a><span>价格:2900</span></div>

          <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙发"><a href="#">沙发</a><span>价格:2900</span></div>

          <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙发"><a href="#">沙发</a><span>价格:2900</span></div>

          <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙发"><a href="#">沙发</a><span>价格:2900</span></div>

        </li>

        <li>

          <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="长安汽车"><a href="#">长安汽车</a><span>价格:12900</span></div>

          <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="长安汽车"><a href="#">长安汽车</a><span>价格:12900</span></div>

          <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="长安汽车"><a href="#">长安汽车</a><span>价格:12900</span></div>

          <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="长安汽车"><a href="#">长安汽车</a><span>价格:12900</span></div>

          <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="长安汽车"><a href="#">长安汽车</a><span>价格:12900</span></div>

          <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="长安汽车"><a href="#">长安汽车</a><span>价格:12900</span></div>

        </li>

        <li>

          <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉兴粽子"><a href="#">嘉兴粽子</a><span>价格:1</span></div>

          <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉兴粽子"><a href="#">嘉兴粽子</a><span>价格:1</span></div>

          <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉兴粽子"><a href="#">嘉兴粽子</a><span>价格:1</span></div>

          <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉兴粽子"><a href="#">嘉兴粽子</a><span>价格:1</span></div>

          <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉兴粽子"><a href="#">嘉兴粽子</a><span>价格:1</span></div>

          <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉兴粽子"><a href="#">嘉兴粽子</a><span>价格:1</span></div>

        </li>

        <li>

          <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>价格:439</span></div>

          <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>价格:439</span></div>

          <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>价格:439</span></div>

          <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>价格:439</span></div>

          <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>价格:439</span></div>

          <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>价格:439</span></div>

        </li>

        <li>

          <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="汇仁 肾宝片"><a href="#">汇仁 肾宝片</a><span>价格:322</span></div>

          <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="汇仁 肾宝片"><a href="#">汇仁 肾宝片</a><span>价格:322</span></div>

          <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="汇仁 肾宝片"><a href="#">汇仁 肾宝片</a><span>价格:322</span></div>

          <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="汇仁 肾宝片"><a href="#">汇仁 肾宝片</a><span>价格:322</span></div>

          <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="汇仁 肾宝片"><a href="#">汇仁 肾宝片</a><span>价格:322</span></div>

          <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="汇仁 肾宝片"><a href="#">汇仁 肾宝片</a><span>价格:322</span></div>

        </li>

      </ul>

    </div>

    <script>

      var title=document.getElementById('title');

      var content=document.getElementById('content');

      var category=title.getElementsByTagName('span');

      var item=content.getElementsByTagName('li');

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

          category[i].index=i;

          category[i].onclick=function(){

            for (var j = 0; j < category.length; j++) {

              category[j].className='';

              item[j].className='';

            }

            this.className='select';

            item[this.index].className='show';

          }

      }

    </script>

</body>

</html>

跑马灯与tab的切换

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .outer{

            margin: 0 auto;

            background-color: darkgray;

            width: 80%;

            height: 600px;margin-top: 30px;

            word-spacing: -5px;

        }

        #left{

            display: inline-block;

            width: 100px ;

            height: 140px;

            background-color: wheat;

            text-align: center;

        }

        #choice{

            display: inline-block;

            height: 140px;

            background-color: darkolivegreen;

            vertical-align: top;

            padding:0 5px;

        }

        #choice button{

            margin-top: 20px;

        }

         #right{

            display: inline-block;

            width: 100px ;

            height: 140px;

            background-color: wheat;

            text-align: center;

            line-height: 140px;

        }

    </style>

</head>

<body>

<div class="outer">

    <select multiple="multiple" size="5" id="left">

    <option>红楼梦</option>

    <option>西游记</option>

    <option>水浒传</option>

    <option>JinPingMei</option>

    <option>三国演义</option>

</select>

<span id="choice">

    <button id="choose_move"> > </button><br>

    <button id="all_move"> >> </button>

</span>

<select multiple="multiple" size="10" id="right">

    <option>放风筝的人</option>

</select>

</div>

<script>

    var choose_move=document.getElementById("choose_move");

    var all_move=document.getElementById("all_move");

    var right=document.getElementById("right");

    var left=document.getElementById("left");

    var options=left.options;

    choose_move.onclick=function(){

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

             var option=options[i];

             if(option.selected==true){

                   // var news=option.cloneNode(true);

                   // console.log(news);

                   right.appendChild(option);

                   i--;

             }

         }

    };

    all_move.onclick=function(){

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

             var option=options[i];

                   right.appendChild(option);

                   i--;

         };

    };

    /*

   var buttons=document.getElementsByTagName("button");

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

        buttons[i].onclick = function () {

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

                var option = options[i];

                if (this.innerText == ">") {

                    if (option.selected == true) {

                        // var news=option.cloneNode(true);

                        // console.log(news);

                        right.appendChild(option);

                        i--;

                    }

                } else {

                    right.appendChild(option);

                    i--;

                }

            }

        };

    }

   */

</script>

</body>

</html>

select的移动

四、css(层叠样式表)：对html标签的渲染和布局

1 、查找标签

选择器
基本选择器
组合选择器
属性选择器

2 、操作标签（属性操作）
文本操

  innerText 取值操作

块级标签：可以设置长和高，内联标签不可以

3、选择优先级

!important

规则内：
内嵌>id(100)>class(10)>element(1)

if 优先级相同，按加载顺序

4、继承：

优先级级别最低
继承字体相关样式

5、布局关键点：如何能让可以调节长宽的元素（标签）在一行显示

6、float：半脱离文档流
position：fixed ：完全脱离文档流，固定定位以科室窗口为参照物可以使用top left进行定位

position:relative : 不脱离文档流以自己原位置作为参照物，可以使用top left进行定位

position:absolute : 完全脱离文档流, 以已经定位了的父标签作为参照物可以使用top left进行定位

将定位标签设置为absolute，将父级标签设置为定位标签（relative）

五、JS操作

事件操作：

onclick        当用户点击某个对象时调用的事件句柄。

ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。               练习：输入框

onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.

onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.

onkeypress     某个键盘按键被按下并松开。

onkeyup        某个键盘按键被松开。

onload         一张页面或一幅图像完成加载。

onmousedown    鼠标按钮被按下。

onmousemove    鼠标被移动。

onmouseout     鼠标从某元素移开。

onmouseover    鼠标移到某元素之上。

onmouseleave   鼠标从元素离开

onselect       文本被选中。

onsubmit       确认按钮被点击。

事件操作

<!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) {

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

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

//

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

//            console.log("OK")

//        }

//    })

</script>

</body>

</html>

事件委派

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<input id="ID1" type="text" onclick="begin()">

<button onclick="end()">停止</button>

<script>

    function showTime(){

           var nowd2=new Date().toLocaleString();

           var temp=document.getElementById("ID1");

           temp.value=nowd2;

    }

    var ID;

    function begin(){

        if (ID==undefined){

             showTime();

             ID=setInterval(showTime,1000);

        }

    }

    function end(){

        clearInterval(ID);

        ID=undefined;

    }

</script>

</body>

</html>

时间框

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<script>

    var s=12;

    function f(){

        console.log(s);  // undefined

        var s=12;        //

        console.log(s)   //

    }

    f();

</script>

</body>

</html>

作用域链

javaScript补充的更多相关文章

Python学习笔记第二十四周（JavaScript补充）
目录: 一.JS补充 1.函数类型 2.string对象 3.instanceof 4.Array 数组对象 5.Date对象 6.RegExp 正则表达式 7.Math对象二.BOM补充 1.wi ...
python笔记-19 javascript补充、web框架、django基础
一.JavaScript的补充 1 正则表达式 1.1 test的使用 test 测试是否符合条件返回true or false 1.2 exec的使用 exec 从字符串中截取匹配的字符 1.3 ...
JavaScript补充：BOM（浏览器对象模型）
一些公共对象.详细参考手册. 一.Window 对象 Window 对象表示浏览器中打开的窗口. 如果文档包含框架(<frame> 或 <iframe> 标签),浏览器会为 H ...
前端之JavaScript 补充
1. BOM window location.href = "https://www.sogo.com" location.reload() // 重新加载当前页 location ...
CSS补充之--页面布局、js补充，dom补充
CSS补充之--页面布局主站一:(下面是一个大致的模板) <div class="pg-header"> <div style="width: 120 ...
web前端面试试题总结---javascript篇
JavaScript 介绍js的基本数据类型. Undefined.Null.Boolean.Number.String. ECMAScript 2015 新增:Symbol(创建后独一无二且不可变的 ...
JavaScript 相关知识
一.数组 var a = [1,2,3,4]; console.log(a.length); a.push(5); console.log(a); // [1, 2, 3, 4, 5] var r ...
js的几个补充事件
在这里我做几个前面文章当中没有介绍的javascript补充事件 1.onscroll:当元素滚动条滚动时执行的事件: <div class="container"> ...
前端开发面试题-JavaScript（转载）
本文由本文的原作者markyun 收集总结. 介绍js的基本数据类型. Undefined.Null.Boolean.Number.String. ECMAScript 2015 新增:Symbol ...

随机推荐

Mac搭建cocos2dx+Android studio开发环境以及AnySDK的集成
配置环境: mac osx 10.12.6 cocos2dx 3.14 Android studio 2.3 目标: 在mac上配置cocos Android开发环境,接入AnySDK 配置: 1.安 ...
部署java项目到阿里云服务器（centos7版本）
一.搭建环境 1.搭建java环境(64位) 一.准备压缩包,rpm包或者tar包,将其上传到阿里云对应的文件夹(我用的工具是WinSCP,百度一下就有下载资源) 二.若是rpm包,可以通过 rpm ...
mac上安装mongodb数据库教程
1.官网下载压缩包,并解压到当地任一目录.(我的是Documents/develop/mongodb) 2.在mongodb下新建data文件夹,在data下新建db文件夹.(bin和data文件夹在 ...
deeplearning.ai 构建机器学习项目 Week 1 机器学习策略 I 听课笔记
这门课是讲一些分析机器学习问题的方法,如何更快速高效的优化机器学习系统,以及NG自己的工程经验和教训. 1. 正交化(Othogonalization) 设计机器学习系统时需要面对一个问题是:可以尝试 ...
UVA - 12050-Palindrome Numbers
12050 - Palindrome Numbers Time limit: 3.000 seconds A palindrome is a word, number, or phrase that ...
Django REST framework 中 3 种类视图的对比
相较于使用基于方法(function based)的视图,我们更加倾向使用基于类(class based)的视图.接下来,你将看到这是一个强大的模式,是我们能够重用公共的功能,并且,帮我们减少重复的造 ...
HTTP协议----->连接管理
1. TCP连接 1.1 TCP为HTTP提供了一条可靠的比特传输管道. TCP(Transmission Control Protocol)----传输控制协议,是主机对主机层的传输控制协议,提 ...
POJ 3461 Oulipo（——KMP算法）
Description The French author Georges Perec (1936–1982) once wrote a book, La disparition, without t ...
Oracle_rowid_rownum分页
Oracle_rowid_rownum_分页 --rowid select * from account where rowid='AAASR6AAEAAAAJWAAA'; selec ...
数组的创建和各种API
数组的创建方式: 1. 数组直接量 var arr = [] // 创建一个空数组 var arr = [1,2,3,4] // 创建同时初始化元素 2. 实例化对象 var arr=new Arra ...

javaScript补充

javaScript补充的更多相关文章

随机推荐

热门专题