JS中的其他元素的使用

一哟玷、if? ?的使用

1、if（判斷條件）{}else {}

?if(判斷條件){

?條件成立要執(zhí)行的內(nèi)容

} else {

條件不成立要執(zhí)行的內(nèi)容

}

2施无、if（）{}? ? ? ? ? ?可以只有 if 沒有 else

if(判斷條件){

條件成立要執(zhí)行的內(nèi)容

}

二梦碗、數(shù)組存儲數(shù)據(jù)

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"

? ? ? ? ? ];

數(shù)組使用注意：

每一位數(shù)據(jù)之間用,號隔開

可以記錄（length）數(shù)組的長度

想要拿到其中一位用下標(biāo)

三祟辟、過界處理（0? ?-? ? img.length - 1） //0? 到? 數(shù)組最后一張

now--;

if(now < 0){//最小只能到0医瘫，小于0的時(shí)候，已經(jīng)過界了

now = 4;? //當(dāng)小于0時(shí)就等于4旧困，（做循環(huán)處理）

now = 0;? //當(dāng)小于0時(shí)就等于0醇份，（做暫停處理）

}

now++;

if(now > 4){//最大只能到4，大于4的時(shí)候叮喳，已經(jīng)過界了

now = 0;? //當(dāng)大于4時(shí)就等于0被芳，（做循環(huán)處理）

now = 4;? //當(dāng)大于4時(shí)就等于4缰贝，（做暫停處理）

}

四馍悟、獲取元素的方法：var? a = ...

1、document.getElementById("idName") 通過id來查找一個(gè)元素

2剩晴、 parent.getElementsByTagName('tagName') 通過標(biāo)簽名字锣咒，在父級來查找一組元素

3、 parent.getElementsByClassName('className') 通過class名字赞弥，在父級來查找一組元素

4毅整、parent.querySelector('css選擇器');

? ? ? ?通過一個(gè)合法css選擇器，在父級來查找一個(gè)元素(如果找到的是一組元素就只返回這組的第0個(gè))

5绽左、parent.querySelectorAll('css選擇器');

? ? ? 通過一個(gè)合法css選擇器悼嫉，在父級來查找一組元素

五、循環(huán)的使用（for（）{}）

js中不能同時(shí)操作一組元素拼窥，如果想對一組元素批量進(jìn)行操作戏蔑，可以使用循環(huán)蹋凝。

循環(huán)執(zhí)行順序解析圖

執(zhí)行順序：1->2->3->4

包含：

1-）初始值: i = 0

2-）判斷條件: i < 5

3-）執(zhí)行語句: 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);? ? ? ? ? ? ? ? ?

? ? ? ? ? ? }

//? ? 判斷條件成立時(shí)情龄，則循環(huán)一直執(zhí)行迄汛，直到條件不成立時(shí)，循環(huán)結(jié)束骤视，彈出結(jié)果： 8

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

? ? ? ? ? ? ? ? ? ? ? console.log(i);

? ? ? ? ? ? ? ?}

//死循環(huán),條件沒有不成立的時(shí)候鞍爱，循環(huán)會一直執(zhí)行下去

△循環(huán)的作用：

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硬霍、生成多行多列元素