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、生成一列元素

<ul  class = "list"></ul>

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

var inner = "";

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

inner += '<li>'+i+'</li>';

}

list.innerHTML = inner;

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

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

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

               inner += '<li style = "left:'+j*100+'px;top:'+i*100+'px;">'+i+'行<br/>'+j+'列<br/>'+(i * 5 + j)+'号</li>';

    }

}

 i * length + j

list.innerHTML = inner;


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 个人学习批处理的初衷来源于实际工作;在某个迭代版本有个BS(安卓手游模拟器)大需求,从而在测试过程中就重复涉及到...
    Luckykailiu阅读 10,261评论 0 11
  • 背景 一年多以前我在知乎上答了有关LeetCode的问题, 分享了一些自己做题目的经验。 张土汪:刷leetcod...
    土汪阅读 14,352评论 0 33
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 12,384评论 2 17
  • 1. tab列表折叠效果 html: 能源系统事业部 岗位名称: 工作地点 岗位名...
    lilyping阅读 5,888评论 0 1
  • 大一,认识了一个异性老乡,虽然没在同一个系别,但是,在天气好的周末常常一起打打篮球,聊聊一周的生活,谈谈高...
    孟小苒阅读 5,374评论 8 5