JavaScript流程语句、获取元素方法

最新推荐文章于 2025-05-15 16:34:57 发布

原创最新推荐文章于 2025-05-15 16:34:57 发布 · 154 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript流程语句

顺序结构

按照从上到下、从左到右的顺序执行

选择结构

if语句

语法：
if（条件语句）{
执行语句；
}
举例：

            var num=10;
			if(num>5){
				alert("条件为真");
			}

说明：
其中“条件语句”可以是任何一种逻辑表达式，如果“条件语句”的返回结果为true，则程序先执行大括号“{}”中的“执行语句”，然后接着执行if后面的其他语句。
如果“条件语句”的返回结果为false，则程序跳过“{}”的“执行语句”，直接执行程序后面的其他语句。

if……else语句（双向选择）

语法：
if（条件语句）{
条件为真时执行的语句;
}
else{
条件为假时执行的语句;
}
举例：

            var num=10;
			if(num>7){
				alert("条件为真");
			}
			else{
				alert("条件为假");
			}

if……else if语句（多向选择）

在多向选择结构中,当一个条件为真时,就不会执行之后语句.
语法：
if（条件1）{
条件1为真时执行的语句;
}
else if(条件2）{
条件2为真时执行的语句;
}
else{
条件1和条件2都为假时执行的语句;
}

            var num=10;
			if(num>7){
				alert("条件1为真");
			}
			else if(num<12){
				alert("条件2为真");
			}
			else{
				alert("条件都为假");
			}

if语句嵌套

            var num1=3;
			var num2=9;
			if(num1>2){
				if(num2>10){
					alert("9>10");
				}
				else{
					alert("9<10");
				}
			}

switch语句

case语句相当于标记一个位置，程序会根据switch条件表达式的结果，直接跳转到第一个匹配的位置，然后开始顺序执行后面的所有程序代码，包括后面的其他case语句下的代码，直到碰到break语句或函数返回语句为止。必须添加break,因为满足这个条件之后不会接着往下执行。
default语句是可选的，当其他所有的case语句定义的值都不满足时，就执行default后面的语句块。

            var num=50;
            switch (num){
            	case num>60:
            	alert("及格");
            		break;
            	default:
            	alert("挂科");
            		break;
            }

循环结构

while语句

while语句是条件判断语句，也是循环语句。
语法：
while（条件表达式语句）{
执行语句块；
}
说明：
当“条件表达式语句”的返回值为true时，就会执行大括号“{}”中的语句块，当执行完大括号“{}”的语句块后，再次检测条件表达式的返回值，如果返回值还为true，则重复执行大括号“{}”中的语句块，直到返回值为false时，才结束整个循环过程，接着往下执行while代码段后面的程序代码。
举例：
计算1+2+3+…+100的值

        <script type="text/javascript">
            var n=1;
            var sum=0;
            while(n<=100){
            	sum+=n;
            	n++;
            }
            document.write(sum);
		</script>

使用while语句要注意以下几点：
（1）应该使用大括号“{}”包含多条语句，即使是一条语句也最好使用大括号；
（2）在循环体中应该包含使得循环可以退出的语句，比如上面的“i++”。对于循环体，要是没有条件，循环就会无休止地运作下去，变成一个“死循环”，从而可能导致浏览器崩.

do…while语句

do…while语句先执行循环体语句一次，然后再判断是否符合条件。
语法：
do{
执行代码块；
}
while（条件表达式语句）；
说明：
do…while语句是先无条件执行循环体一次再判断是否符合条件的，如果符合条件，则重复执行循环体，如果不符合条件，则退出循环。
do…while语句结尾处的while条件语句的括号后有一个分号“；”，该分号一定不能省略。

        <script type="text/javascript">
            var  n=1;
            var sum=0;
            do{
            	sum+=n;
            	n++;
            }
            while(n<=100);
            document.write(sum);
        </script>

for循环语句

for语句通常由2部分组成：一是“条件控制部分”，二是“循环体”。
语法：
for（初始条件表达式；循环条件表达式；循环后的操作表达式）{
执行代码块；
}
说明：
在使用for循环之前要先设定一个计数器变量，可以在for循环之前定义也可以在使用时直接进行定义。上面的语法中，“初始化表达式”表示计数器变量的初始值；“循环条表达式”是一个计数器变量的表达式，决定了计数器的最大值。
在使用for语句时，需要保证循环可以正常结束，也就是保证循环条件的结果存在不为true的情况，否则循环体会无限地执行下去，从而出现死循环现象。

跳转语句

JavaScript支持的跳转语句主要有2种：
（1）break语句；
（2）continue语句；
break语句与continue语句的主要区别是：
break是彻底结束循环，而continue是结束本次循环。

break语句

break语句用于退出包含在最内层的循环或者退出一个switch语句。break语句通常用于while、do…while、switch或for语句中。

continue语句

continue语句用于退出本次循环，并开始下一次循环。跟break语句一样，continue语句也只能用在white、do…while、for和switch等循环语句中。

获取元素方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
//			通过getElementById()获取页面id为div1的元素,但输出的结果为null值: 原因是没有将获取页面元素的程序放置到事件中
//			var div=document.getElementById('div1');
//			alert(div);
//          第一种:获取页面元素
//			function load{
//			    var div=document.getElementById('div1');
//			    alert(div);
//			}
//			第二种添加加载事件的方式
            window.function{
            	//通过getElementsByClassName()获取页面class为div1的元素,但结果为一个集合
            	var div=document.getElementsByClassName('div1')[0];
//          	alert(div);
//          	innerHTML: 不仅可以获取该元素中的内容,而且还可以获取到标签
//          	var div=div1.innerHTML;
//          	alert(div);
//          	innerText: 获取该元素中的所有内容
				var div=div.innerText;
				alert(div);
            }
		</script>
	</head>
	<body >
		<div id="div1" class="div1">这是个div标签</div>
	</body>
</html>