前端基本功：JS必记知识点+案例（四）循环、数组

面试常考点TAB切换案例（重点面试案例的复习）：

tab复习.gif

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
         *{margin: 0;padding: 0;}
         ul{list-style: none;}
         .box{
              width:350px;
              height:300px;
              border:1px solid #ccc;
              margin:100px auto;
            }
         .mt span{
              display: inline-block;
              width: 80px;
              height: 30px;
              background-color: pink;
              text-align: center;
              line-height: 30px;
              cursor: pointer;
            }
           .mt span.current{
                background-color: purple;
            }
           .mb li{
                 width: 100%;
                 height:270px;
                 background-color: purple;
                 display:none;  
            }
           .mb li.show{
                  display:block;
            }
    </style>
    <script>
           window.onload= function(){
                var spans = document.getElementsByTagName("span");//得到所有的span
                var lis = document.getElementsByTagName("li");//得到所有li
                for(var i=0;i<spans.length;i++)
                {
                      spans[i].index = i;
                      spans[i].onmouseover = function(){
                             //清除所有的span类
                             //清除所有的li 的类
                             for(var j=0;j<spans.length;j++)
                             {
                                spans[j].className ="";
                                lis[j].className ="";
                             }
      
                             //留下自己
                             this.className ="current";
                             //this.index 是span 的索引号 被li使用了
                             lis[this.index].className ="show"
                       }
                }
         }
    </script>
</head>
<body>
<div class="box">
      <div class="mt">
            <span class="current">新闻</span>
            <span>体育</span>
            <span>娱乐</span>
            <span>八卦</span>
      </div>
      <div class="mb">
            <ul>
                  <li class="show">新闻模块</li>
                  <li> 体育模块</li>
                  <li> 娱乐模块</li>
                  <li>八卦模块</li>
             </ul>
      </div>
</div>
</body>
</html>

以上方法仅限一个TAB栏的使用。而多个TAB栏时就需要封装如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
         *{margin: 0;padding: 0;}
         ul{list-style: none;}
         .box{
              width:350px;
              height:300px;
              border:1px solid #ccc;
              margin:100px auto;
            }
         .mt span{
              display: inline-block;
              width: 80px;
              height: 30px;
              background-color: pink;
              text-align: center;
              line-height: 30px;
              cursor: pointer;
            }
           .mt span.current{
                background-color: purple;
            }
           .mb li{
                 width: 100%;
                 height:270px;
                 background-color: purple;
                 display:none;  
            }
           .mb li.show{
                  display:block;
            }
    </style>
    <script>
           window.onload= function(){
                // 要想多个盒子不相互影响，我们可以通过id给他们分开
                //封装 tab栏切换函数
                function tab(obj){
                    var target = document.getElementById(obj);
                    var spans = target.getElementsByTagName("span");
                    var lis = target.getElementsByTagName("li");
                    for(var i=0;i<spans.length;i++)
                    {
                    spans[i].index = i;
                    spans[i].onmouseover = function(){
                          for(var j=0;j<spans.length;j++)
                          {
                                spans[j].className = "";
                                lis[j].className = "";
                           }
                           this.className="current";
                           lis[this.index].className ="show";
                       }
                    }
                 }
                      tab("one");
                      tab("two");
                      tab("three")             
         }
    </script>
</head>
<body>
<div class="box" id="one">
      <div class="mt">
            <span class="current">新闻</span>
            <span>体育</span>
            <span>娱乐</span>
            <span>八卦</span>
      </div>
      <div class="mb">
            <ul>
                  <li class="show">新闻模块</li>
                  <li> 体育模块</li>
                  <li> 娱乐模块</li>
                  <li>八卦模块</li>
             </ul>
      </div>
</div>

<div class="box" id="two">
      <div class="mt">
            <span class="current">新闻</span>
            <span>体育</span>
            <span>娱乐</span>
            <span>八卦</span>
      </div>
      <div class="mb">
            <ul>
                  <li class="show">新闻模块</li>
                  <li> 体育模块</li>
                  <li> 娱乐模块</li>
                  <li>八卦模块</li>
             </ul>
      </div>
</div>

<div class="box" id="three">
      <div class="mt">
            <span class="current">新闻</span>
            <span>体育</span>
            <span>娱乐</span>
            <span>八卦</span>
      </div>
      <div class="mb">
            <ul>
                  <li class="show">新闻模块</li>
                  <li> 体育模块</li>
                  <li> 娱乐模块</li>
                  <li>八卦模块</li>
             </ul>
      </div>
</div>
</body>
</html>

两个小循环

◆循环 for(初始化; 条件; 增量){}
◆while() 当 do {} while()
◆ while(条件) { 语句 }

