文章目录
流程控制语句
分类
- 顺序语句: 代码从上往下逐行解析
- 分支语句(条件): 根据条件选择某一条分支执行 if if else switch
- 循环语句: 让一段代码执行固定的次数 for while do-while for-in
- 其他语句: 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;
}
注意
- case后面只能写结果 不能写条件
- break: 防止穿透
如果在switch中不加break, 当条件匹配到一个结果之后, 后续的所有的结果的代码都不在判断,直接执行;
加了break, 阻止代码往下执行,跳出当前判断;
获取元素的方式
方式类型
- 通过id: document.getElementById(‘id’);
- 通过标签: document/父元素.getElementsByTagName(‘标签名’);
- 通过类名
通过标签获取
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源文件—>行数点一下—>刷新页面—>增加小的点调试—>点击箭头开始调试—>
执行步骤
- 初始化变量: var i = 0;
- 判断条件: i <= 100;
- 循环体: console.log(i);
- 变量更新: 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);
区别
-
while可以做的for都可以,for可以做的while也可以
当循环次数明确的时候 用for length 数值100
去重:当某个数组长度到多少的时候 不知道循环次数
-
当第一次循环条件就不符合的时候, 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