web前端全栈0基础到精通（祺）js 03

流程控制语句.

分类

1. 顺序语句: 代码从上往下逐行解析

2. 分支语句(条件): 根据条件选择某一条分支执行 if if else switch

3. 循环语句: 让一段代码执行固定的次数 for while do-while for-in

4. 其他语句： break; continue;

分支语句

if

if(条件){

​ 条件为真的时候执行的代码

}

// 假设今天周六 就可以出去了
// var day = '周六';
var day = '周三';
if(day == '周六'){
    alert('出去浪');
}

if else

if(条件){

​ 条件为真的时候执行的代码

} else {

​ 条件为假的时候执行的代码

}

// 假设今天周六 就可以出去了
// var day = '周六';
var day = '周三';
if(day == '周六'){
    alert('出去浪');
} else {
    alert('好好学习 天天向上');
}

if else 嵌套

if(条件1){

​ 条件1为真的时候，执行的代码

} else if(条件2){

​ 条件2为真的时候，执行的代码

} else if(条件3){

​ 条件3为真的时候，执行的代码

} else{

​ 以上条件都不满足, 执行的代码

}

每一个判断都进，直到找到最后一个符合条件的为止

if(day == '周一'){
    alert('我很困');
} else if(day == '周二'){
    alert('精神稍好');
} else if(day == '周三'){
    alert('期待周末');
} else if(day == '周四'){
    alert('逐渐开心');
} else if(day == '周五'){
    alert('失去理智');
} else if(day == '周六'){
    alert('放飞自我');
} else {
    alert('瞬间萎靡');
}

switch

switch(条件/数据){

​ case 结果1:

​ 条件符合结果1的时候, 执行的代码;

​ break;

​ case 结果2:

​ 条件符合结果2的时候, 执行的代码;

​ break;

​ case 结果3:

​ 条件符合结果3的时候, 执行的代码;

​ break;

​ default:

​ 以上结果都不满足的时候, 执行的代码;

​ break;

}

只适用于条件和结果非常单一的时候

var day = '周三';
switch(day){
    case '周一':
        alert('我很困');
        break;
    case '周二': 
        alert('精神稍好');
        break;
    case '周三': 
        alert('期待周末');
        break;
    case '周四': 
        alert('逐渐开心');
        break;
    case '周五': 
        alert('失去理智');
        break;
    case '周六':
        alert('放飞自我');
        break;
    default: 
        alert('瞬间萎靡');
        break;
}

注意

1. case后面只能写结果 不能写条件

2. break: 防止穿透

​ 如果在switch中不加break, 当条件匹配到一个结果之后, 后续的所有的结果的代码都不在判断，直接执行;

​ 加了break, 阻止代码往下执行，跳出当前判断;

获取元素的方式

方式类型

1. 通过id: document.getElementById(‘id’);
2. 通过标签: document/父元素.getElementsByTagName(‘标签名’);
3. 通过类名

通过标签获取

document/父元素.getElementsByTagName(‘标签名’);

​ 获取到一个集合, 类数组, 有长度、有下标, 不能用数组的方法

​ 只有一个元素，获取到也是集合

​ 集合不能直接操作, 需要通过下标获取到具体的某一个元素，再去操作

var li1 = document.getElementById('li1');
console.log('id', li1);

var lis = document.getElementsByTagName('li');
console.log('tagName',lis); // HTMLCollection  一次性获取页面中所有的li
console.log(lis[0]); // 获取第一个元素
lis[0].style.background = 'red';

// lis.style.background = 'green'; // 没有下标获取具体的元素 会直接报错  Cannot set property 'background' of undefined

// 获取父元素
var uls = document.getElementsByTagName('ul');
console.log(uls); // 集合  
console.log(uls[1]); // 集合中第二个ul
var lis1 = uls[1].getElementsByTagName('li'); // 获取第二个ul的所有的li
console.log(lis1);

var uls1 = document.getElementsByTagName('ul');
console.log(uls1[0]); // 拿到第一个ul
console.log(document.getElementsByTagName('ul')[0]);
var ul0 = document.getElementsByTagName('ul')[0]; // 获取第一个ul

通过类名获取

document/父元素.getElementsByClassName(‘类名’);

​ 获取到一个集合, 类数组, 有长度、有下标, 不能用数组的方法

​ 只有一个元素，获取到也是集合

​ 集合不能直接操作, 需要通过下标获取到具体的某一个元素，再去操作

var li1 = document.getElementById('li1');
console.log('id', li1);

