2.流程控制语句
分类:
- 顺序结构
- 分支结构(分支结构、分支语句) :if-else
- 循环结构 for while
2.1 分支结构
-
if
if:如果,给一个假设条件,条件成立会执行一个操作
语法:if(条件){ 条件成立执行的代码 }
//1.如果有钱(100块),花两块买彩票,中500万
var money = 99;
if (money >= 100) {
console.log("花两块买彩票,中500万");
console.log("买500万的泡面");
}
// 注意:if后面的大括号可以省略,省略了if就只能控制紧跟在后面的第一行语句
if (money >= 100)
console.log("花两块买彩票,中500万");
console.log("买500万的泡面");
-
if-else
语法:if(条件){条件成立时执行的代码}else{ 条件不成立时执行的代码 }
//1.如果有钱,买股票,没钱买二块彩票,
if(money>100){
//条件成立执行的代码
console.log("买股票");
}else{
//条件不成立执行的代码
console.log("买二块钱彩票,中500万");
}
- 开关效果:一个标签两种状态
//1.获取
var oImg = document.getElementById("img");
//3.找不到判断条件的情况下,自己创造条件
var tag = true; //true---黑 false--亮
//2.点击切换图片
oImg.onclick = function(){
//判断
//如果黑,亮 否则就黑
console.log(oImg.src); //获取的是绝对路径,不建议使用绝对路径的
//file:///E:/web%E7%AC%AC%E4%BA%8C%E9%98%B6%E6%AE%B5/day03%20%E6%B5%81%E7%A8%8B%E6%8E%A7%E5%88%B6/images/dark.jpg
if(tag == true){ //黑-----》改成亮的
oImg.src = "./images/bright.jpg";
tag = false; //状态要保持同步
}else{
oImg.src = "./images/dark.jpg";
tag = true; //状态要保持同步
}
}
-
if-else if
语法:if(条件){条件成立时执行的代码}else if(条件){条件成立时执行的代码}else if…
90以上:非常棒 80以上:优秀 70以上:中等 60:及格 60以下:再来一次
/*
- 语法:if(条件){条件成立时执行的代码}else if(条件){条件成立时执行的代码}else if..........
- 90以上:非常棒 80以上:优秀 70以上:中等 60:及格 60以下:再来一次
*/
var s = 79;
if(s >= 90){
console.log("非常棒");
}else if(s >= 80){
console.log("优秀");
}else if(s >= 70){
console.log("中等");
}else if(s >= 60){
console.log("及格");
}else{
console.log("再来一次");
}
-
switch
语法: switch(匹配项){
case 值 : 匹配到前面的值时执行的代码;break;
case 值 : 匹配到前面的值时执行的代码;break;
case 值 : 匹配到前面的值时执行的代码;break;
case 值 : 匹配到前面的值时执行的代码;break;
case 值 : 匹配到前面的值时执行的代码;break;
default:上面的都没有匹配到的时候执行的代码
}
break:防止穿透,如果不加break,匹配成功以后,后面的代码不会判断,直接执行
var s = "*";
switch(s){
case "+" : console.log(100+10); break;
case "-" : console.log(100-10);break;
case "*" : console.log(100*10);break;
case "/" : console.log(100/10);break;
default:console.log("我太难了,要不然你换个符号");
}
2.2 DOM获取元素
-
通过id获取
document.getElementById(“id名”):获取具体的实际的一个标签
-
通过标签名获取
document.getElementsByTagName(“标签名”):获取文档中所有对应标签名的标签
父元素.getElementsByTagName(“标签名”):获取父元素中所有对应标签名的标签
-
通过类名获取
document.getElementsByClassName(“类名”):获取文档中所有对应类名的标签
父元素.getElementsByClassName(“类名”):获取父元素中所有对应类名的标签
//1.document.getElementsByTagName("标签名")
var oLis = document.getElementsByTagName("li");
console.log(oLis); //HTMLCollection(9):元素集合,类似数组
console.log(oLis.length);//9 获取元素的个数
console.log(oLis[8]); //通过下标获取具体的元素
//2.集合中的内容一定要通过下标获取以后才能使用
oLis[0].onclick = function(){
alert("点击")
}
//3.父元素.getElementsByTagName("标签名"):获取父元素中所有对应标签名的标签
var oUl = document.getElementById("list");
var oLis1 = oUl.getElementsByTagName("li");
console.log(oLis1);
id和其他获取方式的区别?
-
id:静态获取,获取标签的时候有这个标签就能够获取
-
tagName/calssName:动态获取,获取的时候没有,后期添加的标签一样能够获取到
var oUl = document.getElementsByTagName("ul")[0];
var byId = document.getElementById("h");
var byTagName = document.getElementsByTagName("li");
console.log(byId,byTagName);
//在ul中添加一个li
oUl.innerHTML = "<li id='h' style='width:100px;height:100px;background:red'></li>";
console.log(byId,byTagName);
2.3 循环结构
循环:可以让特定的代码执行指定的次数
2.3.1 for循环
语法
for(表达式一;表达式二;表达式三){ 循环体 }
for(初始化循环变量;循环条件;更新循环变量){循环体}
/*
for(表达式一;表达式二;表达式三){ 循环体 }
for(初始化循环变量;循环条件;更新循环变量){循环体}
循环过程
1.初始化循环变量 i=0;
2.判断循环条件
条件成立,执行3
条件不成立,结束循环
3.执行循环体
4.更新循环变量 i++ 1; 5
5.回到步骤2
注意:一定要有结束条件,否则会变成死循环
*/
for(var i = 0;i<5;i++){
console.log(i);//0 1 2 3 4
}
循环添加点击事件
//1.获取元素
var oLis = document.getElementsByTagName("li");
//2.添加点击事件
for (var i = 0; i < oLis.length; i++) {
//i = 0; 0
//i = 1; 1;
//i = 2; 2
oLis[i].onclick = function () {
console.log("我要回去看");
}
}
循环添加标签
//循环添加标签
<body>
<ul></ul>
<script>
var arr = ["2月5号放假,2月28开学", "行李都要拿回家", "需要退宿舍", "电脑不能带走", "明天下雪"];
var oUl = document.getElementsByTagName("ul")[0];
for (var i = 0; i < arr.length; i++) {
oUl.innerHTML += "<li>" + arr[i] + "</li>";
}
</script>
</body>