案例：从1+100是 5050

<!DOCTYPE html><html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    // 从1+100是 5050
    var sum = 0,sum1 = 0,sum2=0;
    //for循环
    for(var i= 1;i<=100;i++)
    {
        sum+=i;
    }
    console.log(sum);

    /*while(条件)
    {
        语句;
    }*/ 
    var j =1;
    while(j<=100)
    {
        sum1+=j;
        j++;
    }
    console.log(sum1);

//do循环
    var k =1;
    do{
        sum2 += k;
        k++;
    }
    while(k<=100);
    console.log(sum2);
</script>
</body>
</html>

do while 至少执行一次 while 不一定

多分支语句 switch

switch 跟 if else if 和 else if else 几乎一样的但是switch效率更好。
作用其实就是：多选1 ·· 从多个里面选1个。

语法格式：
switch(参数)
{
case 参数1：
语句;
break; 退出的意思
case 参数2：
语句;
break; 退出的意思

........
default: 默认的
语句;
}

案例：查询物品价格

查询价格.gif

源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload = function(){
               //获取元素
             var txt = document.getElementById("txt");
             var btn= document.getElementById("btn");
             btn.onclick= function(){
                    var val = txt.value;
                    switch(val)
                    {
                         case"苹果":
                               alert("苹果的价格是：5元");
                               break;
                          case"香蕉":
                               alert("香蕉的价格是：2元");
                               break;
                            case"梨子":
                               alert("梨子的价格是：1.5元");
                               break;
                              case"大白菜":
                               alert("大白菜的价格是：5元");
                               break;
                               default :
                                    alert("今天没进货"); 
                     }
              }
        }
   </script>
</head>
<body>
<input type ="text" id="txt"/> <button id="btn">查询价格</button>
</body>
</html>

下拉菜单的事件 onchange

sele.onchange = function(){}
当改变的时候事件

案例：下拉菜单换肤

下拉菜单换肤.gif

案例所需素材：链接：http://pan.baidu.com/s/1gfJnD4Z 密码：pemq

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
         body{
               background:url("images/chun.jpg") no-repeat;
          }
    </style>
    <script>
          window.onload = function(){
                var sele = document.getElementById("sele");
                sele.onchange = function(){
                     //alert(this.value);
                    switch(this.value)
                    {
                      case"1":
                            document.body.style.backgroundImage ="url(images/chun.jpg) no-repeat";
                            break;
                       case"2":
                          document.body.style.backgroundImage="url(images/xia.jpg)";
                             break;
                       case"3":
                            document.body.style.backgroundImage="url(images/qiu.jpg)";
                              break;
                        case"4":
                             document.body.style.backgroundImage="url(images/dong.jpg) ";
                               break;
                     }
                 }
           }
    </script>
</head>
<body>
<select name="" id="sele">
      <option value="1">春意绵绵</option>
      <option value="2">夏日炎炎</option>
      <option value="3">秋风瑟瑟</option>
      <option value="4">冬雪皑皑</option>
</select>

</body>
</html>

案例：腾讯网的星座运势

星座运势

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
         .box{
              width:350px;
              height:250px;
              border:1px solid #ccc;
              margin:100px auto;
         }
         .dt{
             padding-left:10px
             line-height:35px;
             font-weight:700;
             color:#036;
          }
          .dd-t{
               overflow:hidden;
          }
          .dd{
             padding:10px;
         }
          .icon{
              width:50px;
              height:50px;
              float:left;
              background:url(images/icon.png) no-repeat;
          }
          .yunshi{
               width:80px;
               height:13px;
               display:inline-block;
               background:url(images/yunshi.png) no-repeat;
               position:relative;
          }
          .star{
               width:60px;
               height:13px;
               position:absolute;
               top:0;
               left:0;
               background:url(images/yunshi.png) no-repeat left bottom;
          }
    </style>
    <script>
    window.onload=function(){
        //获取元素
        function $(id){return document.getElementById(id);}
        var arr=[10,9,6,9,7];// 存放运势
        $("stAr").style.width = arr[0]*8+"px";//第一个白羊座的运势
        var txtArr =["白羊座的内容","金牛座的内容","双子座的内容"] ;            //我的盒子一共是80像素 一共分成10份 每一份8像素
        var sele = document.getElementById("sele");
        sele.onchange= function(){
            //alert(this.value);
            $("ico").style.backgroundPosition="0"+(-this.value*50) + "px";            //索引号乘以 50 的关系 但是 是负数
            $("stAr").style.width = arr[this.value]* 8 +"px";
            //索引号乘以50的关系 但是 是负数
            $("content").innerHTML = txtArr[this.value];
             }
          }
      </script>
