day03 流程控制语句
1.回顾
1.1.数据类型
要求：能区分js数据类型的种类、不同数据类型的不同表现形式，不同数据类型之间的转换(转number、转string)
-
js的数据类型
-
number
- 数字、进制、NaN（不能正确运算的时候）、infinity
- NaN == NaN ： false
- 0.1+0.3 小数计算会出现偏差，不能使用小数作为判断条件
-
string
- 引号引起来的 “” ‘’
- str.length :获取字符串的长度
- str.charAt(下标)/str[下标]：下标从0开始
-
boolean
- true，false
-
undefined
- 未定义，空变量，声明变量没有赋值
-
null
- 空对象，访问不存在对象返回的结果
- 区别：undefined：空变量，声明变量但是没有赋值，null：空对象，访问不存在对象返回的结果
-
object
-
object
-
系统给的：window,document,标签,万物皆对象
-
自己定的：
var obj = { "name":"web", "age":18 } obj.name obj["name"]
-
-
array
var arr = [1,true,"a"]; arr.length : 获取数组的长度 arr[下标]：通过下标获取元素 -
function
//声明 function 函数名(){ 代码块 } //调用 函数名（）
-
-
-
typeof
number--typeof--number string--typeof--string boolean--typeof--boolean undefined--typeof -- undefined null--typeof--object object--typeof--object array--typepof--object function--typeof--function -
转number
- Number()：纯数字字符串，空字符串
- parseInt():从左往右进行转换，遇到不能转换的或者是末尾就会停止，取整
- parseFloat():从左往右进行转换，遇到不能转换的或者是末尾就会停止，保留小数
- toFixed(n)：保留n为小数
-
转string
- String()
- .toString():null和undefined没有
1.2运算符
-
赋值 = += -= *= /= %=
var a = 10; a += 2; //在原有的基础上+ a = a + 2; -
算术 + - * / % ++ –
++:自增，自加 自加1 var a = 10; var b = a++; //先运算，后自加 b = 10 a = 11 var c = ++a; //先自加，后运算 a = 12 c = 12 //a=12 b=10 c=12 -
比较 > >= < <= == != === !==
10 > "2"; //true 运算都会进行隐式转换，都尽量转换为number "2">"10" //true，字符串和字符串比较一位一位比较，并且比较的是编码 ”0"-48 A-65 a-97 "10" == 10; //true,会进行隐式转换 "10" === 10 //false，不会进行隐式转换 null == 0; //null在进行相等判断的时候不会进行隐式转换 null==null，undefined，undefined==undefined，null -
逻辑 && || ！
短路运算： var m = 0 && 3; //0 var n = 0 || 3; //3 -
三目
条件?条件成立执行的代码:执行冒号后面的代码
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("我要回去看");
}
}
循环添加标签
//循环添加标签
var arr = ["月5号放假，2月28开学","行李都要拿回家","需要退宿舍","电脑不能带走","明天下雪"];
var oUl = document.getElementsByTagName("ul")[0];
for(var i = 0;i<arr.length;i++){
oUl.innerHTML += "<li>"+arr[i]+"</li>";
}
546
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