var lis = document.getElementsByClassName('box');
console.log(lis); // 集合  全页面中类名为box的元素

// 获取第一个ul中的类名为box的元素
var ul = document.getElementsByTagName('ul')[0];
console.log(ul);

var boxes = ul.getElementsByClassName('box');
console.log(boxes);

区别

通过id:

​ document.getElementById(‘id’)

​ 只能通过document获取

​ 直接获取到具体的元素

​ 可以直接进行操作

​ 静态性: 先获取，后再添加此元素 获取不到 获取的时候页面中有，就能拿到 页面中没有 就拿不到

通过标签/类名:

​ document/父元素.getElementsByTagName

​ document/父元素.getElementsByClassName

​ 既可以是document也可是父元素

​ 获取到的是一个集合

​ 不可以直接进行操作，需要通过下标获取到具体的元素之后在操作

​ 动态性: 先获取，后再添加此元素 也可以获取到

var l1 = document.getElementById('l1');
console.log(l1);
l1.style.fontSize = '30px';

var uls = document.getElementsByTagName('ul');
console.log(uls);
uls[0].style.color = 'red';

// 获取第二个ul
var l2 = uls[1];
console.log(l2);

// 通过l2获取一个id名为box的元素
var box = document.getElementById('box');
var box1 = l2.getElementsByTagName('li');
console.log(box); // null
console.log(box1); // 空集合  没有li

l2.innerHTML = '<li id="box">123456</li>';
console.log(box); // null
console.log(box1); // [li#box]

循环

循环: 让一段代码执行固定的次数

必须要有循环可以结束的条件, 如果没有形成死循环

for

语法

for(表达式一;表达式二;表达式三){

​ 每次循环执行的代码 —> 循环体

}

for(初始化变量;循环结束的条件;更新变量){

​ 循环体

}

初始化变量： var i = 0; var 变量 = 起始值;

循环条件: 当变量符合循环条件 执行循环体 不符合循环条件 结束循环

更新变量: ++ – 变量++; 变量–;

for (var i = 0; i <= 5; i++) {
    console.log(i);
}

调试方式

调试方式： 断点调试

​ console控制台—>Sources源文件—>行数点一下—>刷新页面—>增加小的点调试—>点击箭头开始调试—>

执行步骤

1. 初始化变量： var i = 0;

2. 判断条件: i <= 100;

3. 循环体: console.log(i);

4. 变量更新： i++;

​ 2 3 4 2 3 4 234…2

语法二

除了判断条件以外所有的都可以不写在for的()中

注意: 两个;一个都不能省 变量更新放在最后

初始化变量: var i = 起始值;

for(;循环条件;){

​ 循环体;

​ 变量更新;

}

var j = 0;
for (; j <= 5;) {
    console.log(j);
    j++;
}

for-in

对象是无序的，没有下标 没有长度 无法用for进行循环

需要使用for-in循环

for(var 变量 in 对象){

​ 变量—属性名

​ 对象[变量]–属性值

}

var obj = {
    'name': '彭于晏',
    'age': 33,
    'height': 188,
    'sex': '男'
};
console.log(obj);
for(var key in obj){
    console.log(key, '属性名');
    console.log(obj[key], '属性值');
}

while

初始化变量;

while(循环条件){

​ 循环体;

​ 变量更新;

}

var i = 1;
while(i <= 100){
    console.log(i);
    i++;
}

do-while

初始化变量;

do{

​ 循环体;

​ 变量更新;

}while(循环条件);

var i = 1;
do{
    console.log(i);
    i++;
}while(i <= 100);

区别

1. while可以做的for都可以，for可以做的while也可以

   当循环次数明确的时候 用for length 数值100

   去重：当某个数组长度到多少的时候 不知道循环次数

2. 当第一次循环条件就不符合的时候, while一次都不执行, do-while会执行一次

其他语句

break

break: 防止穿透; 跳出循环, 后续代码不执行

for(var i = 0; i < 5; i++){
    if(i == 2){
        break;
    }
    console.log(i);
}
for(var i = 0; i < 5; i++){
    console.log(i);
    if(i == 2){
        break;
        continue;
    }
}

continue

continue: 结束本次循环，下次循环继续

// for(var i = 0; i < 5; i++){
//     if(i == 2){
//         continue;
//     }
//     console.log(i);
// }
for(var i = 0; i < 5; i++){
    console.log(i);
    if(i == 2){
        continue;
    }
}

输出：break: 0 1 2 continue: 0 1 2 3 4

​