js的流程控制语句及反选实例

最新推荐文章于 2022-04-20 12:39:06 发布

Strive_18

最新推荐文章于 2022-04-20 12:39:06 发布

阅读量378

点赞数

本文链接：https://blog.csdn.net/TC_16_zl/article/details/73881993

版权

js的流程控制语句

一、流程控制语句

1、if...else if语句与switch语句

两个语句十分相似，实现的效果也相同

//if...else if 判断
var str = 'css';
if( str === 'js'){
alert('js');
}else if(str === 'html'){
alert('html');
}else{
alert(str);
}
//switch
var str = 'css';
switch(str){
case'js':alert('js');break;
case'html':alert('html');break;
default:alert(str);
}

2、? : 三元运算，相当于if...else语句

if(12<45){

alert(12<45);
}else{
alert(12>45);
}
120<45 ? alert('120<45'):alert('120>45');
alert(120<45?'120<45':'120>45') //上面代码可以简化写为此代码

3、for循环与while循环效果极为相似

//while for 语句
var i = 0;
while(i<3){
alert(i);
i++;
}
for( var i=0;i<3;i++){
alert(i);
}

4、break语句与continue语句

//break、continue语句
for(var i=0;i<6;i++){
if( i == 4 )
break; //break是跳出循环，当i=4时，跳出for循环
alert(i);
}
for(var i=0;i<6;i++){
if( i == 4 )
continue; //continue是跳过循环，当i=4时，跳过for循环，继续执行下一次的for循环
alert(i);
}

5、js中的真假效果

真假问题：数据类型：数字（NaN）、字符串、布尔值、函数、对象（elem、 []、{}、null）、未定义
真：非0数字、非空字符串、true、函数、能找到的元素、[]、{}
假：0、NaN、空字符串、false、不能找到的元素、null、未定义

二、反选实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js的反选</title>
<style>
h1{ height:30px; width:300px; font-size:25px; line-height:30px; text-align:center; border:2px solid pink; margin:40px auto;}
li{ list-style:none;}
</style>
<script>
window.onload = function(){
var aInp = document.getElementsByTagName('input');
aInp[0].onclick = function(){
for( var i=1;i<aInp.length;i++){
aInp[i].checked = !aInp[i].checked;

if(aInp[i].checked){
aInp[i].checked = false;
}else{
aInp[i].checked = true;
}
}
}
}
</script>
</head>
<body>
<h1>js的反选例子</h1>
<input type="button" value="反选" />
<ul id="list">
<li><input type="checkbox" checked /></li>
<li><input type="checkbox" /></li>
<li><input type="checkbox" /></li>
<li><input type="checkbox" checked /></li>
<li><input type="checkbox" /></li>
</ul>
</body>
</html>

注意：两种颜色为两种方法。红色为取反方法，极为简单。蓝色为判断方法。