- 顺序结构:即按顺序执行代码 ;
- 条件选择结构(分支语句):包括 if-else 以及 switch;
- 循环结构:包括 for 循环,while,do-while,for-in 等;
- 其他语句: break 和continue。
1、分支语句
1、if
if (条件) {
如果条件为真,则执行这里
}
if (条件) {
如果条件为真,执行这里
} else {
如果条件为假,执行这里
}
if (条件1) {
如果条件1成立,执行这里
} else if (条件2) {
如果条件2成立,执行这里
} else if (条件3) {
如果条件3成立,执行这里
} else {
如果条件都不成立,执行这里
}
2、switch
switch (表达式) {
case value1:
表达式 === value1,执行这里;
break;
case value2:
表达式 === value2,执行这里;
break;
case value3:
表达式 === value3,执行这里;
break;
default:
如果value都和表达式不全等,则执行这里
}
2、DOM元素获取
1、通过ID获取
- document.getElementById(‘ID’);
返回的是一个元素,前缀必须是document
2、通过标签名获取
- document.getElementsByTagName(标签名); 返回整个文档下面的元素
- 父级.getElementsByTagName(标签名); 返回整个文档下面的元素
返回的是一个集合(类数组、伪数组),它有长度,可以通过下标获取某一个
3、通过class获取(IE8及以下不支持)
- document.getElementsByClassName(class名)
- 父级.getElementsByClassName(class名)
返回的是一个集合(类数组、伪数组),它有长度,可以通过下标获取某一个
4、通过css选择器获取(IE8及以上支持)
- document.querySelector(‘css选择器’) 只获取一个元素
- document.querySelectorAll(‘css选择器’) 获取所有的元素,返回一个集合(类数组、伪数组)
3、循环
1、for的原理
// 循环的作用是让一段特定的代码执行指定的次数
// for (1初始循环变量; 2判断条件(如果为真执行,如果为假退出循环); 4更新循环变量) {
// 3要执行的代码
// }
// console.log(1);
// console.log(2);
// console.log(3);
for (var i = 1; i <= 3; i++) {
console.log(i);
}
console.log(i);
// 执行过程
// 第一轮:1 2 3 4
// var i = 1
// i <= 3 true
// console.log(i); 相当于打印1
// i++ i现在为2
// 第二轮:2 3 4
// i <= 3 true
// console.log(i); 相当于打印2
// i++ i现在为3
// 第三轮:2 3 4
// i <= 3 true
// console.log(i); 相当于打印3
// i++ i现在为4
// 第四轮:2
// i <= 3 因为i为4,所以这里为false,则退出循环
2、while
1初始循环变量
while (2判断条件) {
3执行代码
4更新循环变量
}
// 打印1--3
var i = 1;
while (i <= 3) {
console.log(i);
i++;
}
// 第一轮:1 2 3 4
// 第二轮:2 3 4
// 第三轮:2 3 4
// 第三轮:2
3、do-while
do-while:不论条件成不成立,它至少都能执行一次
1初始循环变量
do {
2执行代码
3更新循环变量
} while (4判断条件)
var i = 1;
do {
console.log(i);
i++
} while (i <= 100);
// 条件不成立,也会执行一次
var i = 1;
do {
console.log(i);
i++;
} while (i >= 100);
4、for-in
// 对象的格式
{
key1: value1,
key2: value2,
...
}
// for-in格式
for(attr in 对象){
attr就是属性名
对象[attr]就是属性值
}
// 对象的读取方法
点的形式:对象.属性名
中括号的形式:对象['属性名']
var obj = {
name: 'zs',
age: 3,
job: '前端开发'
}
console.log(obj); // 对象没有长度,没有0 1 2的下标,不能for循环
// 对象读取:
// console.log(obj.name); // 点的读取方式
// console.log(obj['name']); // 中括号的读取方式
// --------------------------
// 一次性把对象所有的值读取,要for-in
for (var attr in obj) {
console.log(attr);
console.log(obj[attr]);
}