Javascript------流程控制语句

流程控制语句

1.流程控制语句

分类:

  • 顺序结构
  • 分支结构(分支结构、分支语句) :if-else
  • 循环结构 for while

1.1 分支结构

  • if

    if:如果,给一个假设条件,条件成立会执行一个操作

    语法:if(条件){ 条件成立执行的代码 }

    //1.如果有钱(100块),花两块买彩票,中500万
    var money = 99;
    if (money >= 100) {
        console.log("花两块买彩票,中500万");
        console.log("买500万的泡面");
    }
    // 注意:if后面的大括号可以省略,省略了if就只能控制紧跟在后面的第一行语句
    if (money >= 100)
        console.log("花两块买彩票,中500万");
    console.log("买500万的泡面");
    
  • if-else

    语法:if(条件){条件成立时执行的代码}else{ 条件不成立时执行的代码 }

    //1.如果有钱,买中公的股票,没钱买二块彩票,
    if(money>100){
        //条件成立执行的代码
        console.log("买中公的股票");
    }else{
        //条件不成立执行的代码
        console.log("买二块钱彩票,中500万");
    }
    
    • 开关效果:一个标签两种状态

       //1.获取
      var oImg = document.getElementById("img");
      
      //3.找不到判断条件的情况下,自己创造条件
      var tag = true; //true---黑     false--亮  
      
      //2.点击切换图片
      oImg.onclick = function(){
          //判断
          //如果黑,亮     否则就黑
          console.log(oImg.src); //获取的是绝对路径,不建议使用绝对路径的
          //file:///E:/web%E7%AC%AC%E4%BA%8C%E9%98%B6%E6%AE%B5/day03%20%E6%B5%81%E7%A8%8B%E6%8E%A7%E5%88%B6/images/dark.jpg
          if(tag == true){ //黑-----》改成亮的
              oImg.src = "./images/bright.jpg";
              tag = false; //状态要保持同步
          }else{
              oImg.src = "./images/dark.jpg"; 
              tag = true; //状态要保持同步
          }
      }
      
  • if-else if

    语法:if(条件){条件成立时执行的代码}else if(条件){条件成立时执行的代码}else if…

    90以上:非常棒 80以上:优秀 70以上:中等 60:及格 60以下:再来一次

     /* 
    - 语法:if(条件){条件成立时执行的代码}else if(条件){条件成立时执行的代码}else if..........
    - 90以上:非常棒    80以上:优秀    70以上:中等     60:及格     60以下:再来一次
    */
    var s = 79; 
    if(s >= 90){
        console.log("非常棒");
    }else if(s >= 80){
        console.log("优秀");
    }else if(s >= 70){
        console.log("中等");
    }else if(s >= 60){
        console.log("及格");
    }else{
        console.log("再来一次");
    }
    
  • switch

    语法: switch(匹配项){

    ​ case 值 : 匹配到前面的值时执行的代码;break;

    ​ case 值 : 匹配到前面的值时执行的代码;break;

    ​ case 值 : 匹配到前面的值时执行的代码;break;

    ​ case 值 : 匹配到前面的值时执行的代码;break;

    ​ case 值 : 匹配到前面的值时执行的代码;break;

    ​ default:上面的都没有匹配到的时候执行的代码

    ​ }

    ​ break:防止穿透,如果不加break,匹配成功以后,后面的代码不会判断,直接执行

    var s = "*";
    switch(s){
        case "+" : console.log(100+10); break;
        case "-" : console.log(100-10);break;
        case "*" : console.log(100*10);break;
        case "/" : console.log(100/10);break;
        default:console.log("我太难了,要不然你换个符号");
    }
    

1.2 DOM获取元素

  • 通过id获取

    document.getElementById(“id名”):获取具体的实际的一个标签

  • 通过标签名获取

    document.getElementsByTagName(“标签名”):获取文档中所有对应标签名的标签

    父元素.getElementsByTagName(“标签名”):获取父元素中所有对应标签名的标签

  • 通过类名获取

    document.getElementsByClassName(“类名”):获取文档中所有对应类名的标签

    父元素.getElementsByClassName(“类名”):获取父元素中所有对应类名的标签

//1.document.getElementsByTagName("标签名")
var oLis = document.getElementsByTagName("li");
console.log(oLis); //HTMLCollection(9):元素集合,类似数组
console.log(oLis.length);//9 获取元素的个数
console.log(oLis[8]); //通过下标获取具体的元素

//2.集合中的内容一定要通过下标获取以后才能使用
oLis[0].onclick = function(){
    alert("点击")
}

//3.父元素.getElementsByTagName("标签名"):获取父元素中所有对应标签名的标签
var oUl = document.getElementById("list");
var oLis1 = oUl.getElementsByTagName("li");
console.log(oLis1);

id和其他获取方式的区别?

  • id:静态获取,获取标签的时候有这个标签就能够获取

  • tagName/calssName:动态获取,获取的时候没有,后期添加的标签一样能够获取到

    var oUl = document.getElementsByTagName("ul")[0];
    var byId = document.getElementById("h");
    var byTagName = document.getElementsByTagName("li");
    console.log(byId,byTagName);
    
    //在ul中添加一个li
    oUl.innerHTML = "<li id='h' style='width:100px;height:100px;background:red'></li>";
    console.log(byId,byTagName);
    

1.3 循环结构

循环:可以让特定的代码执行指定的次数

1.3.1 for循环

语法

for(表达式一;表达式二;表达式三){   循环体  }
for(初始化循环变量;循环条件;更新循环变量){循环体}
  /* 
            for(表达式一;表达式二;表达式三){   循环体  }
            for(初始化循环变量;循环条件;更新循环变量){循环体}
            循环过程
            1.初始化循环变量  i=0;
            2.判断循环条件
               条件成立,执行3
               条件不成立,结束循环
            3.执行循环体
            4.更新循环变量 i++ 1; 5
            5.回到步骤2

        注意:一定要有结束条件,否则会变成死循环
        */

        for(var i = 0;i<5;i++){
            console.log(i);//0 1 2 3 4
        }

循环添加点击事件

//1.获取元素
var oLis = document.getElementsByTagName("li");

//2.添加点击事件
for (var i = 0; i < oLis.length; i++) {
    //i = 0;  0
    //i = 1;  1;
    //i = 2;  2
    oLis[i].onclick = function () {
        console.log("我要回去看");
    }
}

循环添加标签

//循环添加标签
var arr = ["月5号放假,2月28开学","行李都要拿回家","需要退宿舍","电脑不能带走","明天下雪"];
var oUl = document.getElementsByTagName("ul")[0];
for(var i = 0;i<arr.length;i++){
    oUl.innerHTML += "<li>"+arr[i]+"</li>";
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值