流程控制、条件选择结构、if、if-else、else-if、if嵌套、获取元素的方式

流程控制

• 顺序结构：按照代码顺序执行
• 条件选择结构（分支语句）：if-else，switch-case
• 循环结构：for，while，do-while
• 其他语句：break，continue

条件选择结构（分支语句）

if

• if会提供条件，如果满足条件就执行对应的代码。语法：if (条件) { 条件成立时的执行 }
• 如果if条件满足时只有一句代码，可以省略{}，称之为单行if。

// if会提供条件，如果满足条件就执行对应的代码。语法：`if (条件) { 条件成立时的执行 }`
// 如果if条件满足时只有一句代码，可以省略{}，称之为单行if。
var score = 100;
if (score >= 60) {
    console.log('恭喜，及格了');
    console.log('晚饭吃鸡');
}

console.log('if之后的语句');

if-else

• if提供了满足条件的代码执行，if-else有两个分支，一个是条件成立时的执行，一个是条件不成立时的执行。语法：if (条件) { 条件成立时的代码 } else { 条件不成立时的代码 }

//if提供了满足条件的代码执行，if-else有两个分支，一个是条件成立时的执行，一个是条件不成立时的执行。语法：`if (条件) { 条件成立时的代码 } else { 条件不成立时的代码 } `
var score = 100;
if (score >= 60) {
    console.log('恭喜及格');
    console.log('今晚吃鸡');
} else {
    console.log('成绩不及格');
    console.log('男女混合双打');
}

else- if

• else-if：在条件为同等级且有多个条件需要判断时可以使用else-if。语法： if (条件1) { 条件1成立时的代码 } else if (条件2) { 条件2成立时的代码} else { 上面所有条件都不成立时的代码 }

//else-if：在条件为同等级且有多个条件需要判断时可以使用else-if。语法： `if (条件1) { 条件1成立时的代码 } else if (条件2) { 条件2成立时的代码} else { 上面所有条件都不成立时的代码 }`
// 把成绩分为几个区间：90-100：优秀  80-90：良好  60-80：及格 60以下不及格
var score = 0;
if (score >= 90) {
    console.log('优秀');
} else if (score >= 80) {
    console.log('良好');
} else if (score >= 60) {
    console.log('及格');
} else {
    console.log('不及格');
}

if嵌套

• 当使用一次 if无法确定时，可以在if之内再次使用if进行判断，称之为if的嵌套。

/*
if (条件1) { 
    // 当前满足条件1，再次进行条件2的判断
    if (条件2) {
        条件1，2成立的代码
    } else {
        条件1成立，条件2不成立的代码
    }
} else {
    。。。
}
*/

// 我国法定结婚年龄：男性22周岁 女性20周岁
// var gender = 'female';
// var age = 19;
// if (gender == 'male') { // 男性
//     if (age >= 22) {
//         console.log('恭喜你，可以娶媳妇了');
//     } else {
//         console.log('小伙子不要急，你还小');
//     }
// } else { // 女性
//     if (age >= 20) {
//         console.log('恭喜你，可以嫁人了');
//     } else {
//         console.log('小菇凉不要急，你还小');
//     }
// }

// 可以简化为：
var gender = 'male';
var age = 22;
if (gender == 'male' && age >= 22 || gender == 'female' && age >= 20) {
    console.log('恭喜你可以领证了');
} else {
    console.log('不急，你还小');
}

switch-case

• switch-case：适用于同等级并且是可罗列（有限的）的条件，优点是结构清晰。
• switch内部进行的是全等判断
• 注意：break可以结束本次分支的执行，如果省略break会直接往后执行，遇见case也不进行判断，直到遇到break（switch结束）为止。

/*
switch-case：适用于同等级并且是可罗列（有限的）的条件，优点是结构清晰。
switch (待检测的值) {
    case 可能的值1:
        值1对应的代码
        break;
    
    case 可能的值2:
        值2对应的代码
        break;

    case 可能的值3:
        值3对应的代码
        break;

    default:
        以上条件都不成立的执行
        break;
}
*/

var week = '星期四';
switch (week) {
    case "星期一":
        console.log('学习使我进步');
        break;

    case "星期二":
        console.log('学习使我快乐');
        break;
    
    case "星期三":
        console.log('学习使我开心');
        break;

    default:
        console.log("嗨起来");
        break;
}

获取元素的方式

• getElementById(id)：通过id获取元素，id是唯一的，每次获取的是单个的元素，如果找不到就是null。
• getElementsByTagName(标签名)：通过标签名获取元素，获取的是集合。
• getElementsByClassName(标签名)：通过类名获取元素，获取的是集合。
• id获取是静态，tagname和classname是动态。

// 获取页面中所有的li
// var lis = document.getElementsByTagName('li');
// console.log(lis); // HTMLCollection(16) 
// console.log(lis.length); // 16
// console.log(lis[0]); // <li>li1</li>

// 获取父元素中的目标元素
// var ul0 = document.getElementsByTagName('ul')[0];
// var ul0lis = ul0.getElementsByTagName('li');
// console.log(ul0lis);

// 获取页面中所有的box
// var box = document.getElementsByClassName('box');
// console.log(box);

// 获取父元素中的目标元素
// var ul0 = document.getElementsByTagName('ul')[0];
// var ul0box = ul0.getElementsByClassName('box');
// console.log(ul0box);