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

作者: 越IT | 来源:发表于2016-11-02 22:28 被阅读180次

面试常考点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>

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

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

两个小循环

多分支语句 switch

下拉菜单的事件 onchange

数组常用方法

添加数组

删除数组内容

连接两个数组

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

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

上述源码：

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

前端

从零开始学前端

JavaScript学习笔记

web前端

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

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

两个小循环

多分支语句 switch

下拉菜单的事件 onchange

数组常用方法

添加 数组

删除数组内容

连接两个数组

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

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

上述源码：

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

前端

从零开始学前端

JavaScript学习笔记

web前端

添加数组