美文网首页
js获取元素

js获取元素

作者: WANGLIN_HZ | 来源:发表于2018-06-19 20:25 被阅读0次

    通过标签获取元素

    <!DOCTYPE html>
    <html>
    <head>
        <title>通过标签获取元素</title>
        <script type="text/javascript">
            window.onload = function(){
                var aLi = document.getElementsByTagName('li');
                //alert(aLi.length)
                //aLi.pop();//错误
                aLi[0].style.backgroundColor = 'gold'
                aLi[1].style.backgroundColor = 'gold'
                
            }
            
        </script>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
        </ul>
    </body>
    </html>
    

    循环语句

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>循环语句</title>
        <script type="text/javascript">
            window.onload = function(){
                var oList = document.getElementById('list01');
                var aLi = oList.getElementsByTagName('li');
                var j = 0;
                //2.在循环中设置一个条件表达式
                while(j < aLi.length){
                    aLi[j].style.background = 'gold';
                    //3.定义一个更新表达式,每次更新初始化变量
                    j++;
                }
                outer:
                for(var i=0 ; i<5 ; i++){
                    console.log("@外层循环"+i);
                    for(var j=0 ; j<5; j++){
                        console.log("内层循环:"+j);
                        break outer;
                    }
                }
            } 
        </script>
    </head>
    <body>
        <ul id="list01">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>
    </body>
    </html>
    

    循环语句:
    通过循环语句可以反复的执行一段代码多次

    • while循环
    • 语法:
      while(条件表达式){
      语句...
      }
    • while语句在执行时,
      先对条件表达式进行求值判断,
      如果值为true,则执行循环体,
      循环体执行完毕以后,继续对表达式进行判断
      如果为true,则继续执行循环体,以此类推
      如果值为false,则终止循环
    • do...while循环
    • 语法:
      do{
      语句...
      }while(条件表达式)
    • 执行流程:
      do...while语句在执行时,会先执行循环体,
      循环体执行完毕以后,在对while后的条件表达式进行判断,
      如果结果为true,则继续执行循环体,执行完毕继续判断以此类推
      如果结果为false,则终止循环

      实际上这两个语句功能类似,不同的是while是先判断后执行,
      而do...while会先执行后判断,
      do...while可以保证循环体至少执行一次,
      而while不能
      for语句,也是一个循环语句,也称为for循环

    • 在for循环中,为我们提供了专门的位置用来放三个表达式:
      1.初始化表达式
      2.条件表达式
      3.更新表达式

    • for循环的语法:
      for(①初始化表达式;②条件表达式;④更新表达式){
      ③语句...
      }

    • for循环的执行流程:
      ①执行初始化表达式,初始化变量(初始化表达式只会执行一次)
      ②执行条件表达式,判断是否执行循环。
      如果为true,则执行循环
      ③如果为false,终止循环
      ④执行更新表达式,更新表达式执行完毕继续重复②
      任意一种循环都可以互相嵌套


    if语句的嵌套

    在JavaScript中,if语句是可以嵌套使用的,大家看看下面一个例子,琢磨一下就知道if语句的嵌套是怎么用了。

    举例:

    <!DOCTYPE html>
    <head>
    
        <title></title>
    
        <script type="text/javascript">
            var x=6;
            var y=8;
            if (x<4)
            {
                 if (y==10)
                 {
                      alert("x<4&&y==10");
                 }
                 else
                 {
                      alert("x<4&&y!=10");
                 }
            }
            else if(x>5)
            {
                 if (y==10)
                 {
                      alert("x>5&&y==10");
                  }
                 else
                  {
                      alert("x>5&&y!=10");
                  }
            }
    </script>
    </head>
    <body>
    </body>
    </html>
    

    switch语句

    在JavaScript中,switch语句也是选择结构中很常用的语句。switch语句用于将一个表达式同多个值进行比较,并根据比较结果选择执行语句。

    语法:

    switch(表达式)
    {
        case 取值1:
            语块1;break;
        case 取值2:
            语块3;break;
        ……
        case 取值n:
            语块n;break;
        default:
            语句块n+1;
    }
    

    相关文章

      网友评论

          本文标题:js获取元素

          本文链接:https://www.haomeiwen.com/subject/ibrzeftx.html