JS中的其他元素的使用

一、if   的使用

1、if(判断条件){}else {}

 if(判断条件){

 条件成立要执行的内容

} else {

条件不成立要执行的内容

}

2、if(){}           可以只有 if 没有 else

if(判断条件){

条件成立要执行的内容

}

二、数组存储数据

eg.  var arr = ["a", 2, document.body, true, 3, 10];

eg.  var imgData = [

           "img/img0.jpg",

           "img/img1.jpg",

            "img/img2.jpg",

            "img/img3.jpg",

            "img/img4.jpg"

          ];

数组使用注意:

每一位数据之间用,号隔开

可以记录(length) 数组的长度

想要拿到其中一位用下标

三、过界处理(0   -    img.length - 1) //0  到  数组最后一张

now--;

if(now < 0){//最小只能到0,小于0的时候,已经过界了

now = 4;  //当小于0时就等于4,(做循环处理)

now = 0;  //当小于0时就等于0,(做暂停处理)

}

now++;

if(now > 4){//最大只能到4,大于4的时候,已经过界了

now = 0;  //当大于4时就等于0,(做循环处理)

now = 4;  //当大于4时就等于4,(做暂停处理)

}

四、获取元素的方法:var  a = ...

1、document.getElementById("idName") 通过id来查找一个元素

2、 parent.getElementsByTagName('tagName') 通过标签名字,在父级来查找一组元素

3、 parent.getElementsByClassName('className') 通过class名字,在父级来查找一组元素

4、parent.querySelector('css选择器');

       通过一个合法css选择器,在父级来查找一个元素(如果找到的是一组元素就只返回这组的第0个)

5、parent.querySelectorAll('css选择器');

      通过一个合法css选择器,在父级来查找一组元素

五、循环的使用 (for(){})

js中不能同时操作一组元素,如果想对一组元素批量进行操作,可以使用循环。


循环执行顺序解析图

执行顺序:1->2->3->4

包含:

1-)初始值: i = 0

2-)判断条件: i < 5

3-)执行语句: alert(i)

4-)自增: i++

eg1 .    for(var i = 0; i < 5; i++){

               alert(i);                    //依次弹出:0、1、2、3、4

           }

eg2.     for(var i = 2; i <= 7; i += 3){

                alert(i);                 

            }

//    判断条件成立时,则循环一直执行,直到条件不成立时,循环结束,弹出结果: 8

eg3.      for(var i = 0; i < 10; i -= 2.5){

                      console.log(i);

               }

//死循环,条件没有不成立的时候,循环会一直执行下去


△循环的作用:

1、批量操作元素

for(var i = 0; i < lis.length; i+=2){

        lis[i].style.background = "#ccc";

}

for(var i = 1; i < lis.length; i+=2){

     lis[i].style.background = "#eee";

}

2-1、生成一列元素

var list = document.querySelector('.list');

var inner = "";

for(var i = 0; i < 5; i++){

inner += '

  • '+i+'
  • ';

    }

    list.innerHTML = inner;

    2-2、生成多行多列元素

    for(var i = 0; i < 5; i++){

          for(var j = 0; j < 5; j++){

                   inner += '

  • '+i+'行
    '+j+'列
    '+(i * 5 + j)+'号
  • ';

        }

    }

     i * length + j

    list.innerHTML = inner;


    你可能感兴趣的:(JS中的其他元素的使用)