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 ...

随机推荐

SSIS 延迟验证（DelayValidation）
验证是一个事件,该事件在Package执行时,第一个被触发,验证能够避免SSIS引擎执行一个有异常的Package或Task.延迟验证(DelayValidation)是把验证操作延迟到Package ...
Java想要学到精通，这几点一定要掌握
时代更新换代速度如此之快,尤其是深处互联网行业的java程序员,技术更需要不断更新,只有及时充电,才能不被市场淘汰.千锋Java培训老师今天为大家分享Java程序员学习的6个小技巧. 1.书籍永远是知 ...
论python3下“多态”与“继承”中坑
1.背景: 近日切换到python3后,发现python3在多态处理上,有一些比较有意思的情况,特别记载,供大家参考... 以廖老师的python3教程中的animal 和dog的继承一节的代码做例子 ...
获取tranform参数函数的封装
平时我们都会去获取元素的各种属性值,例如宽高等等的值!但是tranform是个让人很头疼的点,获取出来的是矩阵,耐何线性代数学的并不是那么6啊. 解决方法的思路:只能采取有点取巧的方法,在我们设置的时 ...
个人项目--“”小鱼企业级开发系统“”Svn地址分享
由于精力有限,博主现在只维护这一个系统,会不时的更新代码提交. ""小鱼企业级开发系统""的Svn地址:http://code.taobao.org/svn/S ...
Offcanvas 自适应窗口示例
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8&qu ...
使用socket搭建一个网络聊天室
#服务器端import socket import threading #创建一个TCP端 sock = socket.socket(socket.AF_INET, socket.SOCK_STREA ...
webpack编译流程漫谈
前言 weback在web构建工具的激烈竞争中逐渐脱引而出. 无论是编译速度.报错提示.可扩展性等都给前端开发者耳目一新的感觉.本篇文章是个人对webpack的一点小研究总结. webpack在开发者 ...
JavaScript splice() 方法
定义和用法 splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目. 注释:该方法会改变原始数组. 例子 1 在本例中,我们将创建一个新数组,并向其添加一个元素: <script ...
将项目（代码）从GitHub上克隆（下载）到本地仓库
要将项目从GitHub上克隆到本地,首先你得下载并安装好git for window. 下载地址:http://www.xp510.com/xiazai/Application/other/30988 ...

javaScript补充

javaScript补充的更多相关文章

随机推荐

热门专题