JS学习日记03

流程控制

用来控制代码按照一定的结构顺序执行

三种结构：顺序结构、分支结构、循环结构

顺序结构

顺序结构：最简单、最基本的流程控制语句，没有特定的语法，按照代码书写顺序执行。

分支结构

由上到下执行代码的过程当中，根据不同的条件，执行不同路径的代码，得到不同的结果

单分支

1、语法结构

if (条件){
    //代码块
}

2、执行步骤
先判断条件，如果条件返回值是true(成立)，执行{}里面的代码块，如果返回值是false(不成立)，代码不执行。

双分支：

1、语法结构

if(条件){ 
     //条件成立时执行的代码块
}else{
     //条件不成立时执行的代码块
}

2、执行步骤
先判断条件，如果条件返回值是true(成立)，执行{}里面的代码块，如果返回值是false(不成立)，执行else后面的{}里面的代码块。

多分支

1、语法结构

if(条件1){
    // 满足条件1执行的代码块
}else if(条件2){
    // 满足条件2执行的代码块
}else if(条件3){
    // 满足条件3执行的代码块
}
.........
else{
    // 上述所有的条件都不满足，执行的代码块
}

【注意】：
1、else if之间有空格
2、条件判断一定是从第一个条件到最后一个条件
3、使用多分支，条件不能交叉，不能遗漏

switch()语句

一般用来进行值或者字符的匹配。
1、语法结构

switch(条件《固定值或者字符》){
    case '1':
        条件匹配执行的代码块
       	 break; // 跳出语句
    case '2':
        条件匹配执行的代码块
        break; 
    .......
    default:
        上述条件都不匹配执行的代码块
        break; 
}

switch和if的区别与联系
1、如果条件是一个范围。优先使用if语句，如果是固定值或者固定字符的匹配，则使用switch
2、if实现的东西，switch不一定可以实现，但是，switch可以实现的，if一定可以实现

获取元素

1、通过id获取
获取到的是单一元素，一次只能获取一个元素

document.getElementById(‘id值’)；

2、通过class名获取
通过class名获取到的是多个元素，得到的是一个伪数组，有长度和下标，如果使用里面的元素，必须通过下标，且必须在这个伪数组的长度范围之内。

document.getElementsByClassName(‘class名’)； // 注意：class名不带点

3、通过标签名（tag）获取
通过标签名（tag）名获取到的是多个元素，得到的是一个伪数组，有长度和下标，如果使用里面的元素，必须通过下标，且必须在这个伪数组的长度范围之内。
4、使用样式中的继承方式 ：querySelector()
注意：class需要带点. ,id需要带 #
只能获取一个，页面中第一次出现的元素

document.querySelector()// 标签名，class名，id名 还可以使用样式中的写法

5、使用样式中的继承方式 ：querySelectorAll()

注意：class需要带点. ,id需要带 #
获取到是多个元素，是一个伪数组，有长度和下标

document.querySelectorAll()// 标签名，class名，id名 还可以使用样式中的写法

6、获取body和html标签

var body = document.body; //获取body标签
var html = document.documentElement;//获取HTML标签

循环

for循环

重复的执行某些代码（相同和不相同）
语法结构

for(初始化变量;条件表达式;值变化){
    循环体
}

1、初始化变量：初始化一个计数器，使用var关键字声明一个变量，在整个循环过程中，只执行一次。
2、条件表达式：循环体的结束条件，若在这个条件内，返回值是true,循环体继续循环，若返回值是false,结束循环体
3、值变化：确定每一次循环是否能正常循环。

双重for循环

双重for循环就是在for里面再嵌套一个for循环，里面的for循环是外面的for循环的代码块

【注意】：外面的for循环走一次，里面的for循环走完
语法结构：

for(初始化变量;条件表达式;值变化){
    for(初始化变量;条件表达式;值变化){
    循环体
	}
}

while

先判断条件是否满足，如果满足，则执行，如果不满足则不执行

语法结构：

while(条件){
    //条件满足执行的代码块
}

【注意】：一定要有值变化，如果没有，会形成死循环

do-while循环

先执行一次，然后再去判断条件是否满足，如果满足，继续执行，如果不满足，结束循环

语法结构：

do{
    // 代码块
}while(条件)

continue和break

1、continue: 跳出当前程序，如果条件满足，会继续执行下面的代码
2、break: 跳出的是整个程序，即使后面的代码条件满足，也不会执行