</head>
<body>
<div class="box">
    <div class="dt">星座运势</div>
     <div class="dd">
            <div class="dd-t">
                  <div class="icon" id="ico"></div>
                  <div class="right">
                        <select name="" id="sele">
                              <option value="0">白羊座 03.21-04.19</option>
                              <option value="1">金牛座 04.20-05.29</option>                                   
                              <option value="2">双子座 05.30-06.29</option>
                        </select>
                        <div>今日运势：
                               <span class="yunshi">
                                    <span class="star"  id="stAr"></span>
                               </span>
                         </div>
                        </div>
                  </div>
     </div>
     <div class="dd-b" id="content">
     今天你的直觉灵感非常丰富，能够帮你洞悉到很多真相，消化心中的一些秘密心事。然而今天你也心情...[详细]</div>
     </div>
</div>
</body>
</html>

数组常用方法

◆ push、pop
◆shift、unshift
◆concat、join、split

添加数组

var arr =[1,3,5];

push() ★★★★★ 后面推进去

push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
push 推进去放
var arr =[1,3,5] → arr.push(7) → 结果变成 : [1,3,5,7];

2.unshift() 从数组的前面放入

unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度
var arr = [1,3,5] → arr.unshift(0) → 结果变成 [0,1,3,5]

注意：var dom = [1,3,5];
console.log(dom.push(7)); // 返回的是数组的长度 4

删除数组内容

pop() 删除最后一个元素

pop() 移除最后一个元素
返回值是返回最后一个值
var arr = [1,3,5] → arr.pop() → 结果 [1,3]

shift() 删除第一个元素

shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值
var arr = [1,3,5] → arr.shift() → 结果 [3,5]

连接两个数组

concat()
该方法用于连接两个或多个数组。它不会改变现有的数组，而仅仅会返回被连接数组的一个副本
var aa = [1,3,5]; var bb = [“a”,”b”,”c”];

aa.concat(bb);

结果：  [1,3,5,“a”,”b”,”c”];

join() 把数组转换为字符串

join()
作用是将数组各个元素是通过指定的分隔符进行连接成为一个字符串。

语法
arrayObject.join(separator)
数组名.join(符号)

数组转换为字符串
参数 separator 可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。

var arr = [1,2,3];
console.log(arr.join(“-”)) 结果就是： 1-2-3 字符串

把字符串转换为数组 split()

join <=> split
split() 方法用于把一个字符串分割成字符串数组

语法
stringObject.split(separator,howmany)

参数 separator 可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。
howmany 可选。该参数可指定返回的数组的最大长度

两个符号一致

上述源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    var arr =[1,3,5];
    arr.push(7,9);// 把7 9放到arr数组后面
    console.log(arr);//验证

    /*对比测试*/
    var dom=[1,3,5];
    console.log(dom.push(7)); //返回的是数组长度 4

    //前面放入
    var demo =[1,3,5];
    demo.unshift(0);
    console.log(demo);

    //删除组
    var arrdele = [1,3,5];
    console.log(arrdele.pop()); //返回的是5
    arrdele.pop(); // 删除3
    console.log(arrdele);//结果是1

    //连接
    var aa= [1,3,5]; var bb=["a","b"];
    console.log(aa.concat(bb));//结果是[1,3,5,"a","b"]

    // 数组转换为字符
    var txt= ["aa","bb","cc"];
    console.log(txt.join("-")); //结果是 aa-bb-cc
    console.log(txt); //数组本身不会改变

     //字符转换为数组
    var txt = "aa,bb,cc";
    console.log(txt.split(","));


</script>

</body>
<html>

最后编辑于：2017.12.04 05:14:29

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 199,830评论 5赞 468
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 83,992评论 2赞 376
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 146,875评论 0赞 331
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 53,837评论 1赞 271
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 62,734评论 5赞 360
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,091评论 1赞 277
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,550评论 3赞 390
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,217评论 0赞 254
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,368评论 1赞 294
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,298评论 2赞 317
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,350评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,027评论 3赞 315
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,623评论 3赞 303
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,706评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,940评论 1赞 255
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,349评论 2赞 346
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 41,936评论 2赞 341

前端基本功：JS必记知识点+案例（四）循环、数组

面试常考点TAB切换案例（重点面试案例的复习）：

两个小循环

多分支语句 switch

下拉菜单的事件 onchange

数组常用方法

添加 数组

删除数组内容

连接两个数组

join() 把数组转换为字符串

把字符串转换为数组 split()

上述源码：

推荐阅读更多精彩内容

添加数组