js获取元素
2018-06-19 本文已影响0人
WANGLIN_HZ
通过标签获取元素
<!DOCTYPE html>
<html>
<head>
<title>通过标签获取元素</title>
<script type="text/javascript">
window.onload = function(){
var aLi = document.getElementsByTagName('li');
//alert(aLi.length)
//aLi.pop();//错误
aLi[0].style.backgroundColor = 'gold'
aLi[1].style.backgroundColor = 'gold'
}
</script>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</body>
</html>
循环语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>循环语句</title>
<script type="text/javascript">
window.onload = function(){
var oList = document.getElementById('list01');
var aLi = oList.getElementsByTagName('li');
var j = 0;
//2.在循环中设置一个条件表达式
while(j < aLi.length){
aLi[j].style.background = 'gold';
//3.定义一个更新表达式，每次更新初始化变量
j++;
}
outer:
for(var i=0 ; i<5 ; i++){
console.log("@外层循环"+i);
for(var j=0 ; j<5; j++){
console.log("内层循环:"+j);
break outer;
}
}
}
</script>
</head>
<body>
<ul id="list01">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</body>
</html>
循环语句：
通过循环语句可以反复的执行一段代码多次
- while循环
- 语法：
while(条件表达式){
语句...
}
- while语句在执行时，
先对条件表达式进行求值判断，
如果值为true，则执行循环体，
循环体执行完毕以后，继续对表达式进行判断
如果为true，则继续执行循环体，以此类推
如果值为false，则终止循环
- do...while循环
- 语法：
do{
语句...
}while(条件表达式)
-
执行流程：
do...while语句在执行时，会先执行循环体，
循环体执行完毕以后，在对while后的条件表达式进行判断，
如果结果为true，则继续执行循环体，执行完毕继续判断以此类推
如果结果为false，则终止循环实际上这两个语句功能类似，不同的是while是先判断后执行，
而do...while会先执行后判断，
do...while可以保证循环体至少执行一次，
而while不能
for语句，也是一个循环语句，也称为for循环
-
在for循环中，为我们提供了专门的位置用来放三个表达式：
1.初始化表达式
2.条件表达式
3.更新表达式 -
for循环的语法：
for(①初始化表达式;②条件表达式;④更新表达式){
③语句...
} -
for循环的执行流程：
①执行初始化表达式，初始化变量（初始化表达式只会执行一次）
②执行条件表达式，判断是否执行循环。
如果为true，则执行循环
③如果为false，终止循环
④执行更新表达式，更新表达式执行完毕继续重复②
任意一种循环都可以互相嵌套
if语句的嵌套
在JavaScript中，if语句是可以嵌套使用的，大家看看下面一个例子，琢磨一下就知道if语句的嵌套是怎么用了。
举例：
<!DOCTYPE html>
<head>
<title></title>
<script type="text/javascript">
var x=6;
var y=8;
if (x<4)
{
if (y==10)
{
alert("x<4&&y==10");
}
else
{
alert("x<4&&y!=10");
}
}
else if(x>5)
{
if (y==10)
{
alert("x>5&&y==10");
}
else
{
alert("x>5&&y!=10");
}
}
</script>
</head>
<body>
</body>
</html>
switch语句
在JavaScript中，switch语句也是选择结构中很常用的语句。switch语句用于将一个表达式同多个值进行比较，并根据比较结果选择执行语句。
语法：
switch(表达式)
{
case 取值1:
语块1;break;
case 取值2:
语块3;break;
……
case 取值n:
语块n;break;
default:
语句块n+1;
}
